Passion Blogger Documentation

Install

How to install

To install Passion Blogger Theme pack please follow these steps:

  1. Go to Appearance -> Themes -> Add New

 

2. Press Upload Theme -> Choose file

 

3. That will open a new window where you need to find the Passion Blogger installation file that you have already downloaded. Usually, by default, the file is located under Downloads folder at your computer. Click once to mark the file and press Open button.

 

4. When the file is uploaded press Install Now button

 

5. Wait for a while and when you get message for successful theme install press Activate

 

Your theme is installed. Press Customize to start setting customize your installation.

General Settings

Where to find theme settings and how does they work

All the style settings for the Passion Blogger theme can be accesses via Customize tab. This tab can be reached from the WordPress admin bar, when you are logged in and work at the front end of the site:

 

If you are at the back end of the site, you will find Passion Blogger settings under:

1. Passion Blogger tab

2. Appearance tab

Customization panel looks like the image below. Press over the section you need to customize and with each click over template or option you will see the result in live at right. That dynamical preview saves time and makes finding the right options for your needs easy and fast.

 

 

Site title/tagline/logo

Site Logo – Upload the logo for your site with Select file button. After the file is uploaded, you will see its preview over the button and at the right part of the screen you will see how the logo looks like at the website header. If you don’t like the result use Change file button to change the file and replace with another file.

Site Title – Fill here the title for your site. This is the text that will display at the browser tab when your site is loaded. Also, that text will be seen with on hoover action at the logo of the site. Site title text is very important for the SEO optimization of your site. The text filled at that field generates code in page, read by the search engines.

Tagline – The text filled here is something like a subtitle for your site and also generates code at the page structure, that is read by the search engines. For example, That is why for the SEO purposes site title and tagline fields are very important and it is highly recommended do not to let them empty and carefully to consider what to write in them.  Try to write something short and clear, for example:

Site Title: Passion Blogger Theme
Tagline: Theme for Bloggers

Content Max Width – The theme is made to use entire screen width. If you wish to change this you can fill in here maximal width of the content area.

For example, if you fill 1280px for content maximum width the content area for your site will look like this:

Or if you fill 960px, the content area will become with smaller width:

 

Header Max Width/Footer Max Width – In case you change the default theme content area width you can also customize the header and footer max width.

Customize Width of Sidebar – In case you use design with sidebar, with this option you can customize the width of the sidebar. With the value scale option you can control the width of the content area width. The values are calculated in percentage.

For example, if you want 20 %  of the content area width to be used for sidebar, move the scale to 20. The result will be like this:

And with 27 % the Sidebar will look like this:

Site Icon – The site icon is used as a browser and app icon for your site. Icons must be square, and at least 512 pixels wide and tall. They are a just visual component.

 

 

Header

Header Style

By clicking on each tab in that section you can choose how your logo and site menu will be displayed in the header of your site. With each click, you will see a live preview of header display at the right-hand site of the screen.

 

Search Icon – Use to turn off or on the search icon in the header

 

Menu State:

  • Fixed – choose fixed menu to make your menu stick at the top of the screen when you scroll down the page

  • Static – your menu will not show while scrolling down the page


Remove space between header and content – This option will remove padding-top of post/page content. That way menu and page content become one under the other.

Colors

Press over Select Color button and use the standard WordPress palette. You can also put code color as usual.

That way you can change the color for header background color, header text color, menu item colors, sub menu background color and sub menu item colors.

For menu item colors and sub menu item colors you can set a different color for a menu item, on hover and when active. Click on the dialog under each state to set a custom color.

 

 

Featured Posts

Featured posts area is a block with posts that can be displayed at the top of the blog page over the standard post list.  If your blog page is the front page for the site, then featured posts will be displayed on your homepage. In case your homepage is static, featured posts will be displayed only on your blog page.

There are two display templates for featured posts:

  • Classic Grid – as shown in the image above
  • Modern Grid

  • Slider

  • Carousel

 

