Setting the static front page

By default, WordPress shows your most recent posts on the front page (homepage) of your site. But many premium WordPress themes show different content on the front page, which might include a slider, features, testimonials, contact info, etc. Here at FitWP, we often use the front page that way. This guide will show you how to set the static front page for most of our themes.

In order to create a static front page, you need to create two pages, one for your front page and one for your blog page. Go to Pages → Add New and create a page titled Front Page and a page titled Blog. You can also name these pages anything you like, but for the sake of website organization, we recommend using the name Front Page and Blog.

For the front page, after you have given your page a title, select Homepage from the list of available Templates on the right as the following screenshot:

Setup page template for homepage

Most of our front page has a page template, which allows us to pull the required content and style them in a good way. We normally name the template Homepage but it might slightly different across themes.

After creating a page and applying the homepage template, you should set it as the static front page by going to Settings → Reading and select A static page (select below) for Front page displays, and then select the page from the dropdown for Front page as follows:

select pages

That’s all. Now visit your website and you will see the content of the front page appears instead of most recent posts.

Using Jetpack with your WordPress themes

Using Jetpack with your WordPress 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:

Install Jetpack plugin

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 settings

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.

Note: some of our premium WordPress themes ask you to install Jetpack right after you activate the theme. So you don’t have to install the plugin manually. For more information about installing plugins after theme activation, please read this documentation.

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
define( 'JETPACK_DEV_DEBUG', true);

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!

Jetpack custom content types

There are 2 CPTs that we use in our themes: portfolio and testimonial.

Portfolios

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

Add edit porfolio

Testimonials

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.

Add edit testimonials

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 (for example in TheJ theme).
  • The featured image needs to be the author avatar.

Custom CSS

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:

Add custom CSS to your theme

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:

Tutorials:

Infinite scroll

Instead of having to click a link to get to the next set of posts, infinite scrolling pulls the next posts automatically into view when the reader approaches the bottom of the page. This module is very useful for blogging themes where the user experience is important. Among our premium WordPress themes, we integrated infinite scroll with TheM.

There’s nothing to do except activating the module under Jetpack → Settings and check that Scroll Infinitely is checked under Settings → Reading. If your WordPress themes support it, then it works automatically.

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.

Conclusion

There are many modules in Jetpack that you can explore yourself. They’re useful for millions of users on WordPress.com and might be for you, too. Jetpack is actively maintained and developed by Automattic, there’s no doubt about its future. Here at FitWP, we’re trying to integrate Jetpack to our themes to offer a better experience and more features to our customers.

Building pages with Visual Composer in WordPress

Building pages with 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!). Here at FitWP, we integrated Visual Composer in several WordPress themes such as TheM, TheJ. 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.

Edit page with Visual Composer

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.

Element fundamentals

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.

Rows and columns

First, you need to add a row. Doing that by clicking the plus (+) button or the Add Element button:

Add an element

Then select Row from the list of elements:

Select row

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.

Setup columns in a row

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.

Text block

Now click the plus button inside each column and select Text Block:

Text block element in Visual Composer

Then another popup appears showing the settings for the Text Block:

Element settings

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.

Theme elements

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:

Theme elements

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. Please follow this documentation to understand how to import the demo content. 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:

visual composer element design options

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:

row and column settings

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!

Video tutorials

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.

Import demo content for WorrdPress themes

When purchasing a WordPress theme, we definitely expect our website looks similar to what shown in the demo. However, for some themes, especially the themes on ThemeForest where they have many features, setting up a website exactly like a demo is not too trivial. It sometimes takes an hour to set up and configure.

In order to reduce the setting time and give our customers a quick start with the theme, we already made a demo import plugin for each of our themes. And this documentation will show you how to use the plugin to import the demo content for your WordPress websites.

Please note that this step is optional. You should be able to customize the whole theme by following our documentation. The demo import plugin also adds some data to your website (the demo data) that you might not expect (the existing content still remains, though). So, please consider a little.

Install the demo import plugin

After downloading the .zip package from ThemeForest, unzip it and you will see the demo import plugin. Make sure that you download All files & documentation from the Downloads page on ThemeForest. If you don’t know what it is, please follow this guide.

The demo import plugin is usually named theme-demo-import.zip or similar and you will recognize it when you unzip the package.

