Add/Edit Newsroom Posts

All Alumni, Faculty, Newsroom, MBA, Dean, and Press Release articles live under Posts, which is called the Newsroom on the front-end.

The following example post shows all the news article components to choose from. You can choose how you prefer to view it:

1. Log into WordPress first, then view the private post at https://business.wisc.edu/news/example
2. View screenshot below

On This Page:

Advanced Newsroom Features

There are new features and blocks that can be used in Newsroom articles, as of March 2023. Find detailed documentation for how these features should be used under Adding Blocks and Meta Fields on this page.

If you would like more information, you can watch this recording of a Newsroom training from March 15, 2023.

Newsroom Landing Page - Featured News

To update the featured newsroom content (shown in the purple box in the screenshot below), submit your content changes to the web team via a web ticket.

Featured News Top Story (featured news hero block)

UPDATE MARCH 2023 - If the main image for the featured story has text, is a collage, or generally doesn't work for the hero block on the News homepage, the web team can upload a different image just to display in the hero spot on this page.

• Minimum photo size: 2400px wide, height can vary (recommended height: 1300px-1600px)
• Web team - for the Newsroom hero image: check the "override featured image" field and add/upload the new image

Add a New Post

See detailed directions for editing blog posts - the information below only pertains to Newsroom articles.

Add Your Text Content

When pasting text from your original document to WordPress, be sure to paste as plain text. This ensures no random formatting code gets copied into WordPress, which can sometimes create formatting issues on the website.

Keyboard shortcuts:

• For Windows - Ctrl+Shift+V
• For Macs - Cmd+Shift+V

Categories

• In the right menu, uncheck Uncategorized and pick the one category this article falls under
  • Category options: School News, Faculty Insights, Alumni in Action, Student Experience, Dean's Corner, Press Releases
• Note: we have a standard set of News categories. Do not add a category unless you have prior approval to do so.

Tags

• In the right menu, add your tags, make sure they are from the tag list and spelled/capitalized exactly as listed
  • Tag list: https://docs.google.com/spreadsheets/d/1Stgz9AA8U32cdM-GKwOHaLZdaXBOxEWzy-BxlCoM-UY/edit?usp=sharing

Uploading Images

• Every image must have alt text. Please add it to existing images that are missing it. Learn more about alt text for images.
• Be sure to upload new images to the Blogs > Newsroom media library folder in WP.
  • We can add more folders inside Newsroom (by year or by category) if you want to add more organization.
• 

Adding Blocks (optional)

Aside Callout

• Guidelines:
  • Use to display a small amount of copy and an optional, small image (a headshot or icon) next to the post content.
    • Minimum photo size: 400x400px
  • Use the top-most text fields
    • Top level text goes in the "headline" field, even if it isn't a heading (e.g. person's name can go here)
    • If you have 2 levels of content, use the top two fields (headline and subtitle). Only use the 3rd field if you have already filled in the first two levels.
  • Aside blocks are meant to be used with a very small amount of copy, ~100 characters or fewer.
  • Asides should be used sparingly in a single article – use 3 asides max.
  • If using more than one aside, they should be separated by at least one paragraph. 
  • The aside block cannot be the last item in your post (this will push it down to overlap the footer content and mess up formatting on the page)
    
    • Move it above some of the copy to fix this issue
  • Be sure to preview your article to make sure there are no formatting issues
• How to edit/use asides in your article

Callout Box

• Guidelines:
  • Use a single callout box at the end of an article to display sidebar/endbar content
  • Content should not exceed 125 words.
  • Photo sizes can vary.
• Options:
  • Background style - light gray, light blue, or gray pattern
  • Image (optional) - add a photo, square headshot, or WSB icon
    • Alignment - default is left aligned or you can choose to center the image
    • Crop the image to a circle? Yes/No (Note: only choose Yes for a square image!)
  • Heading (recommended)
    • Heading size - most of the time this should be an H2 or an H3
    • Alignment - default is left aligned or you can choose to center the heading
  • Text - add your content and format it (e.g. add a hyperlink, paragraph breaks, or bullet points)
    • Text should remain left aligned in most cases
  • Button (optional)
    • Alignment - default is left aligned or you can choose to center the button

Full-width Background

• Please reach out to a designer or web developer for assistance implementing this block.
  • A designer can help with appropriate image choices
  • A web developer can help ensure the content you have works with this block and that web accessibility standards are met (e.g. text color contrasts with the background and is readable)