Tag name – To import posts into Featured Posts grid set tag name you prefer to use. Then use that tag into the post tags.

For example set here tag featured. And under edit mode of the post fill the same tag:

           

 

Number of Featured Posts – Enter your own count of features posts to be displayed. By default is set to display 4 posts. For Classic Grid bigger number will make you imaged with lower width. For Modern Grid small images save their size no matter of the number of posts. The only thing changes with Modern Grid is the size of the first big image.

Number of Featured Posts on 1 Row – Classic Grid Only! Default setup is to display 4 posts on 1 row. If you wish to change this use this field.

These two settings may help you try different featured post display combinations with classic grid – one or two rows, a different number of posts for a row.

Customize Size of Title Font – Use this field to set your own title font size for the posts displayed in the grid.

Hide Category in Featured Posts – Use to hide or show the category of the posts included at the Featured Grid. By default, the option is not active.

Order Posts By – Use to define how your posts will be ordered at the Featured Post Grid:

  • By date – this is the automatic default order;
  • Custom order – use to order the post at the Featured Post Grid as you prefer. If choose that order, under edit mode of each post you want to display at the grid, fill number that will define the sequence of the images. Smaller number display the image first.

Please note if you choose custom order but you do not fill anything at the Featured Post Order Index field, all the images from the grid will disappear.

Featured Content Spacing – Use the fields below to control the offset of Featured content from the other elements on the home page. This feature is available with Classic Grid, Modern Grid, Slider and DO NOT work with Carousel for technical reasons.

Width of Featured Area – Customize the default width of the Featured Posts Area. Use number value in %.

Height of Featured Area – Customize the default height of the Featured Posts Area. Use number value in %.

Top Area

Use this section to activate Top Header Area. From here you can set background color, text color, menu item colors for different states.

At the Top Header Area you can display some kind of information using Passion Blogger widgets. For example you can add social icons, custom menu or whatever text or visual content you like.

Blog

Blog

Meta Fields

Meta Fields Position – Use to locate meta fields above or below the post image.

At this section you can enable these meta fields you need: category, post update, post author, post excerpt, time to read, views counter.

You also have the ability to set words per minute on which base time to read will be calculated.

From this section you can set the outlook of your blog page. There are different styles – with sidebar, as a grid, as a list, etc. Just click on the template and see the preview at right. When you are done with your choice press Save&Publish.

If you choose Fancy Grid style go to Customizing -> Blog -> Fancy Grid and find the additional settings for this display style.

Choose the template style for your archives listing.

Choose a style for taxonomy (categories, tags, etc.) under Primary Template for Archive Listings.

For search results set the style under Search Results Listing.

Fancy Grid

All the settings under this tab are related to Fancy Grid Blog Style only. You can choose a style of the grid, on hover display, columns for the grid. Also, you can combine the grid with sidebar or remove gaps between blocks.

Post

Post

Default Post Layout

Use that section to choose default layout for your posts. Later you can set custom post layout display for the posts that do not fit into that default layout.

Custom post layout can be set, when you open the post at Edit Mode. Find the Display Options section and set the layout you need for that post only:

How to set Custom Post Layout?

Post Fields

Choose the fields, that will be displayed at the posts. From here you can activate category, post update, post author, show previous/next page, time to read, views counter, related postssubscribe form.

You have the ability to set words per minute on which base time to read will be calculated.

Page

Page

Choose default template for your pages. Base your chose on the posts that will be predominant for your pages. Later you can set custom layout display for the pages that do not fit into that default layout.

How to set custom page layout?

 

Typography

Typography

Disable/Replace Default Fonts

Passion Blogger Theme uses Google Fonts by default. If you make any font customization and set different fonts to be used, you can turn off the default theme fonts from option I Will Not Use Default Theme Fonts. That way you will prevent default theme fonts to be loaded and this will shorten up the load period.

