The following guide explores the setup and configuration of the PressBook Premium WordPress theme with dark and light color schemes.
Also, we explore different features that the theme offers.
Table of Content – PressBook Premium Docs
- 1. Theme Options
- 2. Header Setup
- 2.1. Top Navbar Social Links
- 2.2. Top Navbar Menu
- 2.3. Top Navbar Design and Gradient Colors
- 2.4. Top Info Section – Contact Details and Info Buttons
- 2.5. Branding Area – Site Title, Tagline and Logo
- 2.6. Top Advertisement Banner
- 2.7. Primary Navigation Menu
- 3. Color Options
- 4. Sidebar Widgets Area
- 5. Main Content Area
- 6. Footer Setup
- 7. Infinite Scroll for Posts with Jetpack Plugin
- 8. Translation of the theme
- 9. Frequently Asked Questions
1. Theme Options
In your WordPress admin area, you can find all the theme options of PressBook Premium in “Appearance” > “Customize”. Using these options, you can configure options like fonts, typography, colors scheme, etc. for your site.
For example, you can change the content area background color from “Content Layout” > “Content Background Color”.
2. Header Setup
The header section of the theme includes the top navbar with social links and top menu, top info section with contact details and button links, branding area with support for background color or background image, advertisement banner, primary navigation menu, header block areas, posts carousel, and posts grid.
2.1. Top Navbar Social Links
The theme shows the top bar only when the social links menu or the top menu is set to a display location.
To add social links in the top bar, follow these steps:
- First of all, go to “Appearance” > “Menus”, then create a new menu and assign menu items. Here, the menu items are the custom links.
- For each custom link, enter your social page URL or profile URL with the link text. Then, click on “Add to Menu” button to add this menu item.
- Next, set the “Display location” to the “Social Links Menu”.
- Finally, click on the “Save Menu” button.
You can add any number of menu items or custom links to the social links menu and it automatically displays the appropriate social icon for the social link.
2.2. Top Navbar Menu
In the same way as the social links menu, you can also create a new menu and assign it to the “Top Menu” display location. In this menu, you can add any menu items like posts, pages, categories, tags, and custom links.
2.3. Top Navbar Design and Gradient Colors
In the premium theme, you can choose from 3 different designs. Also, you can change the gradient background colors of the top navbar.
2.4. Top Info Section – Contact Details and Info Buttons
The top info section includes the button links and contact details. Here, the contact detail includes the phone, email, and address.
You can customize the top info section from “Appearance” > “Customize” > “Top Info Section”. This section will show up when you enable either the contact info or the top info buttons.
To enable the contact info, check the “Enable Top Contact Info” option. Similarly, to enable the info buttons, check the “Enable Top Info Buttons”.
Next, you can fill in the details for the contact info as well as for the top info buttons. Here, you can also change the order of contact info fields. For example, you can show the email before the phone number.
Furthermore, you can configure the background color of the top info section and the text color of the contact info. Similarly, you can also change the background color, border color, and text color for the info buttons.
2.5. Branding Area – Site Title, Tagline and Logo
The options to configure the site branding area are available in “Appearance” > “Customize” > “Site Identity”. For example, you can only show the logo but hide the site title and tagline. Also, you can set the size of the logo, site title, and tagline for different screen-size devices.
2.6. Top Advertisement Banner
At the top right side of the site branding area, you can show the top advertisement banner. This option is available in “Appearance” > “Customize” > “Top Banner”. The recommended size for the top banner is 728×90.
By default, the top banner is hidden in small-screen devices. You can find the option to hide or show the top banner in small-screen devices in the “Top Banner” section of the theme options.
2.7. Primary Navigation Menu
This is a multi-level dropdown primary navigation menu that comes with 2 different designs to choose from in the premium theme.
To configure the primary menu, create a new menu in “Appearance” > “Menus”, assign the menu items to this menu, and finally set its display location to the “Primary” just like we have done for the top menu and social links menu.
Also, you can find the designs and color options for the primary menu in “Appearance” > “Primary Navbar”.
2.8. Posts Carousel in Header
The header section just below the primary navbar consists of the header block, posts carousel, and posts grid.
Posts carousel shows the posts based on the source such as categories, tags, all posts in a configured order such as randomly, modified date, or the latest posts.
PressBook Premium theme allows displaying the posts carousel in the header conditionally. You can find all the related options of the header posts carousels in “Appearance” > “Customize” > “Posts Carousel” > “Header Posts Carousel”.
Here, you can also change the background color and text color of the posts carousel.
Also, you can change the hover background color and text color of the carousel arrow from “Appearance” > “Customize” > “Colors” > “Carousel Arrow Hover Background Color” and “Carousel Arrow Hover Text Color” respectively.
2.9. Posts Grid in Header
The posts grid allows displaying the posts in a grid of 1, 2, 3, 4, and 5. The layout adjusts automatically based on the number of posts retrieved from the selected source such as categories or tags.
You can find the options to enable and configure the header posts grid in “Appearance” > “Customize” > “Posts Grid” > “Header Posts Grid”.
Now, you may want to show the posts grid after the posts carousel in the header. To achieve this, you will simply need to uncheck the “Show Header Posts Grid Before Carousel” option.
2.10. Header Block Areas
You can use the block area to place any custom content in the header. The premium theme comes with 4 conditional header block areas. To create a header block with custom content, follow these steps:
- First of all, go to “Appearance” > “Customize” > “Header Block”. Here, you will find a link to open the reusable blocks manager. We need to create and publish a reusable block with custom content, then select it in the “Header Block 1”.
2. In the reusable blocks manager screen, click on the “Add New” button to add a new reusable block. Next, we add custom content to this reusable block.
3. You can give this reusable block any title and insert the custom content using the “Blocks” and the “Patterns”. After specifying the content, you can publish this block by clicking on the “Publish” button at the top right.
4. Finally, go back to “Appearance” > “Customize” > “Header Block”. You will need to refresh this page in case you don’t see your newly published reusable block in the select input. Here, you can select the block you created in the above step.
Then, the content of this reusable block will appear on the header block area 1. Also, you can show this header block conditionally or in full width. There are many options associated with the individual header block.
In the same way, you can utilize the header blocks 2, 3, and 4.
3. Color Options
You can configure the accent colors for buttons, links, etc. from “Appearance” > “Customize” > “Colors”.
3.1. Header Background and Text Color
This relates to the site branding background color and text color options for site title and tagline. You can find the header background color option in “Appearance” > “Customize” > “Colors”. The following color options relate to the header branding section:
- Header Background Color
- Site Title Color
- Tagline Color
In case you want a background image instead of a background color for the header branding section, then you can add it from “Appearance” > “Customize” > “Header Image”. Also, there are other options associated with the site branding header image like background-position, background size, etc.
3.2. Body Background Color and Image
You can configure the body background color from “Appearance” > “Customize” > “Colors” > “Background Color”. In case you want an image for the body background, then you can add it from “Appearance” > “Customize” > “Background Image”.
3.3. Content Background and Text Color
The default content background color for the PressBook Premium theme is white. You can change it from “Appearance” > “Customize” > “Content Layout” > “Content Background Color”. Also, you may add transparency to the background color using the alpha value.
There are many options available for content layout. For example, you may want to check “Remove Horizontal Padding” to remove the padding from the left and right sides of the content area. You may want to do this when the body background color is the same as the content background color.
The background and text colors of the content area also reflect in the block editor page.
For the post meta text color, you can change it from “Appearance” > “Customize” > “Blog Options” > “Post and Comment Meta Text Color”.
3.4. Sidebar Background and Text Color
In a similar manner as the content area, you can also customize the background color and text color of the side widgets of the left and the right sidebars. These options are available in “Appearance” > “Customize” > “Sidebar Layout”.
3.5. Footer Background and Text Color
There are many color options available for the footer section in “Appearance” > “Customize” > “Footer Options”. This includes the footer widgets’ background color, text color, link color, border color, etc.
Also, you can customize the back-to-top button color in this section.
4. Sidebar Widgets Area
PressBook Premium comes with the left sidebar and the right sidebar. Inside the sidebar, you can place widgets. To see all the sidebars areas, go to “Appearance” > “Widgets”.
Here, you will see the following sidebar widgets areas:
- Left Sidebar
- Right Sidebar
- Footer Widgets Area 1, 2, 3, and 4
This is a block-based widgets screen. To insert the content in the left sidebar with widget title and widget content like a paragraph, simply expand the “Left Sidebar” area and insert a “Group” block into it.
Then, inside of the “Group” block, you can insert a heading level 2 or 3. Just after the heading level, but within the “Group” block, you can insert any block like a paragraph block.
The reason we use the “Group” block is to make sure the content with a heading that is the widget title and widget content looks more clear design-wise on the front-end.
Also, you can use the “List View” of the blocks in order to visualize the positions of different blocks more clearly.
Make sure that the heading and the paragraph blocks are inside of the “Group” block. Similarly, you can place other blocks like image, search, etc. along with the widget title.
There are other blocks like “Navigation Menu” that don’t require you to separately place a heading block inside the group block. You can simply place the “Navigation Menu” block directly inside of the widgets area without using the “Group” block.
In case you are looking for the classic widgets screen, then you can read below.
4.1. Single Sidebar
The layout of the PressBook Premium theme adjusts automatically depending upon if there is a widget in the sidebar.
If you just want a single sidebar, then you will only have to place the widgets inside of the “Right Sidebar” widget area or the “Left Sidebar” widget area, but not both of them. This means you need to make sure that there are blocks only in one of the sidebar areas.
4.2. Double Sidebars
Similarly, the double sidebar appears only if there is at least one widget block in both the left and the right sidebars.
4.3. No Sidebars
Also, if you just want the content area without a sidebar, then you must not place any widget in the left and the right sidebar widgets areas.
4.4. Sidebar Options
You can find all the sidebar related options from “Appearance” > “Customize” > “Sidebar Layout”. For example, you can disable the sticky-floating behavior of the sidebars by unchecking the “Sticky-Floating Sidebar” option.
4.5. Block-Based Widgets Screen
WordPress 5.8 or later comes with a block-based widgets screen. The advantage is you can place many different types of blocks into the widgets area, just like you use block editor to insert the content of posts or pages.
4.6. Classic Widgets Screen
To change the widgets screen from block-based to classic, you will need to install and activate the Classic Widgets plugin. Using this plugin, you will be able to utilize the more simple widgets screen. The disadvantage of a classic widgets screen is you can’t place varieties of blocks into the widgets area.
5. Main Content Area
5.1. Fonts and Typography Settings
There are many fonts available to choose from for the headings and body text. You can find all the fonts option in “Appearance” > “Customize” > “Fonts & Typography”. Here, the font family you choose also reflects on the editor page along with the front-end.
Besides, font family, you can also change the global font size, line height, and font weight.
Also, the premium theme comes with a feature to load any custom Google font. All the instructions are provided in the option description that you can find in “Fonts & Typography” > “Custom Fonts URL”. Using this option, you can load any custom font-weight for any fonts that you choose.
When you choose any font, you may also want to modify the button padding to make it look more perfect with respect to the font and line-height. The padding options are available for general buttons and read more buttons that you can find in “Fonts & Typography” > “General Button: Padding” and “Read More Button: Padding”.
5.2. Page Templates
When you create a page or edit a page, you may also want to change its template. There are many page templates available for pages that you can configure for the individual pages.
You can find the “Template” select options in the sidebar area of the page editor screen. The following templates are available for pages:
- Default template
- Full width template
- Large width template
- Medium width template
- Small width template
- Page with sidebar
5.3. Page Level Settings
Besides the page templates, you can also configure the page settings. These settings are also available on the sidebar area of the page editor screen under the section with the label “PressBook Page Settings”.
Using these settings, you can hide the page title, remove top and bottom margins, remove padding, force transparency for the page, etc. Also, these settings are for individual pages.
5.4. Block Patterns
In the editor pages, there are block patterns to choose from. You can find these block patterns in the block inserter that you can toggle using the “+” icon on the page editor screen in order to insert a block.
Also, there are many block patterns available in the “Patterns” tab of the block inserter.
5.5. Reusable Block Manager
When you place multiple blocks and patterns in the editor, you can make them reusable elsewhere by clicking on the 3 dots and then the “Add to Reusable Blocks” option.
You can also directly manage all the reusable blocks in the reusable blocks manager screen. To access this screen, go to the welcome page of the theme under “Appearance” > “PressBook Premium”. Then, scroll down and click on the button with the label “Reusable Blocks Manager”.
In the theme, we offer to place any reusable blocks in the header or footer section that you can select in “Appearance” > “Customize” > “Header Block” and “Footer Block”.
Also, you can read above in the “Header Block” section of this documentation on how to configure it.
5.6. Single Post Navigation Source
The single post page comes with the posts navigation at the bottom of the post content. This shows the previous and next posts with respect to the current post.
You can control the source of posts navigation to “Within Categories” or “Within Tags” from “Appearance” > “Customize” > “Blog Options” > “Single Post Navigation Source”.
By default, the single post navigation source is set to “All Posts”.
5.7. Related Posts Carousel
For the single post page, you can enable the related posts carousel section. Also, you can change the heading for this related posts section in “Appearance” > “Customize” > “Posts Carousel” > “Related Posts Carousel”.
Here, you can select the source for the related posts like single post categories or tags. Also, you can configure the number of related posts and sort the order by the post date or randomly.
5.8. Related Posts Grid
Similar to the related posts carousel, you can also show the related posts grid below the single post. You can find this option in “Appearance” > “Customize” > “Posts Grid” > “Related Posts Grid“.
Here, you can also change the heading of the related posts grid section and configure different options for the source of related posts.
In case you want to show the related posts grid before the related posts carousel in a single post, then you can check the “Show Related Posts Grid Before Carousel” option.
5.9. Custom Front Page
By default, WordPress shows the blog page on the front page of your website. Instead of a blog page, you can set a custom page for your home page.
To set up a custom front page, go to “Settings” > “Reading”, then set the option “Your homepage displays” to “A static page”. After, you can select any custom page in “Homepage” and set any page for “Posts page” to show the blog posts.
For example, you can create two new pages with the title “Blog” and “Front Page”. Then, set the “Posts page” to “Blog” and “Homepage” to “Front Page”.
5.10. Read More Button and Post Excerpt
5.10.1. Chaning Text for Read More and Adding a Read More Block
You can change the “Read More” button text from “Appearance” > “Customize” > “General Options” > “Read More Text”.
Also, you may want to change where the read more button appears for a post on the blog posts listing page. For this, you can make use of the “More” block in the post editor as shown in the following screenshot:
In this way, the more button will appear on the blog listing page depending upon where you place the “More” block in the post editor.
5.10.2. Custom Post Summary or Excerpt in Blog Posts
WordPress allows editing excerpts for the posts. An excerpt is a summary of a blog post that is shown on the blog posts listing page. By default, WordPress automatically generates the excerpt of a post.
You can also write a custom excerpt for a post. Go to any post in the editor and on the right side, you will find a text area field to write your own custom excerpt. This will replace the default excerpt generated by WordPress only for this post. Also, you can make use of any HTML tags like an anchor tag, etc.
Here’s an example of what you can write in there:
Your custom excerpt here. You may also want to add a link to your single post page. Here, you can replace the "#" with a link to the single post page (keep the double quotes). Also, you can use HTML <br> tag to make the link go in a new line. <br><a href="#">Check it Out</a>
In this way, you can change the excerpt on the blog posts listing page.
6. Footer Setup
6.1. Footer Options
You can configure the footer options in “Appearance” > “Customize” > “Footer Options”. Here, you can change the footer widgets’ color, background, border, and text color.
In the premium theme, there are 2 designs available for the footer widgets.
6.2. Footer Widgets
You can place widgets in the footer from “Appearance” > “Widgets”. There are 4 footer widgets areas available in the theme. Similar to the sidebar widgets area, you can add widgets in the footer widgets area.
6.3. Posts Carousel in Footer
Similar to the header posts carousel, you can also show the posts carousel in the footer. The options are available in “Appearance” > “Customize” > “Posts Carousel” > “Footer Posts Carousel”.
Here, you can also configure different options like the source of posts and number of posts per view in the carousel.
6.4. Footer Block Areas
To show the custom content above the footer widgets area, you may use footer block areas. Similar to the header block areas, you can set the content of the footer block area in “Appearance” > “Customize” > “Footer Block”.
PressBook Premium theme comes with 3 footer block areas that you can show conditionally.
7. Infinite Scroll for Posts with Jetpack Plugin
PressBook Premium comes with support for the infinite scrolling of blog posts with the Jetpack plugin. You can read the following guide on how to add the infinite scroll for the blog posts using the Jetpack plugin.
8. Translation of the Theme
PressBook Premium theme is translation-ready. This means you can translate it to any other language. In order to do the actual translation, you may use the “Loco Translate” plugin and read the following guide on how to translate a WordPress theme into another language.
9. Frequently Asked Questions
You may also want to read the frequently asked questions related to the PressBook theme.