These instructions are for the following blogs:

• BBA blog
• Center blogs
  
  • Bolz Center blog
  • Graaskamp Center blog
  • Grainger Center blog
  • MLI blog
  • Nicholas Center blog
  • SHRM Center blog
  • Weinert Center blog
• Newsroom posts (also see this documentation for more specific details about editing newsroom posts)
• Risk and Insurance Dept. blog
• RMI specialization blog

On This Page:

Training and Access

You must receive training from the web team before you will be granted access to edit WSB blogs.

To request blog training, please have the blog owner email webteam@wsb.wisc.edu with your request and the following:

• Your first and last name
• Your netID (this is not a number)
• Your status (student worker, staff, or faculty)
• Which dept/center blog(s) you need access to edit

Login to WordPress

1. Go to business.wisc.edu/wp-admin (bookmark this page for easy access).
2. Click "Sign in with your Net ID" button. Login using Duo.
   1. Typing in your Net ID with the associated password will not work on this login page.

Add a New Blog Post

• Important: Navigate to your specific blog in the left menu. DO NOT select POSTS. That post type is only for WSB news editors.
  • You may need to scroll down to find your blog. Look for the abbreviated name of your dept. or center (e.g. A.C. Nielsen CTR)

• • If you scroll all the way to the bottom, and still don't see your blog, you will need to request access from the web team.
• Click Add New at the top of the page.

Adding your content

Title

• Add the title of the article in the first field, where it says "Add Title".
  • Make sure this is spelled correctly because it will become part of the URL for your blog post.

• If you are copying and pasting the title, you will need to use plain text. The following are keyboard shortcuts for plain text pasting:

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

Body Content

Headings

• We recommend you break up long blog posts with headings (and subheadings if appropriate).
• Headings are great for scanning and accessibility. 
  • Make sure to nest your headings in an organized way without skipping levels, like you might do for an outline:
    • Heading 1 (blog post title is automatically set to be an H1)
      • First Heading 2 (this would be the first subheading you add to your article)
        • Heading 3 (subsection of First Heading 2)
        • Heading 3 (another subsection of First Heading 2)
      • Second Heading 2
        • Heading 3 (subsection of Second Heading 2)
          • Heading 4 (subsection of Heading 3)

Text/Copy

• You can ignore the message that says "Type / to choose a block" and click on it to add a cursor and start typing whatever you want. Or you can copy and paste your text from another document.
  • You can also click the button with a plus sign to add a paragraph block or a heading. You may need to type "paragraph" or "heading" in the search bar to find the right block.
• Formatting your copy:
  • Click on or highlight the text you want to format.
  • A small box should appear above the selected copy.
  • In this box, you can edit text alignment (use left or center), bold, underline, hyperlink, etc.
  • You can choose any other text formatting options that make sense for your content, except text color. You should not change the text color because it won't match our brand colors and it can create accessibility (readability) issues.

Adding links / URLs

Tips:

• DON’T just paste a URL as is
  • example: www.example.com/events/schedule/really-long-event-name-alsk156dfnow7ein
  • Why? Try to quickly read the example link above. It’s long, some of it is gibberish, and only a small portion of the link has useful information about what might be on that page. Links like this are frustrating for readers who want to get important information as quickly as possible. They are especially frustrating for users who rely on screen readers to access information on the internet, an important accessibility tool.

• DON’T use generic link text that gives no context
  • examples: Click here; Learn more
  • Why? Generic link text is an accessibility issue. Someone who is relying on a screen reader to find info or someone who is in a hurry and skims the page will be frustrated by “click here” which gives them no context for what a link does. 

• DO use a short phrase that describes the action the link takes or where it goes
  • examples: Learn more about the fall festival; Read more about Jane Goodall; Register for the conference
  • Why? These are easy to scan and help set the user expectation for what a link will do. This will reduce user frustration and confusion.
  • How do I know if my link text is descriptive? When writing the link text, ask yourself “Would someone who only reads the link text know where it goes or know what action to expect?” If the answer is yes, you are on the right track!

• DO test your links and make sure they work as expected

  • Why? Ever clicked on a link that takes you to a page with an error? So frustrating! Or maybe you clicked a link and it took you to the wrong place? Ugh! 
  • To prevent this experience on your blog, be sure to preview your post or go to your published post and test your links by clicking on each one. (yes, each one!) Then you’ll be able to see if you have the right link added in each spot and if each link actually works. 
  • Bonus Tip: Have someone else on your team test all your links, too!

How to add a link / URL:

1. Add your link text (the text users will see on the page)
2. Highlight the text and a small box with formatting options should appear above the selected copy 
3. Select the chain link icon and paste the URL in the field. Be sure to hit the Enter key or push the arrow button so the link gets added.
4. Be sure to test all of your links!

