To make full use of UXi's layouts for blog archives and posts, here's a quick and easy beautification process.


UXi® uses a single page as a post archive. The post archive is a required page set up to show all posts by default. Every UXi® site should have a page entered here. The posts page can be easily identified on the Pages dashboard by the "Posts Page" label next to the page title.


Step 1. Set up Posts Page & featured image settings.

 To set up the site with the necessary settings, navigate to UXi® Settings > General

  1. In the Reading section, select a page that will only be used for this setting. Create one if needed using the +New > Page link at the top of the dashboard.
  2. Add a custom page title and meta description to be used for the post archive.
  3. Select how many blog posts will be shown per page with the 'Blog Posts Shown' option.
  4. In the Media section, select image sizes for featured images.
  • Archive: This sets the size for featured images on the post archive set up in step 1 above.
    While these dimensions are up to the designer, a width of about 200px works great for archive layouts that display the featured image at Left or Right of the post content.

  • Single: This sets the size of the featured image when viewing a single blog post.
    The best dimensions to use here are 1200px by 628px. This will allow the featured image to also be used for sharing the post on social media. (more on that below)

  • Any time that these image sizes are updated, the site's thumbnails must be regenerated.  To do this, navigate to UXi® Tools > Regenerate Thumbnails and simply click Regenerate All Thumbnails.  This process can take a while; please do not navigate away from the page until you see confirmation that the process is complete.

  • While updating the UXi® General Settings, view the Facebook/Twitter section. If no image has been added there, upload a 1200px by 628px image that will be used when any page of post is shared that does not have a custom share image added. Learn more about social sharing here. The 'Enable Facebook Open Graph Meta Tags' option must be enabled to share posts or pages on Facebook. 



Step 2. Create a post archive layout.

  1. View the Posts page in the front-end editor and create a new layout. The layout created here will now be used for any post archive. Post archives include any category links like /category/news/ or tag links like /tag/marketing/
    Here are a few solid options:
  • 66% | 33% or 75% | 25% : Great for displaying posts in the wider left column and adding widgets in the narrower right column. This right column will stack below the posts on mobile devices. 
  • 33% | 66% or 25% | 75% : Great for adding a search bar or other widget that will stack above the posts on mobile devices.

    (This example uses 66% | 33%)
  • Add the Page Content widget to the main, wider column of the layout and edit the widget settings. (All settings should be addressed, only those critical to this beautification process are covered below)
  • Content Display: Preview : This will display only an excerpt of the post.
  • Preview Length: 400 : This will display a good portion of each post and fill the visual space next to the featured image.
  • Read More Position: Right or Left : This will place the link below the post excerpt, creating more visual space between each post. (This example uses Right.)
  • Featured Image Position: Left or right : Depending on the columns selected in step 1. Place the featured image inline with the post excerpt. (This example uses Left.)
  • Featured Image Style: Thumbnail works great to add a subtle border, Circle should only be used when the image sizes are perfectly square.
  • In the other column, nest rows to add any additional widgets.  Here are a few suggestions:
  1. Business Info: Display contact info for the company
  2. Call to Action: Encourage the user to contact, call, inquire, request an estimate, or anything else!
  3. Tag Cloud: Sites with large amounts of tags automatically generate an engaging 'cloud' of tags for users to interact with.
  4. Category List: Sites with existing categories generate an easy to navigate list of categories in use on the site.

    If a left-hand sidebar is used, remember that the content of the page will stack underneath the widgets in the left column, so less is more. Limiting the left column to something like a button or search widget would be ideal.

Step 3. Create a single post layout.

Now that a layout has been created to show post archives, it's time to create another layout that will be used to display all individual blog posts. Similar to the archive layout suggestions above, this layout should include a wide column for the post content, and a secondary narrower column for any additional widgets.
  1. View a single post in the front-end editor and create a new layout. The main column must contain the page content widget.
  2. While there are no requirements on what widgets are used in the sidebar, but here are a few suggestions.
    • Business Info: Display contact info for the company
    • Call to Action: Encourage the user to contact, call, inquire, request an estimate, or anything else!
    • Recent Posts: Sites with existing posts can use this widget to allow users to easily navigate to other posts.

  3. The layout created here can be used for all posts using the Layout Application feature in UXi Tools.



Using a grid layout

The page that's set up as the post archive (Referenced in Step 1) can be modified to show the posts in a grid format instead of stacked vertically. However, creating this layout requires a couple extra steps for best results:

  1. Custom CSS must be added to the site. This should be added by someone comfortable with editing CSS.
  2. Each post must have a featured image.
  3. Featured Image position must be set to top.
  4. The post titles should be consistent enough in length to fit the grid format as well.


Blog Archive Grid Layout Rows of Three

/* BLOG ARCHIVE GRID LAYOUT | ROWS OF THREE */
body.is-desktop li.post-archive.type-post.status-publish {
  float: left;
  max-width: 31%;
  margin: 0 1% 5% 1%;
}
body.is-desktop li.post-archive.type-post.status-publish:nth-of-type(3n+1) { clear: both; }

.archive-pagination>ul { clear: both; }


Blog Archive Grid Layout Rows of Two

/* BLOG ARCHIVE GRID LAYOUT | ROWS OF TWO */
body.is-desktop li.post-archive.type-post.status-publish {
    float: left;
    max-width: 48%;
    margin: 0 1% 5% 1%;
}
body.is-desktop li.post-archive.type-post.status-publish:nth-of-type(2n+1) { clear: both; }

.archive-pagination>ul { clear: both; }



Because it requires the featured image, this layout won't be for everyone.  When beautifying blog content imported form older sites, 

use an image size around 350px for a grid layout.