The Blog Pro module in the WPHubSite Theme gives you many options to create rich blog layouts. When you activate the Blog Pro module you’ll have more advanced options for blog/archive pages and single page layouts.
This help article will help you create the types of blog, archive, and single-page layouts you would like with the Blog Pro module. Ready to get into blog customization to make better-looking blog pages?
Access Blog Pro Customizations In The WordPress Customizer
The first step is to access the blog pro settings which is in the same place as the regular blog options in the customizer. You’ll notice that there are a lot more customization options in the customizer now, though.
Step 1: Click on Blog in the customizer.
Now you’re at a crossroads where you can choose to either customizer the blog page/archive pages or customize the single post template.
This help article covers both so take your pick. If you continue on the first one covered is blog/archive customization. You can also jump down to single post customizations.
Blog/Archive Customizations
The blog/archive customization options will let you customize how the main blog page works (the one you can assign in the WordPress Settings). This is usually the main blog page of your website that shows the most recent blog posts on your blog. It also includes the category and tag pages.
The archives section lets you customize how all the archive pages look for your blog. There are pages such as the author archive, date archive, etc. These often are configured the same as the blog page which is why there is one section for everything blog and archive.
Ready to get started customizing your blog/archive pages?
Option 1: Choose how you’d like each blog post on the page laid out. You will often see several blog posts stacked on top of each other in the layout you chose.
Note: Depending on what layout option you choose there will be more or fewer options that appear. The first layout option allows you to choose columns, masonry layout, and highlight first post.
Option 2: Choose whether you’d like each post to have a gap between them (similar to the popular card format) or run down one continuous page. Either way, there will still be space but adding a space includes more of a gap.
Option 3: Choose if you’d like the image to have a date box overlaying the image. The end of this section has a screenshot that shows what this looks like.
Option 4: Choose how you’d like to format the date box on the image. This option is only available if you’ve enabled the date box option.
Option 5: Choose what should come first, the featured image or the title & blog meta. This doesn’t work if you chose the 2nd or 3rd layout options. The image and title must be stacked.
Option 6: Choose the order of the metadata or whether to show it or hide it. Click the eye in order to hide it. Grab the three stacked lines and drag to reorder them.
Option 7: Choose if you’d like to use the default width of content you set for the theme or a custom width.
Option 8: Choose to display a short excerpt of each post’s content or the full content.
Option 9: If you chose to display a post excerpt this option lets you choose how many characters (including spaces).
Option 10: Change the text that shown to read the full blog post (if the full text isn’t included).
Option 11: Choose this option to show the read more text as a button. This option uses the theme settings (from the customizer) for buttons.
Option 12: Choose a custom size for the featured image and then click the Apply Size button.
Option 13: Choose whether you’d like blog posts to show in pages (number) or be one long page (infinite scroll).
Option 14: If you selected number for the pagination option, choose how you’d like it styled. These are what each style looks like:
Option 15: Set post pagination spacing. This spacing creates a buffer (padding) around the pagination block seen in green below.
That’s the main section of the blog/archive customizer but there’s more. The following sections are divided into each of the main headings: colors and background, typography, and spacing.
This is what the main screen looks like and if you click the pencil (edit) icon for each one it will pop out into several other options.
Now for each section.
Colors and Background
Each number on the below image corresponds to how that option affects the following image. All except number 7 which is just a step to the next tab on the popup.
Option 1: This is the post title color on the blog and archive pages.
Option 2: Text in the meta section will be this color.
Option 3: Any links in the meta section will be this color.
Option 4: The main title section of archive pages will be this color. This doesn’t affect the blog page.
Option 5: The title color for archive pages.
Option 6: If you include an archive description, it will be below the archive title and this is the color setting for it.
Step 7: Click the Hover tab for the hover options (not pictured).
Option 8: This option is the only one on the hover tab and lets you change the hover color for links in the meta section.
Typography
For each setting in the typography section, you can change the following typography options.
- Family (such as Arial or Times New Roman)
- Size (in pixels or ems)
- Weight (bold, light, thin, etc.)
- Text Transformation (capitalize, uppercase, etc.)
- Line Height
Spacing
Spacing lets you control how much padding is outside each post block and how much padding is inside each post block.
Option 1: Control the padding outside each post block. The chain link lets you link together all four boxes or unlink them.
Option 2: Choose how much padding is outside each post block.
Option 3: Change the unit of measure for spacing.
Option 4: Switch between desktop, tablet, and mobile. This is also attached to the toggle buttons at the bottom of the customizer.
That’s it for the blog/archive customizer options in the Blog Pro modules of the WPHubSite Theme. The next section will help you customize the template for each post aka single page customizations.
Single Post Customizations
An individual blog post is what you’re customizing with the single page customizations section. You have several options for customizing single posts without the Blog Pro modules activated but even more with it. This help article covers all the options you have for customizing your blog posts.
There are fewer customization options for single pages but only because single pages are simpler than blog/archive pages. You should still have plenty of options to make the page work the way you’d like.
Ready to get started customizing your single page template?
Option 1: Default uses the content width set in the global settings. Custom lets you choose a custom width for blog posts only.
Option 2: Choose what to display (by toggling the eye icons on or off) and in what order (use the three stacked lines to drag each item up or down).
Option 3: Choose which options to show or hide. This is what each option does.
- Author Info: When this option is enabled an author info box will show below the post content with the author name and bio which comes from the author profile info.
- Disable Single Post Navigation: When this is selected the previous post/next post links will not show below the blog post.
- Auto Load Previous Posts: With this option selected, the blog post comments will be hidden behind a button and the next blog post will show up. It’s like a perpetual blog post.
- Remove Featured Image Padding: The padding will be removed around the featured image when you’re using the boxed or content boxed page layouts for single posts.
Option 4: Set a custom size for the featured image. You can set one dimension auto with the other specified.
There are additional options that you can configure in the single post section of the customizer. These aren’t from the Blog Pro module but they’re important all the same. Those are
- Post Title Color: Choose a unique color for the post title.
- Post Title Typography: Overwrite the default typography settings for post titles in this section.
- Spacing: Choose the spacing for inside and outside the blog post container. You can choose between pixels, percentages, or ems while also setting each one unique for desktop, tablet, and mobile.
That’s it for all the advanced customizations you can make on blog/archives and single posts with the WPHubSite Theme Pro Modules. There are many other pro modules available for the WPHubSite Theme that you can customize.