To install the plugin, go to Plugins → Add New in the dashboard, then click Upload Plugin button:

upload demo import plugin

In the next screen, choose the .zip file of the demo import plugin and click Install Now.

install demo import plugin

After installing the plugin, click Activate link to activate it.

 

Error uploading demo import plugin

Sometimes, the demo import plugin has a large file size because we already included all the images. So when you install, you get the exact demo as you see. However, as the file size is big, some hosts may disallow to upload. To fix the problem, follow these steps:

  1. Unzip the file demo plugin .zip file
  2. Use an FTP client software (FileZilla works great for us) and upload that folder to wp-content/plugins

upload demo import plugin using ftp filezilla

Then go to your Dashboard → Plugins and activate the plugin.

Import demo content

Once the demo import plugin is installed and activated, you will see a new sub menu Import Demo under Tools menu. There you will see some demos (if the theme has multiple demos) or single demo. Simply choose the demo you want to import and click the Import button.

It takes a couple of minutes to process all the content. After done, go to the frontend and enjoy the theme.

Notes

It’s important to note that if you have the WordPress Importer plugin installed, you must deactivate it or you will see a fatal error. This is because our demo import plugin already includes this plugin internally, so having it activated making it includes twice and breaks the website.

How to download and install a WordPress theme from ThemeForest

After purchasing a WordPress theme from ThemeForest, the first step is download and install it on your website. This tutorial will show you how to do that in an easy way.

Download the WordPress theme from ThemeForest

Right after you completed the purchasing a WordPress theme on ThemForest, a download button will appear. Just click on that button to download the theme.

In case you want to download the theme again or somehow you closed the browser tab, you need log into your account on ThemeForest. Then move your mouse over your username on the top right and click Downloads.

Go to downloads page

Then you will be redirected to your Downloads page. All your purchased items are listed here.

Each WordPress has a green button Download. Clicking on that button shows a dropdown. Then select All files & documentation to download the WordPress theme and everything goes with it that you might need to set up the theme, such as required plugins, documentation.

Download WordPress theme

The screenshot above shows an example with our Felix theme.

Install a WordPress theme from ThemeForest

After you download the .zip package from ThemeForest, unzip it. You’ll see a file .zip, which is the main theme file that needs to be uploaded and installed. The filename is usually the theme name, for example: if the theme is TheM, then the file name is them.zip, NOISEnoise.zip, etc. But sometimes, the file name is different but not too much and you can guess the file name from the theme name. Here at FitWP, we always name the .zip file the same as the theme name.

To install a WordPress theme from a .zip file, login to your WordPress dashboard and click on Appearance → Themes. Then click on the Add New button at the top.

Add new WordPress theme

On the next screen, click on the Upload Theme button at the top. You will be prompted to choose the zip file that you downloaded earlier. Select the file and click Install Now.

Upload WordPress theme

Once your theme is installed, you will see a success message along with the link to activate and preview the theme. Just click Activate link to complete the installation of the theme.

Install required and recommended plugins (optional)

After installing the WordPress theme, you might see a notification at the top of the page that says the theme needs some plugins to function properly. These plugins add more features to the theme such as portfolio, contact form, shop, which makes your website more powerful.

Please note that not all themes have this notification. But most of the themes on ThemeForest have that. So do our themes.

Notification to install plugins

If you see the notification, you will know that the theme requires and recommends some plugins. The required plugins must be installed to make the theme work as expected while the recommended are just optional as the website still work without them, but it’s still better to have them installed.

To install plugins, click on the link Begin installing plugins as shown in the screenshot above. You’ll be redirected to a page where all needed plugins are listed. Just click on Install below the plugins’ names or select all of them (recommended) and choose Install from the drop-down and click Apply.

Install plugins

Some plugins are included directly in the themes and some are hosted on wordpress.org which takes a while to download.

Done installed plugins

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:

Activate plugins

That’s all. Now you have your theme and plugins installed. It’s time to discover theme features and setup the theme. For the specific theme, please follow the corresponding documentation of the theme.

Build, design, code and monitor website health using your smartphone with a hosted cloud desktop having hosted apps and cloud storage from CloudDesktopOnline. Learn more about Desktop as a Service (DaaS) or virtualization software by visiting Apps4Rent.com.