How to move post meta to the bottom in WordPress Twenty Sixteen theme

Twenty sixteen is a theme provided by wordpress.org with a modernized take on an ever-popular WordPress layout. The theme provides horizontal masthead with an optional right sidebar that works perfectly for blogs and websites. It has custom color options with beautiful default color schemes, a harmonious fluid grid using a mobile-first approach, and impeccable polish in every detail. Twenty Sixteen will make your WordPress look beautiful everywhere.

The Problem

By default, the post meta is displayed to the left of the post content as below.

This is not always desirable and sometimes we want the post meta at the bottom. This results in an increased content width, thereby resulting in better readability.


The Solution

Edit the theme via a Plugin to move the post meta to the bottom. The steps are as below.

  1. Install the plugin Simple Custom CSS
  2. Go to Appearance > Custom CSS
  1. Add the below css
  1. Click on Update Custom CSS at the bottom

If you don’t want to use a plugin, you can do all the above steps in the default Additional CSS editor available under Appearance > Customize


Conclusion

Now, the content width is increased and the post meta is moved to the bottom as below.

To further format the post meta, say displaying the post meta in a single line, use the css below.

The formatted post meta is now displayed as below.

However, these changes also affect the posts in the home page as below.

As you can see, the post meta is moved to the bottom and formatted even here. But, the user name & avatar are hidden. To display the user name & avatar similar to how it is displayed in post page, add the css below.

The home page now looks as below.

The consolidated css with all the above changes is as below.

Leave a Reply

Your email address will not be published. Required fields are marked *