You can install the theme one of two ways:
Login to your WordPress dashboard and click on Appearance > Themes. Then click on the Add New button at the top.
Click the Upload Theme button at the top and select the bpf.zip file, then click Install Now.
Once your theme is installed, you will see a success message along with the link to activate and preview the theme. Click Activate link to activate the theme.
If you have problem installing theme using WordPress upload (for example: file is too big), then you need to install the theme via FPT.
- Extract the BPF.zip file (you will get a BPF) folder
- Download and install a FTP client (we recommend FileZilla
- Open the FTP client and upload the extracted folder BPF to wp-content/themes on your host
After uploading the theme, go to the Appearence > Themes page to activate the theme.
Some plugins are included directly in the themes and some are hosted on wordpress.org which takes a while to download.
After installing, click the link Return to Required Plugins Installer. You’ll be redirected to a page where all installed plugins are listed. It’s required to activate them. So select them all and choose Activate from the drop-down and click Apply:
This step is optional. It will add the demo data to your website that you might not expect (the existing content still remains, though). So, it’s best to import demo only on a fresh install.
Make sure you installed, activated the plugins and enabled the required modules before importing demos.
To import a demo, go to Appearance > Import Demo Data, select a demo and click Import button. It takes a couple of minutes to process all the content.
#Import Slider ( Available )
Appearance > Import Sliders > Select Slider
After done, go to the frontend and enjoy the theme.
After activating the plugins, there will be a message Hi! Would you like to activate your version of Revolution Slider to receive live updates & get premium support? This is optional and not needed if the slider came bundled with a theme. after activating the plugins. Just ignore it as we already bought the extended license of the Revolution Slider plugin and included it in the theme. You can use the plugin without buying another license. So click on (never show this message again) link.
The same issue happens with Visual Composer plugin. When you see a message Hola! Would you like to receive automatic updates and unlock premium support? Please activate your copy of Visual Composer., just click on the X icon on the right to disable the message.
BPF already integrates with WooCommerce – the best e-commerce plugin for WordPress – to allow you run a store on your website. To make WooCommerce works properly, you need to set it up first. Click on the Run the Setup Wizard button:
And follow the instructions to configure your store.
BPF requires the Jetpack plugin to work properly. The plugin requires you to connect you website with your WordPress.com account (which is free). Go to the Dashboard and click the Connect Jetpack button:
If you don’t want to create an account on wordpress.com, you can enable the Jetpack development mode.
To understand what Jetpack is and how to use it in the theme, you might want to look at this guide.
All the theme options are the location in Appearance > Theme Options. This section will explain each option in details.
This tab has general options that affect the whole website.
- Site Identity: Edit Logo, Site Title, Site Description.
- Google Map API KEY: This key is required to display the map on the website. Get it here.
- Font for Heading: The font for all titles (headings) on the website. Google Fonts are available to choose from.
- Font Weight For Heading: Thickness of font.
- Font For Body Text: The font for body text.
- Font size for body: Thickness of font.
- Enable Sticky Header: Header always on top.
- Background image: Background for website.
#Top Bar Tab
This tab has option for the top bar. The topbar left and right are 2 sidebars: Topbar left and Topbar right. To add content to the topbar, please go to Appearance > Widgets. Recommended content for the topbar: text, custom menu, social links and login/register links.
- Show Topbar: Whether to show or hide the top bar
- Options for background color, text color, icon color and font size for the top-level items and the sub menu items are self-explained.
This has all options for the header. The options are grouped into 3 groups:
- Header Style
- Header Color
- Sub menu Color
- Header Style: Select one of the built-in predefined style for the header.
- Show Search | Cart or Socials: Choose which element to show on the menu. That can be nothing, search box and Cart icon or socials icon.
- Padding Top/Bottom Header: Height of header.
This section has all the options for the color for the background, text, icon, … for the menu and submenu. All the options are self-explained.
- Sidebar Layout: Left / Right / No Sidebar.
Page Header is the area below the main menu where showing the page title and some other information like breadcrumbs:
- Header Image: Background for page header.
- Page Title Uppercase: Check this option will make for text uppercase.
- Overlay Color: Background color behind text.
- Overlay Opacity: Opacity of background color behind text.
In this section, you can choose a predefined color scheme or choose custom colors for your website.
#Blog, WooCommerce, Portfolio
These sections are similar. They have several options for posts, products, projects, events, courses on archive page and single page. All the options are easy to understand. You can find option to change the sidebar layout, colors and hide several elements on the page if you want.
- This section shows options for the sidebar. Besides the color options
- Widget: Options for widget inside sidebar.
This section shows options for the footer.
- Footer Style: Select one of the built-in predefined style for the footer.
- Columns: The number of columns in the footer. Each column is a sidebar. To add content to the footer columns, please go to Appearance > Widgets.
- Copyright Text: The copyright text that displays in the bottom of the page.
- Show Go To Top Button: Check this to show the go to top button
- Several color options which are self-explained.
#Slide Out Sidebar
- Slide Out Style: Select one of the built-in predefined style for the Slide Out Style.
- Title Slide Out: Title on Slide Out.
This section shows link download lastest plugins of theme.
#Setup The Static Front Page
When you first activate BPF, your homepage will display posts in a traditional blog format. To set up a static front page like our demos, follow these steps:
- Go to Pages > Add New and create a page.
- Go to the Settings > Reading and set Front page displays to A static page.
- Select the page you created in step one as the Front page, and, if you plan to have a blog as well, choose another page as the Posts page to display your blog posts.
#Front Page Sections
This image shows an overview of the front page sections:
The top slider is available not only for the front page, but also for all pages. See this page to know how it appears.
Top slider is created by the Revolution Slider. To create a new slider, go to Slider Revolution > Add New:
The topbar left and right are 2 sidebars: Topbar left and Topbar right. To add content to the topbar, please go to Appearance > Widgets.
Recommended content for the topbar: text, custom menu, social links and login/register links.
To know more settings for the top bar, please go to Appearance > Theme Options > Top bar).
You can add a custom logo by going to Customize > Site Identity and uploading your own logo image.
The main navigation appears at the top right of every page of your website. On tablet and mobile devices, it will be hidden behind a toggle button. To set it up, simply create a new menu in Appearance > Menus and assign it to the Header location.
#Front Page Content
In BPF, we use Visual Composer to build the homepage and other pages on the website. To get started with Visual Composer, please follow this guide.
BPF comes with some shortcodes that we made specifically for the theme. Please refer to the Shortcodes section to understand each shortcode and how to configure them.
Please note that if you already imported the demo content, then you already have it set up. You can start playing with them and change them to fit your requirements.
#Footer Widget Areas
By default, BPF has 4 widget areas (sidebars) in the footer. Each widget area is a column. To add content to the footer, go to Appearance > Widgets, drag and drop widgets to Footer 1-4 sidebars:
Note that we already made some widgets for you to display contact info, social links, … Please refer to the Widgets section to know how to configure them.
#Footer Copyright Text
To change the footer copyright text, go to Appearance > Theme Options > tab Footer > ©2018 Theme. All Rights reserved. and enter your text.
BPF uses Jetpack to create and manage portfolio projects.
Please follow this instruction to understand how to do that.
#Using Jetpack with your themes
Jetpack, the plugin made by Automattic, is a great free plugin which adds a lot of features to your WordPress website, the features that you can only see on wordpress.com. These features that help you customize and manage your site in a professional way. Let’s take a look at the plugin features and why they’re useful for your WordPress websites.
#Getting started with Jetpack
Before going into the details, you need to install the plugin. Doing that by going to Plugins → Add New. You will see the plugin is listed at the 1st position. Click on the Install Now button to install it:
After installing, the button will change to Activate, click it again to activate the plugin. Jetpack will show you a notification asking to connect your website to WordPress.com. This step is required for some modules to work such as Stats, Publicize, etc. You need to create an account on WordPress.com and follow the instruction to connect your website.
You will see a new menu added on the left called Jetpack. Now go to Jetpack → Settings and you will see all modules:
Jetpack modules are organized into several groups: General, Engagement, Security, Appearance and Writing. Next to each module is a switching button that allows you to enable or disable the modules.
#Using Jetpack in development mode
Jetpack requires you to connect to WordPress.com to use its functionality. However, if you don’t want to connect to WordPress.com, you can still use it freely by enabling the development mode. Please following these steps:
- Use an FTP software like FileZilla to connect to your host
- Open the file wp-config.php in the installed WordPress folder
- Add the following line at the beginning of the file, below <?php
<code class=”language-php hljs “>define( <span class=”hljs-string”>’JETPACK_DEV_DEBUG'</span>, <span class=”hljs-keyword”>true</span>);
For more information, please read this guide.
#Useful Jetpack features for WordPress themes
Jetpack offers several modules useful for themes such as Custom Content Type and Custom CSS. Let’s go through each of them.
#Custom Content Type
Jetpack custom content types module adds custom post types (CPTs) to your site. These CPTs allow you to add content that doesn’t necessarily fit into a post but isn’t right for a static page either. Since this is part of Jetpack, you can even switch themes without losing these custom post types!
There are 2 CPTs that we use in our themes: portfolio and testimonial.
Once activated, a new menu Portfolios will appear on the left menu that allows you to add projects.
When you add a new or edit a project, remember to add the following info:
- Featured image
- Project Types
- Project Tags
- And sometimes additional Project Settings (depends on each theme, the settings might be different). Note that not all themes has Project Settings. These settings are added by themes (for example TheM theme).
Similar to portfolios, when you activated the Testimonials CPT, you will see a new menu item Testimonials on the left menu that allows you to add testimonials to your website.
When adding or editing a testimonial, please note that:
- The post title will be used for the testimonial author. Sometimes, you need to add span tag to display his position.
- The featured image needs to be the author avatar.
Custom CSS module is a very helpful module for the website owners. This module allows you to change the appearance of your website using CSS. After activating the module, go to Appearance → Edit CSS to add your custom CSS:
There you can enter any CSS to change your theme look and field.
If you’re just getting started with CSS, there will be a learning curve, but CSS is a very valuable and reusable skill. There are a TON of great resources on the web to get you started with learning more about HTML and CSS. The Daily Post blog featured a great series of CSS articles you might like as a starting point:
- An Intro to CSS, or How to Make Things Look Like You Like
- An Intro to CSS: Finding CSS Selectors
- Intro to CSS: Previewing Changes with the Matched Rule Pane
- Take a look at introductory videos for the Developer Tools built into Firefox, Chrome, Safari and Internet Explorer to help get you started.
#Other non-theme related useful features
Besides features that can be integrated into themes, there are a lot of features in Jetpack that might be useful for your websites.
#Boost Page Load Speed with WordPress.com CND using Photon module
Activating Photon means that the images in your posts and pages are going to be served through the WordPress.com CDN (Content Delivery Network). This, like other CDNs, takes a lot of the loading pressure off your host and help your website load faster. Boo-yah!
#Related Posts To Help Lower Bounce Rate
If your post has managed to keep your visitors’ attention long enough for them to make it to the very end of the post, then they obviously like what you have to say. Why not offer them the option to browse other posts on your blog so that they can find something else to read?
Jetpack Related Posts module not only will this help keep your visitors’ on your site longer, and thus lower bounce rate, but it will help them navigate your site with easy.
#Monitor for Email Notifications of Downtime
Wouldn’t you hate it if you found out your site had been down for over and hour and no one notified you? Just think of how much traffic you’d lose! With the monitoring feature activated in Jetpack you can, at the very least, get an email notification that your site is experiencing downtime.
The early warning could be nothing to worry about, but if it persists, then you’ll get another email that will tell you that it may be time to contact your host provider. It’s just one more way to stay one step ahead of the game.
#See how many visits your website gets with WordPress.com Stats
WordPress.com Stats lets you know how many visits your site gets, and what posts and pages are most popular.
There are many plugins and services that provide statistics, but data can be overwhelming. WordPress.com Stats makes the most popular metrics easy to understand through a clear and attractive interface. Plus, you can use WordPress.com stats in conjunction with other analytics plugins and services.
#Auto-publish your posts to social networks with Publicize
Publicize module makes it easy to share your site’s posts on several social media networks automatically when you publish a new post.
#Using Visual Composer
There are millions of WordPress themes available for you to choose for your websites. Most of the theme come with many options that help you build your website easier and faster. Some themes even include multiple versions of the homepage and several following pages such as Services or About Us which might have different layout or elements. So, how do they do that? And how users can create similar pages with those themes?
The answer is drag-and-drop page builder plugins! More specifically, Visual Composer.
#What is a page builder?
Page builders are WordPress plugins that allow users to create layouts for pages, add elements simply by drag and drop elements into their specific position (row and column). Users don’t need to know coding or understand HTML/CSS to create beautiful pages. All they need to know is just basic WordPress usage and understand the element configuration, that’s all.
There’re plenty of page builders available, free and premium. The most popular one is Visual Composer (at the time of writing, it has 190k+ sales on CodeCanyon!). The reason we choose Visual Composer is it has everything we need to create a page, plus it’s familiar with millions of people as they already use them. Besides, it’s fairly powerful and easy to use, even for beginners.
To understand what page builder and Visual Composer are, please watch this video:
#Getting started with Visual Composer
Visual Composer is a plugin, so you need to install and activate to take advantage of all its wonderful features. To know in details how to install and activate the plugin, please watch this video:
Note: if you use our themes which support Visual Composer, you will get a free copy of the plugin!
Once activated, Visual Composer gives you control over the layout of your pages. Just add a new page and you will see new buttons so that you can toggle between classic mode and builder mode as well as a button to take you to the live front-end editor.
From here the possibilities are only limited by your (or your clients’) imagination. You can add rows, columns, buttons, text, images and so much more using all of the Visual Composer’s options. Plus there’s an option to save your layouts as templates to be reused over & over again.
Let’s go through some basic elements of Visual Composer to get you familiar with the plugin. Once you know how to use them, you will find that all other elements are similar and easy to use.
#Rows and Columns
Rows and columns are the basic elements to build the layout. Think a row like a horizontal section on your website and columns are vertical parts of that section.
First, you need to add a row. Doing that by clicking the plus (+) button or the Add Element button:
Then select Row from the list of elements.
Rows make it possible to add columns in one click. Just hover on the yellow paragraph tab at the top left corner of your row and select a layout. The row automatically breaks into columns according to the layout you choose.
Now you can see the plus (+) button inside each column. Clicking that button pops up a list of element that you can insert into the column.
Below the columns you can see another plus (+) button which allows you to add more rows.
Now click the plus button inside each column and select Text Block. Then another popup appears showing the settings for the Text Block:
All you need is entering the content and choose settings for each option here. Each param is self-explained and easy to understand.
After finishing, click Save changes button and you will see the element is added to the corresponding column.
Other elements are added using the same method. Once you understand adding 1 element, you understand all of them.
Please note that each element might have different options and you should try them to see how they appear in the frontend.
Usually, when making premium WordPress themes, theme authors (including us) create custom elements for Visual Composer. In order to make them easy to find and organized, we put them in a group with the same name as the theme. The group is displayed as a tab in the element list popup:
And from here you can add our elements into your page easily. There are no differences between built-in Visual Composer elements and theme elements, but their configuration.
Theme elements are the most used elements for each premium WordPress theme. To be honest, we rarely use other built-in elements, because they lack the configuration and other appearance features that we need for the themes.
When you use the theme elements, you should start with our demo content first, to understand how we use them. Then you can adjust them to fit your requirements. But that doesn’t mean you can play with them from scratch!
#Element design options
One of the best features that we like in Visual Composer is element design option. Whenever you insert an element, you will see a group of design options at the last position of the tabs:
We use these options a lot to control the space between elements and add a background for them. They’re very helpful and you should get familiar with that.
There are also design options for columns and rows as well which are extremely useful, too. You can find them by clicking the pencil icon above the column or row:
That’s the basics for Visual Composer elements. From now, you can play with them and don’t forget to check how they look in the frontend. Sometimes, configuring elements is art!
If you find any troubles using Visual Composer, here is a tutorial for beginners that might be useful for you:
If you want to watch more video tutorials for Visual Composer, please visit the plugin homepage.
BPF uses Visual Composer to build the homepage and other pages on the website. Visual Composer provides a lot of useful shortcodes to decorate the content. Besides, we add more shortcodes for BPF.
If you don’t know about Visual Composer yet, please follow this guide.