Documentation Guide for the PressBook Premium WordPress Theme
Posted in: Themes, WordPress

Documentation Guide for the PressBook Premium WordPress Theme

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.

If you have any questions related to the theme, then you may reach out to us using our contact form. Also, you can refer to frequently asked questions.

Table of Content – PressBook Premium Docs

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.

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:

  1. First of all, go to “Appearance” > “Menus”, then create a new menu and assign menu items. Here, the menu items are the custom links.
  2. 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.
  3. Next, set the “Display location” to the “Social Links Menu”.
  4. Finally, click on the “Save Menu” button.
Social Links Menu - PressBook Premium
Social Links Menu – PressBook Premium

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.

Top Navbar Gradient Colors and Design
Top Navbar Gradient Colors and Design

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.

Top Info Section - Button Links and Contact Info - Address, Phone, Email
Top Info Section – Button Links and Contact Info – Address, Phone, Email

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”.

The header section just below the primary navbar consists of the header block, posts carousel, and posts grid.

Header Block and Pattern - Posts Grid - Posts Carousel
Header Block and Pattern – Posts Grid – Posts Carousel

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:

  1. 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”.
Header Block - Reusable Blocks Manager
Header Block – Reusable Blocks Manager

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.

Add New Reusable Block
Add New 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.

Reusable Blocks Editor
Reusable Blocks Editor

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.

Select Reusable Block
Select Reusable 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.

Content Background and Text Color
Content Background and Text Color

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”.

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”.

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.

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
PressBook Premium - Widgets Areas
PressBook Premium – Widgets Areas

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.

Group Block - Heading and Paragraph
Group Block – Heading and Paragraph

Also, you can use the “List View” of the blocks in order to visualize the positions of different blocks more clearly.

Blocks - List View
Blocks – List View

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.

Navigation Menu Widget
Navigation Menu Widget

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.

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:

  1. Default template
  2. Full width template
  3. Large width template
  4. Medium width template
  5. Small width template
  6. 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”.

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.

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. Blog Posts Grid Layout

If you want to show the blog posts in a grid layout, then you can simply check the “Show Blog Posts in a Grid” option in “Appearance” > “Customize” < “Blog Options”.

Posts Grid Layout - PressBook Premium WordPress theme
Posts Grid Layout – PressBook Premium WordPress theme

When you enable the grid layout, there are more related options available for this layout that you may want to configure. This includes options such as the “Post Card Shadow Effect” and the “Post Card Summary” option.

Also, you can control the number of posts to show in the grid from “Settings” > “Reading” > “Blog pages show at most”. For example, you can change the default value of “10” to “12”.

5.10. 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.11. Read More Button and Post Excerpt

5.11.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:

Adding Read More Button for Blog Post
Adding Read More Button for Blog Post

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.

Showing Read More Button for Blog Post
Showing Read More Button for Blog Post
5.11.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>
Adding Custom Excerpt for Blog Post
Adding Custom Excerpt for Blog Post

In this way, you can change the excerpt on the blog posts listing page.

Showing Custom Excerpt for Blog Post
Showing Custom Excerpt for Blog Post

You can configure the footer options in “Appearance” > “Customize” > “Footer Options”. Here, you can change the footer widgets’ color, background, border, and text color.

Footer Options - PressBook Premium
Footer Options – PressBook Premium

In the premium theme, there are 2 designs available for the 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.

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 the number of posts per view in the carousel.

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. Example Configurations

There are many ways to configure the theme options. Also, you can replicate any of our PressBook themes with a combination of the options that the premium theme offers.

Here’s an example configuration. You can find these options in “Appearance” > “Customize”.

8.1. PressBook Blog

Colors > Background Color: #ffffff
Colors > Header Background Color: #ffffff
Colors > Site Title Color: #404040
Colors > Tagline Color: #979797
Colors > Link Color: #007a7c
Colors > Link Hover Color: #5d7994
Colors > Button Gradient Background 1: #5d7994
Colors > Button Gradient Background 2: #6f88a0
Fonts & Typography > Heading Font: Source Sans Pro
Fonts & Typography > Body Font: Raleway
Fonts & Typography > General Button: Padding Top: Default
Fonts & Typography > General Button: Padding Bottom: Default
Fonts & Typography > Read More Button: Padding Top: 9px
Fonts & Typography > Read More Button: Padding Bottom: 8px
Top Navbar > Top Navbar Gradient Background 1: #5d7994
Top Navbar > Top Navbar Gradient Background 2: #354a5f
Top Navbar > Top Navbar Design: Top Navbar Design – 3
Primary Navbar > Primary Navbar Background Color: #4b6a88
Sidebar Layout > Side Widget Title Border Color: #007a7c
Footer Options > Footer Background Color: #0e0e11
Footer Options > Footer Credit Link Color: #007a7c
Footer Options > Go To Top Hover Gradient Color 1: #445f7a
Footer Options > Go To Top Hover Gradient Color 2: #4b6a88
Footer Options > Footer Widget Design: Footer Widget Design – 2
Posts Grid > Header Posts Grid: Enable Header Posts Grid

8.2. PressBook News

Colors > Background Color: #ededed
Colors > Header Background Color: #ffffff
Colors > Site Title Color: #404040
Colors > Tagline Color: #979797
Colors > Link Color: #537cff
Colors > Link Hover Color: #ff4056
Colors > Button Gradient Background 1: #406dff
Colors > Button Gradient Background 2: #537cff
Fonts & Typography > Heading Font: Lora
Fonts & Typography > Body Font: IBM Plex Serif
Fonts & Typography > General Button: Padding Top: 6px
Fonts & Typography > General Button: Padding Bottom: 8px
Fonts & Typography > Read More Button: Padding Top: 8px
Fonts & Typography > Read More Button: Padding Bottom: 10px
Top Navbar > Top Navbar Gradient Background 1: #537cff
Top Navbar > Top Navbar Gradient Background 2: #406dff
Top Navbar > Top Navbar Design: Top Navbar Design – 2
Primary Navbar > Primary Navbar Background Color: #1c1c21
Primary Navbar > Primary Navbar Hover Background Color: #ff4056
Sidebar Layout > Side Widget Title Border Color: #537cff
Footer Options > Footer Background Color: #0e0e11
Footer Options > Footer Credit Link Color: #ff4056
Footer Options > Go To Top Hover Gradient Color 1: #406dff
Footer Options > Go To Top Hover Gradient Color 2: #537cff
Footer Options > Footer Widget Design: Footer Widget Design – 2

9. 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.

10. Frequently Asked Questions

You may also want to read the frequently asked questions related to the PressBook theme.