• Guidelines:
  • Use this block sparingly (i.e. don't use it in most articles you write and you typically shouldn't use it more than once per article)
  • This block doesn't work with all images; it works best with large images with a subtle focus or subject (see example below).
  • Limit the amount of copy in this block – think pull quote length, rather than a full paragraph or more. (~50 words max)
  • Minimum photo size: 2400x1600px (this block will not let you select a smaller image)
• Options:
  • Background – can be a color pattern or a photo
    • For photo background:
      • Display a different image for mobile? Since the text will appear below the image on mobile screens, you can choose a different image
      • Hide image for mobile? Since the text will appear below the image on mobile screens, you can choose to hide the image if it makes sense to do so. (For example, the paintbrush image in the example below is a bit too plain without text on top, so it was hidden for mobile.)
    • Add parallax effect? An effect that makes the background pattern or photo appear static as other content scrolls past it. (See paintbrush example.)
    • Title + title heading size
    • Link
    • Custom content (supporting copy)
    • Text styles
      • Text color (only with photo background) - black, white, or default colors
        • Note: Be sure to choose a color that has high contrast with the background photo
      • Horizontal placement – place the text content where it overlaps with the least busy/detailed/important part of the photo
      • Vertical alignment (only with photo background) – place the text content where it overlaps with the least busy/detailed/important part of the photo
      • Add transparent background? (only with photo background)
        • If you cannot find a spot where the background is simple and dark or light enough to contrast with one of the text colors, toggle this to Yes and the text box will have a background color to help with contrast and readability.
      • Stretch link? (only if you have filled in the link fields) – makes the entire text area clickable
      • Animation: Add text fade-in? – adds an animation in which the text appears and moves upward as you scroll to the block on the page. Note: the animation will only happen the first time you scroll to the content. To view the animation again, refresh the page.

Horizontal Image Text

• Guidelines:
  • Use this to display an image next to text.
  • Works best with a vertical image with a width to height ratio greater than 2:3
  • Make sure to preview your article when using this block; you may need to change how much copy you place next to the image or choose a different size for the image to make the content heights as even with each other as possible
    • e.g. it doesn't look good to use a tall image with only a sentence of copy; you wouldn't want to put three paragraphs next to an image that doesn't take up a lot of space
  • Minimum photo size: 700px wide
• Options:
  • Image
    • Image options
      • Alignment - select whether image appears on the right or left side
      • Column width - select the percentage of the entire width you want the image to take up (from 33% to 66%)
        • TIP: Once you've added your image and text, try a few different options here to find a ratio that looks best.
      • Show image caption? Find the image in the media library to add the caption. Check this box if you want the caption displayed here.
  • Text
    • Add your copy and format as needed (e.g. add heading, subheading, hyperlink)

Image Collage

• Guidelines:
  • Use for 2 or 3 images you want to display in a group.
  • Minimum photo size: 750px wide
• Options:
  • Layout
    • For 2 images use the side-by-side layout
    • For 3 images choose the staggered or stacked layout
  • Images
    • caption
  • Introduction – a heading and/or text that will appear above the images
  • Footer – text and/or a button that will appear below the images

Image block

• Guidelines:
  • Use to display 1 image in your post
  • Photo sizes will vary, recommended minimum size is 500x500px
    • Large, full-width images should be 2400x1600px
• How to add an image block

Jumbotron (large photo or photo slideshow)

Guidelines:

• Use this block to showcase 1-10 photos, with or without a caption. If multiple images are added, they will be in a slideshow.

  • The max number of images you can use is 10; beyond this number, the block will not work properly on mobile screens.
• Keep the caption/paragraph copy to 250 characters or fewer and use a similar amount of copy for each photo in a single slideshow
  • The photo caption overlaps the bottom of the photo, so be sure to crop the image in a way that the main details are not at the very bottom. A designer may be able to assist you with adding padding to the bottom of an image if needed.
  • Put the caption in the "Copy" field, under Add/Edit Cards
• Photo size: recommended 2400x1350px 
  • Image width must always be 2400px
  • Image heights can vary, but all images in a slideshow should have the same heights
    • Other image heights that work well: 1050px, 1350px, 1600px
    • Tip: You can start by uploading an image with our standard dimensions – 2400x1600px – and crop the height to 1350px inside the WP media library
      • To crop an image, add it to the Jumbotron block and hover over the image - then click the pencil icon to edit it. 
      • Note: cropping an image in WP will affect all uses of that image; only crop images that you uploaded to WP to be safe
  • Set the image ratio field (under Configuration) to best display your images.
    • Recommended: 16x9 or 21x9
    • Play around with the options or find the ratio below that matches your image dimensions: 
      
      • Image dimensions: 2400x1050px –>  Choose image ratio: 21x9
      • Image dimensions: 2400x1350px –> Image ratio: 16x9
      • Image dimensions: 2400x1600px –> Try 16x9 ratio; if the images are cropped too much, try a different crop of the photos or reach out to a designer or web developer for assistance.