Images

• These instructions are for adding supporting images within your blog post. If you want to add a cover or featured image, please see those instructions below.
• Image dimensions will vary. You should upload the original image (max image size: 2400px wide and max file size: 5MB) so it will be high quality.
  • Recommended minimum image sizes: 
    • headshots - 250x250px
    • group shots or images with more detail - 1,000x1,000px
• WordPress creates different sizes of every image you upload and allows you to crop the image or resize it as necessary. You'll see instructions for this below.
• Adding/Selecting an Image 

• • Click the button with a plus sign and type "image" to search for the image block and select it. (Or hit the enter key to start a new line and type "/image" and select the option that pops up.) 
    • Select "Media Library"
      • If you or a team member already uploaded the image to the WP media library, search for and select the image. 
        • Tip: When searching the media library, be sure to select "All Files" on the left side before you search so that WordPress looks through the entire media library. Alternatively, if you know which folder the image is in, you can drill down through the path of image folders to get to your image.
        • Make sure the image has alt text describing what is in the photo, including all visible text, to meet accessibility requirements.
          • Learn more about writing effective alt text for images
      • Otherwise, click the Upload Files tab to add your image to the correct media library folder.
        
        • Under Choose Folder, click on "Uncategorized". In the dropdown, look for "blogs" folder and then select your blog's folder below it.
          • Tip: before selecting the Upload Files tab, find the folder you need to add images to in the Media Library tab and select it. When you navigate to the Upload Files tab, your folder will be selected for you.
        • Drag and drop the image from your computer or click "Select Files" and find your image on your computer.
      • Once the image has loaded, you must add alt text describing what is in the image. This is an accessibility requirement for any image that provides readers important context (especially images that have text in them).
      • You can also add a caption if you like.
        • Tip: Adding the caption to the image in the media library means it will display under the image every time it is used. If you might use the image multiple times and don't always want the caption displayed, you will need to add it to the image block in the event editor instead. 
• Editing an Image
  • Click on the image to see editing options.
    • Above the image you can:
      • choose an alignment option (left, center, right) – click the three horizontal lines (with the middle one being thicker than the others) in the toolbar. This will show you the different image alignment options.
        • 

• • • • crop the image
      • add a hyperlink to the image
      • move the image to a higher or lower position on the page
    • On the right side of the screen, when the image is selected, you can:
      • add alt text (remember this is required for every photo)
      • edit the image size (select a predetermined size created by WordPress or reduce the size)
        • Make sure you don't stretch or squash the image. You can adjust height and width but must keep their proportions the same. If you need the proportions to be different, you have to crop the image. (see above)
    • Below the image you can add an optional caption. (This is the recommended location for adding a caption, if you would like one displayed.)
• Deleting an Image
  • Use one of the following methods:
    • From a blog post, click on an image block and click "replace" if you already have an image added to the block. From there, find the image to delete and click "Delete permanently" (this will be under the image on the right side of the screen).
    • Go to the WP login dashboard and click Media in the left side menu. Find your image by searching or going through the media library folders and hover over it. Click "Delete permanently".

Multiple images

If you want multiple images in one row, especially at the end of your post, there are two blocks you can use.

• You can add the image collage block

• Hover your mouse between the items near the center and click the + button that appears.
• Type "image collage" in the pop-up window and select that block.

• Image collage block has 3 layouts
  • Side-by-Side: Two images that are next to each other. In mobile, the images are stacked.
    • In this layout, it is best to use images that are the same size/proportions.
  • Staggered: A group of 3 images in a row, with the middle one being lower than the outer images. In mobile, the block becomes a swiper.
    • This layout works best with vertical images (images which are taller than their width).
  • Stacked: A group of images where image one and two are smaller and stacked and image three is larger and next to the stacked images. In mobile, the two smaller images are side by side and on top of the larger image.
    • This layout works well with our standard image proportions/sizes (16:9 or 2400x1600px)

You can add columns

• Hover your mouse between the items near the center and click the + button that appears.
• Type "columns" in the pop-up window and select that block.
• Hover over the plus sign in the column you want to add an image.
• You can add and edit images as you usually do.

Videos

You will need to make sure the video is uploaded to Youtube before following these steps.

• Click the plus sign button
• Search "Youtube" in the pop-up window and select the Youtube Lazy Load block (do not use the "Youtube" block)
  • Add the embed code for the video you want to embed.
  • Add the video title (required for accessibility)
  • Only change the play button color if needed for contrast with the video's cover image (e.g. if the image is mostly light colors, choose the dark button so users can see it and know it is a video)
  • Image override (optional) – if you prefer to add a different cover image for the video in this block, do so here
    • The image should be 1176x662px
  • Introduction (optional) – text content that will appear above the video
  • Footer (optional) – text content that will appear below the video
