Designing the lists of posts (blog, archives, search) in the Customizr theme

The are several types of context in which your WordPress website will display a list of posts :

  • Home page : if you've decided to display your blog posts on home
  • Blog page : if you've decided to display your blog posts on a specific page
  • Archive's pages : page displaying posts of a particular category, tag, author, date
  • Search results

In most of the cases, WordPress sites display their posts listed one after the other for ease of browsing for the reader. With the Customizr theme, there are always more ways of doing things and so it is with post lists designs.

The Customizr theme has many built-in options for changing the appearance of the post lists. So, let us explore the options that you have. Here we go!

Accessing the Post lists settings

From the WordPress customizer, go to Content > Post Lists to access the post list design.

There are five sections under this.

- Global Post List Settings -

The global settings for the post lists are under this section. There are three settings:

  • Maximum number of posts per page - Specify the number of posts that you want to display in your post lists. If you specify a very high number, and the total number of posts published is lesser, all the posts are displayed. If this number is lesser than the total number of posts published, then after listing out the posts, an Older Posts button is displayed for ease of navigation.
  • Select the length of posts in lists (home, search, archives, ...) - This setting is used to choose whether you want to display an excerpt only or the entire content of the post.
  • Set the excerpt length - Give the length of the excerpt, in number of words. The default is 50.

- Post List Design -

  • This section gives us the option to select a layout between the two - the grid layout or the alternate thumbnails layout. If you choose the Grid Layout, you get further options to customize it which are explained in detail here.

  • If you choose the Alternate Thumbnails Layout, then it can be customized further in the following sections.

- Thumbnails options -

  • Under this section, you can first choose whether you want post thumbnails to be displayed or not by checking against Display the post thumbnails. For the Grid Layout, post thumbnails are displayed by default. But, for the Alternate Thumbnails layout, you can disable this option so that the post lists do not have any thumbnails.
  • By default, If no featured image is set, use the last image attached to this post is checked. If you want posts without featured images not to have thumbnails, disable this setting.
  • Upload a default thumbnail is a useful feature where you can have a default image which will be used for those posts without thumbnails. Typically, the Site Icon can be used for this purpose.

Related WordPress Resources :

- Thumbnails options for the Alternate Thumbnails Layout -

  • For the Alternate Thumbnails Layout, there are more settings under this section.

Thumbnails shape

  • Firstly, choose the Thumbnails shape. You can choose one amongst the seven options listed below. The choices are self-explanatory. Look at the preview to decide what you like and what blends with your site.
    • Rounded, expand on hover
    • Rounded, no expansion
    • Squared, expand on hover
    • Squared, no expansion
    • Rectangular with no effect
    • Rectangular with blur effect on hover
    • Rectangular with unblur effect on hover
  • If you choose one of the three Rectangular options in the above settings, you have an additional setting Set the thumbnail's max height in pixels. The default value is 250, but you may change this to suit your needs.

Thumbnails position

  • The next option is the Thumbnails position. Choose from Top, Right, Bottom and Left.
  • When you choose Top or Bottom, the thumbnails occupy the entire width of the content area. For Top, the thumbnails appear above the content and for Bottom, the thumbnails appear below the content. Look at the demo site below.
  • When you choose Left or Right, the content is placed next to the thumbnail. Look at the demo site below.

Alternate thumbnail/content

  • The third setting is the Alternate thumbnail/content. You can check this to enable alternation. Do note that when alternation is enabled, it overrides the thumbnails position partially, i.e., the difference between thumbnails position Top and Bottom does not exist and similarly there is no difference between thumbnails position Left and Right.

- Archive titles -

  • This last section gives the choice of titles for your post lists. You can change the titles for the Category Pages, Tag Pages, Author Pages and Search Results Page in the four input boxes provided.

Take a look at this post list created in a demo installation. This is an example of an Alternate Thumbnails Layout, with Thumbnails position set as Right.

Do try out various combinations of the options and settings and arrive at that perfect setting that gives the best appearance for your site. Make your site inviting for your readers with the help of Customizr.

Doc created by: Menaka S.