If you turn off default theme fonts to be used and do not set any custom font, Passion Blogger will use the system fonts of your operation system. We do NOT recommend that setting configuration as it may cause visual issues depends on the device, where the site is accessed. For example on Mac it may look great, but on Windows to have visual glitches.

Replace Default Content Font – Use this option to replace fast and easy the default theme font. When you choose a font from the drop-down menu, this font will be applied as a main font for the site and all the other default font style settings will be still active. That way you will save time to set from the beginning font size, text color and so on.

This option work best with I Will Not Use Default Theme Fonts option activated.

Replace Default Headings & Meta Font – Use this option to replace fast and easy the default theme headings and meta font. The option works similarly as the option above.

All the other tabs under Typography section will help you to customize the style of different parts of the site. They all are identical, just click on the tab you need to customize with standard WordPress style settings. If you are a novice with WordPress, find some specifics of the settings:

 

 

 

Colors

Colors

From this section you can set Main Colors using standard WordPress palette. And also you can customize the default colors for post meta fields.

Overlay color of parallax images – Use to set a color for Post/Page styles with parallax image. The default style color over parallax images is translucent gray. For posts, this option will work with Layout #8, #9 и #10. If you see solid color and no image with these post templates, please move the crosshead of the transparency:

Modules

Modules

Convert Post Date to Time Ago

Use Human Friendly Dates option will display post date as time period. For example 5 weeks, 1 month, 2 years.

If that option is disabled the date of post update will display as standard data – for example January 13, 2017

Post Views

Use the option to activate Post Views Counter:

If you have cache plugin on your WordPress installation, you need to turn on the option Do you have cache plugin on site? This option will make Post Views Counter to work despite of the cache. But number increase will be shown after the cache update – the period is individual for each cache plugin set. For example 1 hour or 1 day.

Lightbox

Turn on the option to activate lightbox preview of image galleries on your blog.

Author Box

At this section you can activate author details under the post. Also you can activate buttons to author social profiles, to display buttons for author site and other articles from this author:

Author details can be filled under Users tab at the WordPress Dashboard.

Subscribe Widget

Activate Subscribe widget as usual under Appearance -> Widgets. And here at Modules -> Subscribe Widget you can customize the default texts and colors of the Passion Blogger Subscribe form.

Subscribe Below Content

Here you can activate subscribe Form just below the end of the post content.

To activate Subscribe Below Content go to Post -> Post Fields -> Display Subscribe Form and enable the option. Then under Modules -> subscribe Below Content you can add icon over the form and customize the default texts and colors.

 

Reviews

Activate Reviews  Module from here:

That will display Reviews block at the Edit Mode of each post. From there you can enable the reviews for that post and to customize the outlook – choose between stars, points, and percentage and set features that will be assessed.

Here at Customization -> Modules -> Reviews  you can customize the colors for your review block when it is set and displayed.

How to set your review block?

Recipes

Activate recipes from here will display Recipes module at the Edit Mode of each post. That tool will help you include your recipe anywhere in content with adding shortcode. Recipes module allows you to fill recipe tags. And that is very important for the SEO optimization of the content.

How to set your recipe module find here.

Ads

When activating this option you will be able to use the build in Passion Blogger ads widget. If you don’t plan to use ads on your site, do not activate this widget. That will make your site work faster.

Emotions

Activating Reactions Module will display emoticons under the page content:

Display Reactions Counter in Post Meta Field – activate this option to display reaction icons into the post excerpts:

You can customize reaction title and also translate in any language reaction text.

When your Reaction Module is turned on, under Widgets will appear Passion Blogger Viral Posts. This widget will allow you to display posts listed by selected from you value form: Like, Love, Cute, Lol, etc.

 

Production Mode