• Because this is a multipurpose block that we use in news stories and across the website, there are many fields you can ignore:
  • Add/Edit cards – ignore title, subtitle, and link
  • Introduction – ignore all fields
  • Footer – ignore all fields
  • Configuration – ignore all fields except "image ratio"

Lazy Load Youtube Video

• Guidelines:
  • Use this block anytime you want to embed a Youtube video in your post.
    • Do not use the "Youtube" block – that block displays videos at a much smaller size and they take longer to load on the page, which could create problems for the user.
  • Photo size for image override: 1176x662px (you can use a larger image size, but if the proportions are different, the image will get cropped)
• How to embed YouTube videos in your article

Pullquote

• Guidelines:
  • Use this block to display a quote.
  • The quote text will be large and red – do not change the formatting or color of the text.
  • Quote will be centered and it will be wider than the post content above and below it (unless it is a short quote).

Meta fields

Find these under the post content, within Meta - post field group

Byline Options

• You can add a Subtitle to the post. It will appear directly below the title.
• You can add an Author Override if needed. If you do not credit an author under Author Override, your post's byline will credit the selected author in the upper right-hand side of the editor.
• You can credit the photographer(s) under Photography Credit.

Featured Image Options

• You can add a Featured Image. This image is pulled with the article title to display on any pages that list news articles in cards (such as the Newsroom page page).
  • While the featured image can be added in the right side menu, the featured image options are found in the meta - post field group.
    • Options include:
      • Hide featured image - Yes or No (if checked, the next two fields will be hidden)
      • Title and Featured image layout - 3 options: Default, 50-50 split, or Full-width image
      • Image caption - field will only appear if featured image is not hidden and default layout is selected

Research Citation Options

Display featured faculty and their research at the end of your article

• Add the faculty name (first and last)
• Optional: add a link to the faculty profile page (e.g. https://business.wisc.edu/directory/profile/faculty-member-name )
• Add the faculty's position
• Add the citation for the research mentioned in the article
  • Tip: link the article name to the source

Related Stories

• Under Related Posts, you can search for and manually select three posts to display under "Explore More Stories", below the article.
  • The posts you have selected will appear to the right of the list of posts
  • Tip: Select taxonomy drop-down allows you to search for posts with a specific category or tag.
  • If you don't select any posts, WP will automatically choose 3 recent posts with similar categories/tags.

SEO

SEO stands for Search Engine Optimization

• SEO information is populated for you based on the article title and an excerpt from the beginning of the article.
• You can edit SEO information if desired (or if that is the standard set for the newsroom)
  • Below your post content in the editor, you can edit SEO details in the Yoast SEO Premium section
  • 
  • You can remove the pink "Title" block and replace with a shortened title.
  • You can change the URL by editing the Slug – it is best to do this before publishing the post so we don't end up with a broken link for a previously published post.
    • Each post's slug must be unique, so be sure the slugs you choose are long enough that it won't result in duplicates.
  • You can add a meta description if desired.
  • There are two color bars that indicate whether the length of your SEO title and meta description are good, okay, or too long. Avoid the red bar indicating your content is too long here.

Edit an Existing Blog Post

1. Navigate to your blog in the left menu.
2. Find the post you want to edit in the list of posts or search for it. Click on the name of the post to edit.
3. Make your changes and be sure to click Publish in the top right corner to make those changes live. 

For Website Launch

Updating Categories

1. The new categories were added to WordPress. I was able to rename some old categories, which re-categorized some posts, but that didn’t capture all of the posts. And I was afraid to do too much because I didn’t want to categorize something improperly, so you need to make sure each post has the correct category. I left some of the old categories in case it’s helpful, but those should get deleted before site launch.
2. Go to Posts in the left menu. In the same left menu, you'll see Categories listed under Posts. Click Categories to see all the current category options. To see which articles have that category, click the number,

Updating Tags

1. You need to tag all the articles with the new set of tags.
2. Suggestion: Go to Posts in the left menu. In the same left menu, you'll see Tags listed under Posts. Click Tags to see all the current tags. Find something that is close to the new tag that has a lot of posts and rename it to the new tag. That whole set is done. For other ones that need that tag, you will have to go into them one by one.