Okay
  Print

How to Customize a Posts Page


WordPress has been always known for its powerful blogging system. In our themes, we have expanded it even more to give you a larger control over your blog.

 There are two ways to set up and customize a blog page on your site, and here we'll cover both of them.

 

Setting Up the Posts Page in the Customizer

 Defining a Page as the 'Posts Page'

 The first thing we need to do is to define a page as the Posts Page in the admin dashboard.

 In order to do this: 

  1. Create a new page by going to Pages -> Add New, and save it.

  2. Go to Settings -> Reading and in the 'Front page displays' section, select your newly created page from the dropdown list:

 

 Customizing the Posts Page in the WordPress Customizer

 In order to customize your Posts Page, go to Appearance -> Customize -> Blog archive.

 The options you'll see there give you a detailed control over the appearance of your blog page. Here are a few of them: 

  • Blog style - select from 12+ blog styles including masonry, portfolio, gallery, chess, and more;

  • Post meta - choose which post meta data you want to display, e.g. comments, publication date, categories, views count, etc;

  • Pagination style - choose between page numbers, 'load more' button, oldest/newest buttons, or make posts load automatically with infinite scroll

  • Post animation - pick the animation style with which new posts would appear as you scroll down the page (optional). There are over 30+ animation styles to choose from.

  • Header style - select a header style for your blog page (for more information on header styles, see Layouts);

  • Widget placement - choose which widgets you want to display for different widget areas on your blog page (sidebar, above/below the content, above/below the page);

  • Sidebar position - decide whether you want to use a left or right sidebar;

 This covers the first method of creating and customizing a blog page.

 It is suited for the default posts page on your site, however if you want to add another one, create it using the second method.

 

 

Creating a Posts Page via Blog Archive Template (Alternative Method)

 

There is another way of creating a Posts page.

 It's better suited for additional posts pages, which can be used to display a particular post type, post category, etc. Here's how you do it: 

  1. Create a new page by clicking Pages -> Add New.

  2. In the Page Attributes section on the right, select the 'Blog archive' template

  1. Save the page.

 Now if you open it in your browser, you'll see that it displays the list of posts, just as a blog page should do.

 Posts Page Settings in Theme Options

 The page created with a blog archive template can be additionally customized in Theme Options of the page.

 The Theme Options settings overwrite the Customizer values. This allows you to create a fully personalized Posts page, which would be different from the default Posts Page assigned in Settings -> Reading.

 In order to see available settings, open your blog page and click on the Content tab in the Theme Options section:

 

 

The settings would include: blog style, post type, post category, posts per page, post meta, pagination style, and post animation.

 The great thing about Theme Options is that you can decide which post type and post category you want to display on your page.

 

 Displaying Content Above and Below the List of Posts

 

On the Posts Page, you can output any content you need above and below the blog posts using Visual Composer.

 Note: the alternative way of adding content would be using the widget areas.

 By default, the content you add to the Posts Page is displayed at the top.

 However, you can place it below the main content area with the help of a text element that contains %%CONTENT%%.

 Note: This does not apply to the default Posts Page defined in Settings -> Reading.

 Here's how to do it: 

  1. Create a new page, and assign the Blog archive template to it.

  2. Switch to Backend Editor

  3. Add a new 'Text Block' element and enter the line %%CONTENT%% (in capital letters).

  4. Save the text element. Now it represents the blog posts archive.

  5. Now anything you place below/above this element will appear below/above your main content correspondingly.