The options under Production Mode are speed optimization option. But please do not just turn on all the options. It is recommended to read what each option applies so that you can activate just these of them that really works for your installation and theme specifics.

  • Activate Production Mode – will collect all visual settings into one CSS and JavaScript file. That file will be loaded once for each access to the site. When activating this option at the WordPress top bar will appear Clear Theme Cache tab. After each change on your site style settings, you need to use Clear Theme Cache. Otherwise, the change will not be applied at these cached CSS and JavaScript files. Our recommendation is to turn off the option after you have finished the development of the site.
  • Remove Query Strings From Static Resources – by default, all the styles and scripts in WordPress have version included at the plugin/theme/platform. This way they can’t be cached by the browsers. When activating this option the data for the version of the theme, all the plugins you have installed and the version of the WordPress you use will be removed from your site. After that, all the files will be treated as static and that allows browser cache. This option will help you to make fully query string optimization, not only for the Passion Blogger theme but for all the plugins you use.
  • Async JavaScript – when activating this option all scripts will be loaded synchronic – at the same time with the page load (the default is one by one).
  • Optimize Google Fonts Load – this option will move load of Google Fonts to appear at the very end of the page and eliminate render blocking notice in above-the-fold content.
  • SEO Head Cleanup – this option will clean up from your site WordPress Generator Version, WLW Manifest Link, RSD Link (EditURI Link), Shortlink, Prev/Next Links, Hardcoded Styles for Recent Comments, Emoji Styles and Scripts, DNS prefetch.
  • Deactivate Feed – This option will deactivate WordPress feed and redirect to the homepage.
  • Security Cleanup – This option will remove Shortlink from HTTP Headers, X-Pingback from HTTP Headers, X-Powered-By from HTTP Headers

Footer

Customizing Footer

At this tab, you can activate primary and secondary footer, customize the colors for each of them. And also you can add your own copyright text, that will display at the secondary footer.

When you display Primary Footer, add widgets under Appearance -> Widgets to fill it with content. Each column of the footer corresponds to current footer widget number. Widget Footer #1 is for the first column, Footer #2 is for the second column and so on. Passion Bogger footer allows up to 4 columns.

Here is an example with customized colors and 4 columns used:

Activating Secondary footer will display smaller footer under the Primary one. In the secondary footer, there can be displayed:

  1. Footer Menu – from Appearance -> Menus -> Footer Menu Location
  2. Copyright text  – from Customize -> Footer -> Copyright text

 

 

Custom Code

Customizing Code

In case you need to make CSS of JavaScript corrections, use the editor of Passion Blogger theme. This way the code added will be placed at the exact place at the code and will prevent troubles and optimization issues.

Building Content

Build in Shortcodes

Passion Blogger Theme works just great with Visual Composer. But in case you don’t want to use content builder for the purpose of the speed optimization, we have developed shortcodes that will help you to import different elements and to arrange your content in columns without no coding.

Passion Blogger shortcodes can be accessed under Edit Mode of each post/page from the WordPress post menu bar:

 

Single Post Display Options

At edit mode of each post, you can find Display Options block:

From the options here you can set custom layout for the current post only. You have the possibility to change the position of the title to featured image, to include or exclude sidebar area, to make the post on a full width and etc. Layouts #8, #9 and #10 are header image parallax style.

If choose Default Layout you can set completely different layout using a content builder or code. That option is to give you maximum freedom in post layout display.

It is also possible to deactivate the author boxrelated articles and featured image for the current post only.

Add subtitle in case there is some more information you want to present, but the Title is not enough. For the SEO purposes, subtitle can be very important element:

Feature Post Order Index option will help you order posts at Feature Content Area.

More about Featured Posts here.

Single Page Display Options

Custom Page display options are similar to those of the post but are a little bit wider because of the specific purposes that pages have. The featured image is still available for the pages, but is not persisting in all of the ready made layouts:

The custom layout can be set, when you open the page at Edit Mode. Find the Display Options section and set the layout you need for that page only:

Slider Shortcode – Use the field to insert slider shortcode from slider plugin. The slider will display at the top of the page between the menu and the header/title area of the page.

