Category: Guides

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.

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!

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

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.

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:

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.

Tutorials:

• CSS Beginner Tutorial by HTML Dog
• Hands-on Codecademy CSS Lessons

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.

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.

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.

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.

Text block

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.

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:

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:

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!

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.