• Do not use the "Youtube" block – it displays videos at a much smaller size and they take longer to load on the page, which could create problems for the user.

Additional Features

Aside callouts

• Guidelines:
  • Use to display a small amount of copy and an optional, small image (a headshot or icon) next to the post content.
  • 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

• Adding/editing asides:
  • Click the plus sign button or type a forward slash and search for "aside".
  • Select the aside callout block.
  • Select which type of aside block you need. When you change the type of aside, different fields will pop up, so be sure to choose the type first, before you fill in the fields.
    • Image - statistic (use with a square icon or photo, or no image)

• • • Image - person (use with a square headshot - the block will crop the image to a circle)

      

      
      

    • Ranking (no image)

• • Add the image (if applicable) and the text. We recommend only using a square image for this block. The "image - person" layout will crop your image to a circle for you.

  • Be sure to preview your content to make sure the aside is not cutting into content or overlapping with the footer content on the page.

    • Click Preview > Preview in a new tab to check this. Resize your browser to as skinny as possible to mimic the view on a mobile device. Or you can publish the changes and pull up the post on your phone to see how it looks.
    • If the aside is overlapping other content, splitting up content, or making the article difficult to read, move the aside block up or down the page and preview again to make sure the issue is resolved.

Meta Fields

These optional fields can be found below your post content. If you don't see subtitle, author override, etc. you need to click the arrow next to Meta to expand this section.

• Subtitle

  • The subtitle will appear below the post title and above the author and featured image.

• Author override

  • Author defaults to your name (the person making the post). If you want it to be someone else, say your department or center, put that name here.

• Photography credit

  • Add photographer's name here if you want to provide a photography credit for all images in your post.

• Hide featured image

  • Check the box if you want to hide the featured image on the actual blog post.
    • If unchecked, the featured image will appear at the top of your blog post and in the listing of blog posts.
      • You can add a caption for a featured image under the Featured Image Caption field.
    • If checked, the featured image will only be displayed in the listing of blog posts.

Yoast SEO Premium (bottom section)

You can ignore this section. 

Right-hand menu options

• Categories (optional)
  • Be sure Uncategorized is unchecked and pick the category your post falls under.
    • Category options vary for each blog. Make sure to follow our blog category and tag standards.
• Post Tags (optional)
  • Add your tag(s). 
    • Tag options vary for each blog. Make sure to follow our blog category and tag standards.
• Featured Image (recommended)
  • Featured images must be high resolution, jpg or png files, 2400 pixels (px) wide, and between 1500 and 1700px tall.
  • Click Set Featured Image.
  • Follow instructions above for adding images to the media library.

Saving, Previewing, and Publishing

• On upper right side, click Publish to make your post public.
• Other options:
  • If you need to leave the page and come back before you publish the post, click Save Draft.
  • To see what your post will look like, click Preview, then Preview in a New Tab.
  • If you want to set a later time for the post to publish, click "Immediately" and set the day and time. You can also backdate posts if want them to appear in a certain order in your blog listing. Blog articles are listed in reverse chronological order.

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. 

A Note on Cross-posting

As of the launch of the new website (business.wisc.edu) in August 2021, you can no longer cross-post blog posts to multiple blogs. Cross-posting is bad for search engine optimization (SEO) because it creates duplicate content on our website, splits up traffic to the post, and lowers the ranking of our content in search results.

Training Video

Recorded in August 2021

<iframe id="kaltura_player" src="https://cdnapisec.kaltura.com/p/1660902/sp/166090200/embedIframeJs/uiconf_id/25717641/partner_id/1660902?iframeembed=true&playerId=kaltura_player&entry_id=1_ef48zq9w&flashvars[streamerType]=auto&flashvars[localizationCode]=en_US&flashvars[leadWithHTML5]=true&flashvars[sideBarContainer.plugin]=true&flashvars[sideBarContainer.position]=left&flashvars[sideBarContainer.clickToClose]=true&flashvars[chapters.plugin]=true&flashvars[chapters.layout]=vertical&flashvars[chapters.thumbnailRotator]=false&flashvars[streamSelector.plugin]=true&flashvars[EmbedPlayer.SpinnerTarget]=videoHolder&flashvars[dualScreen.plugin]=true&flashvars[Kaltura.addCrossoriginToIframe]=true&&wid=1_40a8128y" width="649" height="401" allowfullscreen webkitallowfullscreen mozAllowFullScreen allow="autoplay *; fullscreen *; encrypted-media *"  frameborder="0" title="Kaltura Player"></iframe>