If choose Default Layout you can set completely different page layout using a content builder or code. That option is to give you maximum freedom in page layout display.

Title Settings available for pages are:

  • Sub Title –  use to add subtitle in case there is some more information you want to present, but the Title is not enough. For the SEO purposes, subtitle can be very important element
  • Do not Show Title – use to hide the title of the page. This option works for the default title of the page and for the custom title too.
  • Custom Title – use to change the title of the page. The text filled here will display instead of the name of your page that by default is used as a title for each page.
  • Do Not Wrap Custom Title in Heading Tag – tick off if you have filled custom title.

For the Pages, there can be added Call-to-Action Button. Use the fields under that section to activate Call-to-Action Button, to set button text and URL:

Page Sidebar option at the end of Page Display Options allows setting sidebar different from the default one, valid for all pages. This option can be used only with WordPress plugin for Custom Sidebar. For example this one.

Transparent Header – use the option to add a transparent background to your navigation and it will overlay the header of the post. This type of design is suitable for large intro header image post styles. From the options below into this section, you can customize the Menu item color, On hover/Active menu item color and also upload a logo that is suitable for the menu background settings you have done.

Review – Choose review type – points, stars, percentage. After you click on the type you prefer extra settings will appear.

How to set Review?

How to Add a Review

Review option can be activated under Customize -> Modules -> Reviews

The Review option is available for pages and posts. To set the review module of page/post, open it in Edit Mode and find the Review block at the very bottom of the page. When you choose the type of the Review two more Review setting blocks will display for you – Review Item and Review Description:

The first thing you have to do is to set the features that will be assessed at the page/post content. Use Feature Name field for that and add another field with Add another button:

To import the review at the post tick off Include Review in Post option. Then choose the location for your review table.

If you choose to display the review with shortcode, under the option will display new field with shortcode in it. Copy that code and paste it into page/post content, where you want the review to be displayed:

Review Heading, Review Description Title and Review Description are very important options. The text filled in these fields will be generated as tags into the page code. Which is really useful for the SEO optimization you know.

 

Recipe

Recipe Module is very useful feature for culinary blogs from all types. The settings for it can be found under Edit Mode of each post. The information filled into fields under Title, Description, Image, Nutrition Facts and Cooking & Preparation will be included as Open Graph Meta Tags into page code. And this is very important for the SEO Optimization and Social Media SEO. This is why the recipe prepared with Passion Blogger Recipe will be much more “readable” for all search engines and also for social medias like Pinterest and Yummy.

The other great feature of the Recipe Module is that you can place the recipe anywhere at the post content just adding the shortcode. The shortcode for each recipe is always available at the top of the Recipe block settings:

Copy the shortcode and paste it whenever you want at your page content:

Each recipe has to be prepared into the Edit Mode of the current page, where it will be displayed. And the only way to display the recipe is to paste the shortcode into the page content.

 

 

Widgets

Widgets can be accessed from Appearance -> Widgets as usual, when working with WordPress.

Passion Blogger Theme supports a great variety of sidebar areas that will help you customize your installation depends on your needs and requirements for content structure. The sidebar areas, where you can locate widgets are:

To activate widget drag and drop it from the left part of the screen to the sidebar, where you would like to locate it. Footer #1, #2, #3, #4. Each footer number correspond to single footer column.

Passion Blogger Theme comes equipped with built-in with several widgets. All of them are very often used by the bloggers. Here they are:

About Me,  Instagram widget, Flickr WidgetSubscribe Form, Latest Posts, Latest Reviews, Popular Posts, Top Reviews. There are also two ad widgets: Ads Widget and Adsense Widget. To see them into the widget list activate them under Customize -> Modules -> Ads. The Ads Widget allows you to display ad banners and Adsense is especially for Google Adsense ads.

Passion Blogger Theme supports all other standard widgets as Archives, Categories, Calendar, RSS, Tag Cloud and etc.