WPMU DEV's Blog - Everything WordPressWordPress Plugins - WPMU.org http://premium.wpmudev.org/blog The WPMU DEV WordPress blog provides tutorials, tips, resources and reviews to help out any WP user Mon, 20 Oct 2014 12:00:12 +0000 en-US hourly 1 http://wordpress.org/?v=3.9.2 White Labeling Your WordPress Site: The Complete Guide http://premium.wpmudev.org/blog/white-labeling-wordpress/ http://premium.wpmudev.org/blog/white-labeling-wordpress/#comments Fri, 17 Oct 2014 12:00:00 +0000 http://premium.wpmudev.org/blog/?p=133034 When you build a website, one of your top priorities should always be to put your personal stamp on the project. You can do this through your visual style choices, your custom graphics, or even custom footers that say—in essence—I made this.

And while many developers focus on adding branding to the frontend of a site, the backend is often left untouched without a hint of customization. That can be fine if you’re the only one working on the site but if you have a team or allow client access, the generic out-of-the-box WordPress dashboard might not serve you all that well.

Basically, your site’s backend could be doing more for you. It could be working harder for you. And that’s why white labeling—the process of adding personalized, branded touches—is such a good idea. So today I’m going to present some solutions for white labeling your site, from plugins and themes that guide your customizations to manual code snippets you can drop into your site right this second.

White label WordPress
White label your WordPress site.

What’s the Point of White Labeling?

White labeling is all about ensuring your site is fully branded. From the frontend to the backend, your site should reflect your business and the image you want to put out there in the world. Then again, your thoughts may fall more in line with the following:

“But you’re talking about customizing the part of my site the public never sees! What’s the point?!”

Sound like you? If it does, that’s okay. I completely understand the impulse to focus on the part of your site your potential clients and customers will see. Believe me. I get it. But sometimes doing a little extra work to make the internal operations surrounding your site more streamlined, more effective, and more personalized can have a dramatic impact on that aforementioned outward appearance.

Here are a few things white labeling will definitely do for you:

1. Reduce Confusion for Clients

Sometimes, you’ll come across a client who has never heard of WordPress before and honestly doesn’t care that you’re using it. So seeing notes all over the place in the dashboard about WordPress-this and WordPress-that can be a bit confusing.

It would make a lot more sense to these folks if the footer of your dashboard noted that the site was designed by you wouldn’t it? Because I mean, you don’t want to receive an email at 2 a.m. from a client asking, “Who’s this WordPress outfit? I didn’t sign up for that!”

2. Increase Professionalism

At its heart, white labeling is about branding. As I said earlier, it’s about making your mark. A solid brand reputation stands to be perceived as more professional and more put-together than one that’s a bit all over the place.

You go to great lengths to customize other aspects of your sites, right? You wouldn’t even think of launching a site without a company logo. So why not have the same mentality for the backend? Team members and clients tasked with logging into your site for the first time are sure to be impressed when they see your logo and welcome message rather than the same generic WordPress ones they’d see on any other site.

3. Offer Additional Support

I think one of the coolest things you can do with white labeling is include links to additional documentation and support in the dashboard. This is so incredibly helpful to your clients and your team members who maybe aren’t as familiar with this whole WordPress thing as you are.

You can even link to support videos if you want to provide even further guidance.

4. Customize the Dashboard to Suit Specific Needs

The WordPress dashboard comes equipped with some things standard. But depending on your team or your clients, not every widget that appears there is going to be relevant. And again, for newbies, you only stand to confuse them if you present too much information at once.

White labeling affords you the opportunity to remove and/or add widgets to suit your needs at the time. For instance, if your team members are mostly contributors to your blog, they might only need to see the “At a Glance,” “Quick Draft,” and “Activity” widgets. Everything else would just be extra and possibly viewed as in the way.

Adding White Label Elements Manually

If you only want to add a couple of white label aspects to your site, it’s pretty easy to accomplish manually. Just a few code snippets can get you a custom login page or a custom greeting.

Here are a few ways you can white label WordPress. As always, make sure you backup your site before making any changes to the functions.php file:

Add Your Logo to the Login Page

WordPress Admin Login
This is a pretty familiar sight, isn’t it? And while it’s perfectly serviceable as a login page, it doesn’t do anything to remind the user that they’re visiting your site. Adding a custom logo here rather than the WordPress default one says, “You are on my site now!”

To change the logo you need to first create a custom image. You want something that’s going to fit nicely above the username and password fields. Between 300px and 315px wide, and 75px and 130px, tall ought to do it.

Save this image as a PNG file and upload it to your theme’s images folder.

Your next step is to insert a code snippet in your theme’s functions.php file. This one was written by Rick R. Duncan:

1
2
3
4
5
6
7
8
9
10
11
<?php

//* Do NOT include the opening php tag

//* Replace WordPress login logo with your own

add_action('login_head', 'b3m_custom_login_logo');

function b3m_custom_login_logo() {

    echo ''; }

Just make sure to swap out login.png with the name of your custom logo and adjust the height and width variables to match your image and you’ll be all set.

Duncan also suggests making this new logo link to your site’s homepage. I mean, why would you want to direct your clients to WordPress.org anyway? They’re doing business on your site! To make this change, you can add this bit of code to functions.php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php

//* Do NOT include the opening php tag

 

//* Change the URL of the WordPress login logo

function b3m_url_login_logo(){

    return get_bloginfo( 'wpurl' );

}

add_filter('login_headerurl', 'b3m_url_login_logo');

That way when someone clicks on your logo, they will be taken to your homepage and not directed to WordPress.org, which could be very confusing for your client.

Change the WordPress Welcome Message

WordPress Howdy Welcome Message
“Howdy” can be changed to read whatever you’d like.

If the default “Howdy” just isn’t doing it for you, it’s possible to change the default message to something more your style or more in keeping with your brand. Just add this code snippet to your theme’s functions.php file and swap out the “Howdy” for your custom greeting:

1
2
3
4
5
6
7
8
9
10
11
12
add_filter('gettext', 'change_howdy', 10, 3);

function change_howdy($translated, $text, $domain) {

    if (!is_admin() || 'default' != $domain)
        return $translated;

    if (false !== strpos($translated, 'Howdy'))
        return str_replace('Howdy', 'Welcome', $translated);

    return $translated;
}

Change the Footer Text in the Dashboard

Here’s another prime spot to put your branding information. Instead of just letting the default “Thank you for creating with WordPress” ride in your dashboard’s footer, you can use a simple code modification to change this text to read whatever you want:

1
2
3
4
5
6
7
function change_footer_admin () {  

  echo 'Custom text goes here. Theme developed by <a href="<a href=">http://www.linktowebsite.com</a>">Link to Website';  

}  

add_filter('admin_footer_text', 'change_footer_admin');

Change the Dashboard Header Logo

Having a custom logo, footer, and welcome message are great, but if the logo in the admin header is still stuck on the default WordPress one, you’re going to create an inconsistent brand image.

According to Art of Blog, a good way to fix this is to use the following code snippet in functions.php:

1
2
3
4
5
6
7
/**REPLACE WP LOGO**/
function admin_css() {
echo '';
}

add_action('admin_head','admin_css');
/**END REPLACE WP LOGO**/

Then all you need to do is add a small bit of code to your admin.css file:

1
#header-logo {background-image: url(images/client_logo.jpg);}

Just make sure the image referenced here matches the file name of your custom logo and you’ll be all set.

Add a Custom Contact Widget to the Dashboard

When you first login to a WordPress site, you’re going to see something like this:

WordPress Dashboard Widgets
Most WordPress dashboards look something like this.

And while this view is likely fine for your internal team members, it might not always be ideal for clients who need more guidance or direction. Wouldn’t it be nice if you could direct clients back to your site in case they need help or would like to hire you for additional work? Well you can do just that by adding a contact widget. Rick R. Duncan has a code solution for this, too:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?php

//* Do NOT include the opening php tag
 
//* Add theme info box into WordPress Dashboard

function b3m_add_dashboard_widgets() {

  wp_add_dashboard_widget('wp_dashboard_widget', 'Theme Details', 'b3m_theme_info');

}

add_action('wp_dashboard_setup', 'b3m_add_dashboard_widgets' );

function b3m_theme_info() {

  echo "</pre>
<ul>
	<li><strong>Developed By:</strong>Your name</li>
	<li><strong>Website:</strong> <a href="http://www.websitelink.com">Website name</a></li>
	<li><strong>Contact:</strong> <a href="mailto:youremailaddress@emailprovider.com">youremailaddress@emailprovider.com</a></li>
</ul>
<pre>";

}

The end result looks something like this:

Custom Contact Dashboard Widget for WordPress
You can create widgets to display custom contact information.

As you can see, you can easily display your name, website, and contact information in its own widget.

You can also modify this bit of code to display links to your supporting documentation. So instead of showing your name and website, you may instead opt to display “For full support documentation visit: Site Name” or “Have any questions? Ask them on Your Forum Name,” and insert links as appropriate:

Custom Support Dashboard Widget for WordPress
Custom widgets can be used to display links to support docs, too.

Your clients shouldn’t have to guess at how to use your dashboard, so provide as much information as you can upfront and point them to as many of your custom resources as possible. Sure, there are plenty of tutorials out there about how to use WordPress, but why make a client search for that info when you can provide it under your own brand?

Change the Admin Color Scheme

The newest versions of WordPress offer the ability to change up how your dashboard’s color scheme looks. Still, these preset options might not be exactly what you’re looking for. Being able to customize the admin color scheme means you can ensure every aspect of your site’s backend matches your company’s branding.

To accomplish this, Smashing Magazine suggests creating a new CSS file. Call it admin.css and put it in your theme’s css folder. Make sure you use styles that work with WordPress. Then, open up functions.php and add this bit of code to call up that CSS file you made:

1
2
3
4
5
6
7
8
9
// Custom WordPress Admin Color Scheme

function admin_css() {

wp_enqueue_style( 'admin_css', get_template_directory_uri() . '/css/admin.css' );

}

add_action('admin_print_styles', 'admin_css' );

Plugins for White Labeling

If the thought of manually adding bits of code to white label every site you create is too much, a plugin-based solution may be just the thing you need. Here are a few that either do it all or do one thing really well:

Ultimate Branding

ultimate-branding

Of course we have to mention our own plugin, Ultimate Branding, first. We’re pretty fond of it and think it does a really great job of giving site owners the ability to add white labeling without having to dive into PHP.

This plugin makes it easy to add your brand to just about every aspect of the WordPress backend, including a custom login image, admin bar, global footer and dashboard footer content, meta widget, admin help content, custom multisite favicons, and much more. You can also remove dashboard widgets to ensure your clients are only presented with the information they absolutely need.

Ultimate Branding is an all-in-one plugin but far from a one-size-fits-all solution. Customization is the name of the game and when it comes to branding your site, thoroughness is key.

White Label Branding for WordPress

white-label-branding-for-wordpress

Another option for adding customization to your dashboard is to use the White Label Branding for WordPress plugin available on Code Canyon. While its primary focus is on letting you brand your site, it includes some other interesting features that are worth mentioning as well.

With the Dashboard Tool, you can add as many custom dashboard meta boxes as you want. Thanks to navigation options, you can hide top-level and sub-level menus, rearrange their order, hide individual menu items based on user role, rename menus, and change menu icons. You can even hide the admin bar altogether if you want to prevent users from poking around too far into your site’s settings.

It also offers a variety of color scheme options. For instance, you can add a custom color scheme for wp-admin, change menu and content area colors, and customize how buttons appear. The role and capability manager lets you establish custom user roles and capabilities, which you can then tie to some white label features. For instance, you may opt to have different users, based on their roles, see different dashboard metaboxes. So, admins and contributors wouldn’t see the same things, thus preventing confusion and potential for errors.

You can expect to pay $28 for a regular license and $140 for the extended license.

AG Custom Admin

ag-custom-admin

Self-described as an “all-in-one tool for admin panel customization,” you can easily modify the admin bar and menu, add personal branding to the admin panel in the form of images and content, and swap out the colors used—including in backgrounds and text—to better suit your brand’s image.

With just a couple of clicks, you can change out the admin panel theme as well, change the dashboard widgets, and modify what appears in the Help and Screen options menus. The admin themes are responsive and perfectly suited for the admin panel and login page.

Tired of clients accidentally creating new pages instead of posts? You can hide the “New Page” option from the dashboard and prevent it from happening ever again. You can also hide the options to create new links, users, media, and posts should you so desire.

YouTube White Label Shortcode

youtube-white-label-shortcode

Adding videos to your site can be a great way to incorporate media and dynamic content. However, just embedding YouTube videos using the standard embed code can look a bit out of place. The videos won’t necessarily blend in with the rest of your design and the formatting could be a bit wonky.

That’s why the YouTube White Label Shortcode plugin is so handy. Once installed, you can add any YouTube video you want but you have the option to change up the player’s logo, whether or not videos start immediately upon loading, the player style, and more.

While this short code generator is automatically added in a metabox on all post types, you can opt for it to only appear on the post types you specify.

Uber Login Logo

uber-login-logo

If you’re not big on all the white label features and just want to add your logo to the admin login page and call it a day, Uber Login Logo is a good way to accomplish that. With it, you can upload your logo via the standard media uploader and swap out the logo by adjusting a few settings. Simple.

It’s extremely lightweight, which makes sense since it only performs one function. Still, if you don’t feel like poking around in functions.php, this plugin will give you a branded login page without calling much attention to itself.

Disable WP Admin Bar Removal

disable-wp-admin-bar-removal

If getting rid of the admin bar is your top priority on the white labeling front, you should check out Disable WP Admin Bar Removal. This plugin will let you select from several settings to remove the admin bar, the toolbar, and tooltips.

It can also hide admin icons on the backend of your site and can be used to add a header and footer log and a logout function at the top of the dashboard.

Admin Menu Editor

admin-menu-editor-pro

Changing the menus in your WordPress dashboard is another way to customize the backend experience for your team and clients. If you’d rather not poke around in code, Admin Menu Editor will get the job done quite nicely.

With it, you can change menu titles, URLs, icons, and CSS classes. You can also rearrange the order of menu items easily via a drag-and-drop interface and opt to hide or show any menu or menu item. It’s also possible to set who sees what version of your menu based on user capabilities and/or roles.

Another cool thing about this plugin is you can create custom menus that point to any section of your dashboard. Or, you can configure these menus to link to external sites. This can be an excellent way to incorporate links to your support documentation in the dashboard.

Admin Menu Editor Pro adds on a few extra features if you really want ultimate control over your menus. Some of these features include the ability to hide a menu from all but specific users, set per-role menu permissions, drag items between sub-menus and main-menus, and export the admin menu for use on other sites.

It’s available under three licenses—personal, freelancer, and business—which are priced at $19, $29, and $59, respectively.

Themes for White Labeling

Normally when a discussion shifts to talk of WordPress themes, it’s referring to those that make up the design and style of a published and public website. However, themes are also available for styling the backend of your site.

More recent versions of WordPress have ramped up the style factor quite a bit. Individual users can select from a variety of color schemes through which to view the dashboard. From the cool tones of “Ocean” to the seemingly Halloween-inspired “Ectoplasm,” many people can find a look that appeals to their day-to-day sensibilities.

But if it’s important for you to create a branded look that’s in keeping with your company’s color scheme, you may find these out-of-the-box selections just won’t cut it. That’s where admin themes come in pretty handy.

Here are a few that will do your site proud:

Modern Admin

modern-admin-theme

If you want to display your WordPress admin a little differently but don’t want to spend hours on custom code, Modern Admin might help you. This admin template is retina-ready and comes equipped with five different color schemes including blue, green, red, yellow, and purple. Plus, the custom color picker ensures you can make the right selection for your dashboard.

This theme has some of the features of white label plugins, too. For instance, you can customize the login page, add a custom logo, change the dashboard icons, and more. It also includes import/export settings and can be easily updated within the admin panel.

A regular license costs $14, while the extended costs $70.

WP Quick

wp-quick-theme

As its name suggests, WP Quick is an admin theme that can be implemented quickly. It comes with plenty of features to keep savvy folks satisfied but is easy enough to setup that newbies to while labeling can get the hang of it right away.

Along with the ability to customize the colors and fonts used, you can also streamline the dashboard to only show the widgets you want displayed. For instance, you can stop those pesky update notifications from appearing, customize the login page with a unique logo, and change the default site avatar.

It also works with multisite, so you can create a custom, branded dashboard across all of your client sites very quickly.

Easy Blogging

easy-blogging

Of course, I would be remiss if I didn’t mention WPMU DEV’s own admin customizer, Easy Blogging. Though technically a plugin, it lets you customize every aspect of the “look” of your dashboard very much so in the way a theme would.

It comes with some presets that make configuration and setup a snap. For instance, one click activates “Easy Mode,” which removes some of the more complicated options from the dashboard and adds new icons and tooltips to make your clients’ user experience more intuitive.

Easy Blogging also has a “Wizard Mode” that gives new users a step-by-step walkthrough of how to use the dashboard. And of course, you can customize this mode to include the information that relates to your site. You can even add in help links wherever you want using a drag-and-drop interface.

And since it works with multisite, you can set it up once and apply it across all of your sites. Convenient? I think so!

Easy Blogging costs $40 by itself or $19.60 per month with a WPMU DEV subscription.

Forest - Revolution WordPress Admin Theme

forest-theme

The last admin theme I want to throw at you here is Forest. This is a theme designed to make your WordPress backend as exciting and engaging as the frontend.

It comes with two admin styles within which you can adjust the background darkness level, background image, color scheme, menu font, and content font. You can also enable a Quick Panel that makes it simple to adjust settings on the fly. Plus, you can adjust how the Quick Panel looks for an even deeper level of customization.

As with all the other admin themes mentioned here, Forest also lets you configure standard white label functions like setting a custom login logo and login image, custom footer text, and custom admin CSS. Plus, you can hide certain WordPress admin widgets from view.

Forest includes a Google Fonts chooser, Font Awesome Icons, and sports a retina-ready design. It’s also multisite-compatible. The regular license costs $14, while an extended license costs $70.

For more backend themes for white labeling your site, you should read our top 10 list of WordPress admin themes.

Wrapping Up

Whether you build many sites for a wide range of clients or just a few now and then, being able to take control of the the admin side of things can be incredibly liberating. White labeling not only gives you the freedom to create a dash that fits your brand identity, it also lets you create an interface that’s custom-tailored to your clients.

When deciding on which white label code snippets, plugins, or themes to use, try to keep a general idea of your goals in mind. What do you hope to accomplish with these changes? Do you just want to streamline the look of the backend of your site? Do you want to improve functionality for your clients? Both? It might even be helpful to create a list of the pros and cons of each modification before committing to them.

Do you make it a habit to white label your sites? What tools do you use to get the job done? Are you a flat-out coder or do you take the plugin approach? I’d love to hear your thoughts in the comments below. 

Image source: Derek Gavey.

]]>
http://premium.wpmudev.org/blog/white-labeling-wordpress/feed/ 0
Optimizing Your WordPress Database – A Complete Guide http://premium.wpmudev.org/blog/optimizing-your-wordpress-database-a-complete-guide/ http://premium.wpmudev.org/blog/optimizing-your-wordpress-database-a-complete-guide/#comments Thu, 16 Oct 2014 12:00:58 +0000 http://premium.wpmudev.org/blog/?p=132430 Your WordPress database stores all of your website content. This includes blog posts, pages, comments, and custom post types such as links, form entries, and portfolio items. It also stores website settings, theme settings, and plugin settings.

If you update your website regularly, your database will grow larger over time. A large database can greatly affect the performance of your website as it takes longer for your server to retrieve information from database tables. This is why database optimization is so important.

By removing unnecessary data, you can improve the efficiency of your database and make your web pages load quicker. Let us look at how this can be achieved.

Database optmization
Database optimization – boring but essential.

Understanding the WordPress Database

If you are using WordPress to publish content on the internet, I believe it is in your benefit to have an understanding of the core WordPress database tables; particularly if you are planning on optimizing your WordPress database.

WordPress currently has 11 core tables (this could, of course, change in a future version of WordPress). Most WordPress websites have dozens of tables because plugins save settings and other data in the WordPress database. Themes may also save settings and other data in your database.

If you check your own database, you will see the 11 tables listed below. All other tables in your database were created manually or created by a WordPress plugin or WordPress theme.

Let’s look at what each database table stores:

  • wp_commentmeta – Stores meta information about comments
  • wp_comments – Stores your comments
  • wp_links – Stores blogroll links (blogroll feature is deprecated, but can be added using Link Manager)
  • wp_options – Stores the options defined in the admin settings area
  • wp_postmeta – Stores post meta information
  • wp_posts – Stores data for posts, pages, and other custom post types
  • wp_terms – Stores post tags and categories for posts and links
  • wp_term_relationships – Stores the association between posts and categories and tags and the association between links and link categories
  • wp_term_taxonomy – Stores a description about the taxonomy (category, link, or tag) used in the wp_terms table
  • wp_usermeta – Stores meta information about users
  • wp_users – Stores your users

Check out the database description page on WordPress.org for more information about WordPress core tables.

How to Optimize and Repair Your WordPress Database

phpMyAdmin is the most common way to manage a WordPress database. If you are not using cPanel as your hosting control panel, your hosting plan may be using a different MySQL management tool to phpMyAdmin. Do not be too concerned about this as most database management tools have a similar interface and work in the same way.

You can also manage your WordPress database using a plugin such as Adminer (formerly known as phpMinAdmin). Although a database WordPress plugin can make accessing your database simpler, I would advise against managing your database in this manner as it is a large security risk. If you have a plugin such as Adminer installed and an unauthorized person gained access to your database, they could do anything they wanted to your website.

phpMyAdmin in cPanel
phpMyAdmin can be found in your main cPanel menu.

If you check your database, you will see two columns at the end: size and overhead. The size of a table depends on the amount of data that is stored in it. If more rows are stored in a table, the size of the table increases.

Overhead is temporary disk space that is used by your database to store queries. Over time, a table’s overhead will increase.

It is perfectly normal to have overhead in your WordPress database and it should not affect performance unless overhead gets high (though the actual amount of overhead that should be considered too high is a grey area).

WordPress Table List
The size and overhead of your database are shown on the right hand side of the table list.

* Please note that the above screenshot is taken from a new WordPress installation I created for screenshots. That is why the database prefix is still wp_. To make your website more secure, always change your WordPress database prefix through wp-config.php to something different.

Optimizing your database will remove the overhead and reduce the overall size of your database. Many developers note that optimizing a database is akin to defragmenting a hard drive.

Every database will, over time, require some form of maintenance to keep it at an optimal performance level. Purging deleted rows, resequencing, compressing, managing index paths, defragmenting, etc. is what is known as OPTIMIZATION in mysql and other terms in other databases. For example, IBM DB2/400 calls it REORGANIZE PHYSICAL FILE MEMBER.

It’s kind of like changing the oil in your car or getting a tune-up. You may think you really don’t have to, but by doing so your car runs much better, you get better gas mileage, etc. A car that gets lots of mileage requires tune-ups more often. A database that gets heavy use requires the same. If you are doing a lot of UPDATE and/or DELETE operations, and especially if your tables have variable length columns (VARCHAR, TEXT, etc), you need to keep ‘er tuned up.

You can optimize tables that are affected by overhead by using the SQL command OPTIMIZE TABLE. For example, you could optimize the wp_posts table by executing this SQL query:

OPTIMIZE TABLE 'wp_posts'

There is no need to use an SQL command as phpMyAdmin allows you to optimize tables from the main drop down menu. All you need to do to optimize your database is click on the “Check All” box, select “Optimize table” from the dropdown menu, and then click on the “Go” button.

Optimize Your WordPress Table
Optimizing your WordPress database will remove any accumulated overhead.

Once you have optimized your WordPress database, phpMyAdmin will confirm that your tables have been optimized.

Successful Database Optimization
phpMyAdmin will confirm that your database has been optimized.

Another useful option you should keep in mind for future is “Repair table”. Repairing a table will help you fix a table that has become corrupted.

Repair Table
Repairing a table can fix a table that has become corrupted.

WordPress has a tool that allows you to repair and optimize your database. You can find out more about this tool in the Automatic Database Optimizing section of the WordPress.org guide on wp-config.php.

To use the optimization tool, you first need to add this line to your website wp-config.php file.

define( 'WP_ALLOW_REPAIR', true );

Once you have added the above line to wp-config.php and saved the file, you can access the optimization tool at http://www.yourwebsite.com/wp-admin/maint/repair.php.

WordPress Optimization Tool
The WordPress optimization tool lets you repair your database, or repair and optimize your database.

The optimization tool will attempt to repair each database table. From time to time, the script may not be able to repair certain tables.

Repairing a WordPress Database
WordPress will attempt to repair each database table.

If you do not successfully repair your database in the first attempt, simply run the optimization tool again.

Repairing the WordPress Database
If there are any problems during the repair, run the repair script again.

If you select “Repair and Optimize Database”, WordPress will optimize every table that has not already been optimized.

Optimized WordPress Database
The tool will optimize any table that has not already been optimized.

You do not need to be logged in to run the WordPress optimization tool. The downside to this is that anyone can access your script and execute it. Due to this, you need to remove the WP_ALLOW_REPAIR line from your wp-config.php file after you have used the optimization tool.

How to Remove Bloat From Your WordPress Database

Most WordPress databases store a lot of unnecessary data. This additional bloat makes websites slower and less efficient.

There are a number of things that add bloat to your website database. However, by following good practices, you can greatly reduce bloat, or even eliminate bloat entirely from your website.

Let’s take a look at the main causes of bloat in a WordPress database.

Revisions

The WordPress revision system makes many WordPress databases unnecessarily large. First introduced in WordPress 2.6, the feature stores a copy of every draft and update of your blog posts. It is a useful feature as it allows you to revert back to older copies of articles and check earlier drafts.

Compare Revisions
Revisions allow you to look back at previous drafts and see the changes you have made.

Unfortunately, WordPress places no limitation on the number of revisions that are saved. If you are working on a long article, this could result in hundreds of revisions being saved. Even though the published article will only take up one row in your database, the corresponding revisions could use dozens or hundreds of rows in your database.

I am a big fan of the revision system, however I do not believe there is any real benefit to saving an unlimited number of revisions for each blog post. Thankfully, WordPress allows you to easily reduce the number of revisions that are stored.

To reduce the number of revisions that are saved, simply add the following code to your wp-config.php file.

define( 'WP_POST_REVISIONS', 2 );

Post revisions can be completely disabled by adding the following code to your wp-config.php file.

define( 'WP_POST_REVISIONS', false );

I would advise against disabling post revisions completely. While disabling post revisions will undoubtedly reduce the size of your database, it removes the fail safe system that revisions provide. Therefore, in the event of you closing your browser in error or losing your internet connection, you could lose everything you worked on since the last save of your draft.

Reducing the number of revisions that are saved, or disabling post revisions altogether, does not affect the revisions that are already saved. Therefore, post revisions attached to older blog posts will still be stored in your database.

Once an article has been published, there is little need to keep older post revisions, therefore you may want to consider removing all revisions from published articles. There are a number of WordPress plugins that allow you to do this (you can also remove revisions using MySQL; however you should be aware that problems can occur if you do not use the correct command).

For example, I used the plugin Optimize Database after Deleting Revisions earlier this year to reduce the size of my blog database by 59%.

The plugin allows you to define the number of revisions that are saved. It also lets you delete trashed items, spam items, unused tags, and expired transients. Specific database tables can be removed from the optimization process.

Optimize Database after Deleting Revisions has a scheduler too. It can be used to optimize your website automatically once an hour, twice a day, once a day, or once a week.

Optimize Database after Deleting Revisions
Optimize Database after Deleting Revisions features a scheduler that will optimize your database at set intervals.

Another option for deleting post revisions is Better Delete Revision. It provides a list of all revisions saved on your website. Unfortunately, there is no option to delete revisions individually; there is only an option to delete all revisions at once. The plugin does, however, have an option for optimizing all of your database tables to reduce overhead.

Better Delete Revision
Better Delete Revision can be used to delete revisions and optimize your database tables.

I would also like to briefly speak about autosaves. The WordPress autosave feature saves one autosave of your article every 60 seconds. This interval can be changed by adding the following code to your wp-config.php file.

define( 'AUTOSAVE_INTERVAL', 160 ); // Seconds

A lot of bloggers have advised disabling autosave as autosave saves multiple copies of your posts and pages. That is simply not true. Autosave only ever saves one copy of your article and will not use up much room in your database.

The autosave feature is an important fail safe that will help you if you lose your internet connection or close your browser by mistake. The feature does not use up much space in your database; therefore I encourage you to keep it activated.

Spam Comments

If your website receives a lot of spam, you may find that spam comments are taking up a lot of space in your database. By default, spam comments are automatically deleted after 30 days; however during that time they can take up hundreds or even thousands of rows in your wp_coments table.

A good anti-spam plugin can stop many spammers in their tracks so that the volume of spam comments you receive is reduced.

Akismet is a good solution as it allows you to discard obvious spam so that the comment is deleted from your database right away (though be concious of the fact legitimate comments could be deleted automatically).

Akismet Settings
Akismet allows you to discard discard obvious spam.

A useful plugin I used to use in the past is WPCommentCleaner. It allows you to batch delete all spam comments, unapproved comments, or approved comments.

There is less need to use that plugin now as WordPress added an “Empty Spam” button to the spam comment page that allows you to permanently delete all spam comments instantly.

Empty Spam
Spam can be deleted at the click of a button.

Spammers tend to target older articles that have good rankings in search engines. You can therefore reduce the amount of spam that your website receives considerably by disabling comments on articles that are older than a specified number of days. This setting is located in the discussion settings page in the WordPress admin area.

WordPress Discussion Settings
Closing comments on older articles can greatly reduce the volume of spam your website receives.

Spam comments can also be deleted using the following SQL command.

DELETE FROM wp_comments WHERE comment_approved = 'spam'

All comments awaiting approval can be deleted by using the following SQL command.

DELETE FROM wp_comments WHERE comment_approved = '0'

Since you can now delete all spam using the “Empty Spam” button displayed in the spam comment page, there is no real benefit to using an SQL query to delete spam from your database.

Deleted Items

Whenever you delete an item in WordPress, such as a blog post, page, image, comment, or link; it is sent to the trash folder. This is another fail safe system from WordPress that prevents you from deleting items by accident. Should you wish, the system allows you to restore items that are currently sitting in trash.

Unless you are deleting many items regularly, you should not need to worry about the space deleted items take up in your database. However, it is worth understanding how the trash system works, particularly if you have to delete hundreds or thousands of items from a WordPress website (whether it be posts, comments, images, or whatever).

Deleted items will continue to be stored in your database until the trash is emptied. By default, trash items are permanently deleted after 30 days.

The number of days before trash is emptied can be changed by adding the following code to your wp-config.php file.

define( 'EMPTY_TRASH_DAYS', 5 ); // 5 days

The trash system can be completey disabled by adding the following line of code to your wp-config.php file.

define( 'EMPTY_TRASH_DAYS', 0 ); // Zero days

I do not believe that disabling the trash system is a good move as it means that you cannot restore any items that were deleted by mistake. It is more practical to simply reduce the number of days before trash is deleted.

WordPress Transients

WordPress Transients offer developers a way of storing data temporarily in the WordPress database. Transient records are stored in the WordPress options table.

Expired transient records can add bloat to your database and make your website run slower. There are a number of plugins that help you manage your transients and delete expired transient records that are no longer needed.

The WordPress plugin Transient Cleaner has an option to delete expired transients and remove all transients. Delete Expired Transients also offers this functionality and the plugin allows you set up a daily task for deleting expired transients.

Transients Manager
Transients Manager allows to view the transients that are currently being used on your website.

Transients Manager is one of the best solutions for viewing your transients. It allows you to view, edit, and delete transients. However, the plugin does not have any options for bulk deleting expired transients.

Transients are not something you need to worry about on a regular basis, however it is worth checking them periodically to verify they are not affecting performance.

Unused Plugin and Theme Tables

99% of all WordPress plugins store settings and data in your WordPress database. Unfortunately, when you uninstall a WordPress plugin, this information is not removed.

This is by design. If data was removed every time you deactivated a plugin, you would have to configure the plugin again when you reactivate it. You would also lose any reports or content that the plugin generated.

However, if you have decided to stop using a plugin, or if you were simply testing a plugin, you will want to remove all data when you uninstall the plugin. A small number of WordPress plugins include an option on their settings page to remove all data, though the majority of plugins do not have this option.

Due to this, WordPress databases can accumulate a lot of additional bloat over time. It is not uncommon for a WordPress database to contain dozens of tables for plugins that were removed months ago, or even years ago.

WordPress themes also store settings in the WordPress database and these settings will remain in your database when you switch themes.

WPDBSpringClean
WPDBSpringClean highlights unused tables in your database.

Unused tables can be removed from your database manually through a database management tool such as phpMyAdmin. However, even if you have a good understanding of the 11 core WordPress tables, you will find it difficult to distinguish tables from active plugins and tables from uninstalled plugins.

A useful plugin to help you with this is WPDBSpringClean. The plugin will identify unused tables from uninstalled plugins and give you the option to delete them.

Plugins That Add Bloat

Each plugin you install on your website increases the size of your website database. The space that some plugins use in your database is negligible; but some WordPress plugins can add a lot of weight to your database.

Whenever you install a new WordPress plugin, you should review how much load it places on your server’s CPU and how much storage it uses in your database.

The following types of WordPress plugins are known for storing a lot of data in the database.

  • Anti-Spam Plugins – In order to protect your website, many anti-spam plugins save information such as IP addresses and email addresses. For example, Akismet stores a lot of data in the WP_CommentMeta table.
  • Security Plugins – Just like anti-spam plugins, security plugins keep track of a lot of information about spammers and hackers.
  • Statistic Plugins – WordPress plugins that provide traffic and analytical reports need to store large amounts of data in your website database. This includes views, visits, countries, browsers, operating systems, referrers, keywords, and more.
  • Related Posts and Popular Posts Plugins – WordPress plugins that showcase other posts are notorious for using a lot of CPU and a lot of database storage. These types of plugins need to store a lot of data in your database; such as the number of likes, shares, and views, that each page on your website has received.
  • Link Tracking Plugins – Most link tracking solutions give you the option of tracking the number of clicks to your links. This is useful for understanding visitor habits and seeing where outgoing traffic is leading. Unfortunately, tracking hits can take up a lot of space in your database.

Some developers are conscious of the fact their plugins use a lot of storage. Which is why some developers include an option in their plugins to clear data.

For example, I track links using Pretty Link. The plugin allows you to disable the built-in tracking system. Three tracking setups are also available: Normal tracking, an extending tracking configuration that offers more stats but slower performance, and a simple click tracking option that offers less stats but better performance.

Stats can also be deleted from within the settings area. The plugin allows you to delete all hits or hits within the last 30 or 90 days.

Other WordPress plugins allow you to reset data and remove the tables the plugin added. However, in general, most plugins do not feature an option to remove all data.

P3 (Plugin Performance Profiler)
P3 (Plugin Performance Profiler) can highlight problem plugins that are slowing down your website.

A great tool for checking what WordPress plugins are slowing down your website is P3 (Plugin Performance Profiler). The plugin will highlight the impact that each plugin adds to your page loading time.

If a plugin is using a lot of storage in your database, or slowing your website down considerably, remove it. I would only recommend keeping a slow WordPress plugin installed if it was essential to a website’s success. However, I believe there are always alternative solutions available to WordPress users.

How to Optimize Your Database Using a WordPress Plugin

Throughout this article I have given advice on how to optimize your database using phpMyAdmin and wp-config.php. If the thought of using phpMyAdmin worries you, you may prefer to use a WordPress plugin to optimize your database. There are a number of good options available.

WP Clean Up is a great way of quickly removing unwanted data. It allows you to remove revisions, drafts, comments, and more – all at the touch of a button.

WP Clean Up
WP Clean Up is one of the easiest ways of removing unnecessary data from your database.

WP-Optimize can be used to remove post revisions, drafts, spam comments, unapproved comments, comments in the trash, transient options, pingbacks, and trackbacks. It also includes a page that shows the data size, index size, and overhead, of each database table.

WP-Optimize
WP-Optimize is one of the most downloaded optimization plugins on WordPress.org.

Another popular optimization WordPress plugin is WP-DBManager. It is a feature packed plugin that lets you optimize and repair your database. Automatic backups of your website can also be configured.

WP-DBManager is a good plugin, but from a security point of view I would be careful using it as the plugin also allows you to empty tables, drop tables, and run MySQL queries. Therefore, anyone who gained access to your website using malicious methods would be able to do a lot of damage.

Those of you who use ManageWP to manage multiple websites can can optimize your database through your ManageWP Dashboard.

Final Thoughts

I have helped many website owners over the years with WordPress-related problems. Sadly, very few people appear to take steps to keep their website database running efficiently. There really is no excuse for this as it only takes a few minutes to configure a WordPress website correctly.

This is what I do on my WordPress websites to keep their databases optimized:

  • I reduce the number of post revisions to two by adding define( ‘WP_POST_REVISIONS’, 2 ); to wp-config.php
  • I employ strong anti-spam measures to greatly reduce the volume of spam added to my database
  • I review any items I delete and then delete them permanently (rather than keeping items in trash)

I also check my database periodically through phpMyAdmin. This gives me an opportunity to optimize the database tables and remove any unused database tables. From time to time I use an optimization plugin such as WP Clean Up, too. This allows me to remove transients and any other unwanted data that has accumulated over time.

For some WordPress websites, I have reduced the number of days items stay in trash from 30 to 5. However, I usually do not take this step as I am in the habit of deleting items permanently.

To reduce the number of calls to my database, I install a cache WordPress plugin. This does not reduce the size of my database, but it puts less stress on my MySQL server and ensures my pages load quickly.

Do you optimize your database? If so, what steps do you take? Let us know in the comments below.

Image credits: Designmodo from www.flaticon.com is licensed by CC BY 3.0, Icon made by Freepik from www.flaticon.com is licensed under CC BY 3.0

]]>
http://premium.wpmudev.org/blog/optimizing-your-wordpress-database-a-complete-guide/feed/ 11
Rock Your WordPress Forms With Gravity Forms Conditional Logic http://premium.wpmudev.org/blog/rock-your-wordpress-forms-with-gravity-forms-conditional-logic/ http://premium.wpmudev.org/blog/rock-your-wordpress-forms-with-gravity-forms-conditional-logic/#comments Tue, 14 Oct 2014 12:00:00 +0000 http://premium.wpmudev.org/blog/?p=132972 Creating a contact form in WordPress can be a daunting proposition. But once you get into it, the form usually comes together OK – as long as it’s a simple form.

Unfortunately, many forms turn out to be complicated, messy, and boring. Wouldn’t it be great if you could create a form that’s super clean, and that shows only what’s necessary for each particular user? And how cool would it be if you could wow your visitors with a dynamic effect, as different parts of the form appear, disappear, and reappear as they select various options?

With Gravity Forms conditional logic you can do all that – and more. Conditional logic isn’t exactly simple, but Gravity Forms makes it easy.

One of the problems is that a form with lots of varying choices can quickly expand, and the form becomes messy, crowded, and unwieldy. Overcrowded forms turn people off, and sometimes site visitors will just give up and go away after a quick glance. That’s exactly what you don’t want.

Even though the phrase “conditional logic” reeks of “advanced mathematics,” all it really means (in this case) is a way to set up an interactive form so that when a user clicks something on your form, some other thing changes on the form. The user might click a checkbox and, as if by magic, a previously hidden form field might appear. And at the same time, some other unnecessary form fields might disappear.

Let’s look at how you can easily set up your forms with conditional logic on your website.

Conditional logic is cool.
Conditional logic is cool.

Magic? No. It’s Conditional Logic

Form ready to be worked on.
Form ready to be worked on.

I’ll assume that you already know how to set up a static form with Gravity Forms, so now I’ll show you exactly how to get conditional logic working for you.

Let’s say you’re setting up an online application form people can fill out to join your PC Club – something very similar to the example form we’ll work on in the upcoming paragraphs.

At the top of the form, applicants have to fill in the usual information, such as name, address, e-mail address, etc. Simple. But things get complicated in the payment area near the bottom of the form, as you start creating form fields with lots of checkboxes and options.

As you can see in the graphic to the right, there’s a heading, a checkbox, a pop-up, and an explanatory line of text for those who want to pay now – and below that, there’s a section for those who want to pay later. There are several lines of text, checkboxes, pop-ups, etc. in this section, and all these various type weights, pop-ups, etc. look messy, and can be confusing to the user.

If you think this isn’t a big deal, consider that the applicant has already filled in several text boxes before arriving at this point in the form, and in some forms, there might be even more areas coming up, with lots of choices before finishing the form. You don’t want user fatigue, and you want a clean-looking form, so it would be great if you could clean up this area.

That’s what we’re going to do.

Getting Into Condition(al)

First, it’s too bad you can’t hide that messy pop-up menu and the explanatory text in the “PAY NOW” area until they’re actually needed. But wait. You can do that – with Gravity Forms conditional logic. Here’s how:

Pop-up menu.
Showing the pop-up area to be hidden.
  1. In the “Form Editor,” move your mouse over the field named “PC CLUB MEMBERSHIP,” which contains the membership-choice pop-up and the explanatory text for those who want to pay now. This is the field you want to become invisible and stay invisible until after the user checks the box under “PAY NOW.”
  2. As you move your cursor over the field, you’ll notice that the field becomes highlighted. Click the flippy triangle (highlighted in yellow in the graphic above) to expand the field so you can choose options that will apply to that field.
  3. Skip the “Properties” tab, and click into the “Advanced” tab.

    Inside the Advanced tab.
    Inside the Advanced tab.
  4. Near the bottom of the tab area, click the “Enable Conditional Logic” option – and then new options will appear where you can choose exactly what you want to happen, as you can see in the graphic above. Remember that you want to keep this field hidden, and only show it when an applicant chooses the “I’ll pay now with credit card” option under “PAY NOW.” The two lines directly under the “Enable Conditional Logic” checkbox contain pop-ups that let you choose options to “fill in the blanks” in these two lines.
  5. In the first line, press and hold the first pop-up, and choose “Show” from the options that appear.
  6. Then press and hold the second pop-up, and choose “All” from the options that appear. The result is a conditional statement that reads, “Show this field if All of the following match.”
  7. In the second line, choose options from the pop-ups until you get a conditional statement that reads, “PAY NOW is I’ll pay now with credit card.” Translated into more conversational English, this tells the form to initially not show this area of the form, but then show it when the user clicks the “I’ll pay now with credit card” checkbox under “PAY NOW.”
  8. When you’re finished, click the flippy triangle to close the field.
  9. Of course, at some point you’ll have to click the “Update Form” button, and then click the “Preview” button in order to view the form preview to see a close approximation of what the form will look like once you install it onto a page or a post.
Form after first round of conditional logic.
Our form after the first round of conditional logic.

SPECIAL USER TIP: If you want to see what your form is really going to look like as you’re making adjustments – to get a better view than the preview – install the form onto a page or post, and then open it in a separate browser window. Keep that window open off to the side, and then every time you update the form, just refresh the page in that open window, and you will see the changes you made as they will actually look in your finished project.

I’ve used a yellow keyline in the graphic above to show you that the form is a bit cleaner, because now when the form first appears on the page, the pop-up and the explanatory line are no longer visible in the “PAY NOW” area. And those two elements will only become visible if the user checks the box in the “PAY NOW” area.

Nice But…

…You can do better.

The form is still crowded, and there’s still the possibility of confusion for the user because all the choices and explanatory text are still visible in the “PAY LATER WITH CHECK” area.

It’s distracting, but it won’t be a problem for much longer.

Conditional logic settings.
Conditional logic settings.

You want everything between the “PAY NOW” area and the “SUBMIT” button to disappear when a user chooses to pay with credit card in the “PAY NOW WITH CHECK” area. Here’s how to make that happen:

  1. In the “Form Editor,” move your cursor over the “PAY LATER WITH CHECK” form field, click the flippy triangle to expand the field.
  2. Get into the “Advanced” tab.
  3. As before, check to enable conditional logic.
  4. Set the conditional options as shown in the graphic above. Be sure you choose Hide this time, because you want to hide this field until it’s needed.
  5. Close the form field when you’re finished.
  6. Update the form, and view the preview or the actual page (as described above) to check your work.

You have now set the conditional logic so that this area of the form will be visible until the user checks the box in the “PAY NOW” area – at which time this area will disappear.

Do it Some More

Final form area.
The final form area.

Now do the same thing with the other form fields that you want to hide: Open the fields, choose the conditional logic option, set the conditional options, close, update, and view to check your work.

As you can see above, the user has clicked the “PAY NOW” option, and conditional logic has done its thing. Not only has it brought the membership-choice option into view, but it has caused all the now-superfluous “PAY LATER WITH CHECK” stuff to disappear. All the unnecessary distractions are gone.

But what if the user suddenly decides to not pay now, and wants to pay later, by check? No problem. Soon as the user deselects the credit-card option, all the “PAY LATER WITH CHECK” information reappears.

See for Yourself

Play the video below to see the magic for yourself. Areas of the form will disappear and reappear depending on what the user clicks.

We’ve only scratched the surface of conditional logic, but now that you understand how it works, it’s a sure thing you’ll think of lots more ways to use it.

Gravity Forms is a premium plugin, which means you have to buy it. It’s available under three different licenses, depending on how many sites you want to use it with. Gravity Forms offers great support for their product, they have lots of add-ons to extend the basic plugin, and their documentation is well above average. Check out their site to find out more.

We often over use “Cool!” when describing things we are think are, well, cool. But, really, when you try it for yourself, and see how Gravity Forms conditional logic can transform your own forms, you won’t be overdoing it one bit if you exclaim, “How cool is that?!”

Do you use conditional logic on the forms for your website? Let us know in the comments below.

]]>
http://premium.wpmudev.org/blog/rock-your-wordpress-forms-with-gravity-forms-conditional-logic/feed/ 6
How to Get Notifications When Users Edit A WordPress Post http://premium.wpmudev.org/blog/notifications-when-users-edit-wordpress-post/ http://premium.wpmudev.org/blog/notifications-when-users-edit-wordpress-post/#comments Sat, 11 Oct 2014 12:00:54 +0000 http://premium.wpmudev.org/blog/?p=132711 Running a multi-author blog comes with many responsibilities – managing spam registrations, reviewing posts created by different authors, keeping track of the edits made and monitoring their activity.

It can be a hectic task checking everything manually every day or even every hour. Luckily, there are plugin solutions to automate certain tasks to make them easier.

In this Weekend WordPress Project, I’ll show you how to automate one such task – dealing with multiple authors.

Notifications

Receive handy notifications any time someone edits a post on your website.

Configuring Automatic Email Notifications

The Email Post Changes plugin allows you set up automatic emails so that each time a change is made to a post or page, those changes are emailed to the users and email addresses you specify.

Download Email Post Changes from the WordPress Plugin Repository. Install and activate the plugin.

Now, go to Settings > Email Post Changes to configure the plugin.

Email Post Notifications

On the main plugin settings screen, check the enable box for “Send an Email when a post or page changes”.

Below that, you will find a list of email addresses that you want any notifications sent to. Generally, I would recommend only adding admin email addresses to this field.

If you check your personal email address more often than the email associated with the WordPress website, you can add email addresses that aren’t associated with website account. This will ensure you get notified more quickly.

Finally, select whether you want to be notified for only post modifications, page modifications or both.

The last option is if you want email notifications for only published items or also for items saved as drafts. Check this option if you want to avoid spam or have strict quality control guidelines.

For example, if you’ve edited and scheduled an article by a contributing author to be published on a specific day and the contributor logs in and make changes that you haven’t approved, if you’ve ticked this box you will receive an email alerting you to the fact the post has been altered. If you leave this box unchecked, the post would be published – complete with unapproved changes – and you would be none the wiser.

After you click “Save Changes” you will start receiving emails whenever modifications are made to posts or pages. The notifications will include the name of the author and the time the changes were made. A neat feature is that you will also see two versions of the post – a version before the changes and a version after the changes, with the changes highlighted.

Undo Changes Made By Contributing Authors

WordPress allows for post revisions, an in-built feature that automatically saves a post every 60 seconds. Every time a new auto-save happens, the old auto-save is replaced with the new one. Not to confuse this with drafts, this auto-save feature comes handy if your computer suddenly crashes or you forgot to save your draft.

You can see the number of revisions for each post on the post/page edit screen. Click the browse button besides the number of revisions.

A screen comparing the latest revisions will show along with a scrollbar on the top. Use the next button to navigate between the revisions. The name of the author who made the changes, at what time and if the revision is an auto-save or a draft will be displayed.

Email Post Notifications

Click “Restore This Revision” and WordPress will select it as your current draft to be published as scheduled.

Lastly, I recommended that you use Gmail’s SMTP servers to ensure that the emails don’t end up in your spam folder.

Have you installed this plugin on your blog yet? Let us know in the comments below.

]]>
http://premium.wpmudev.org/blog/notifications-when-users-edit-wordpress-post/feed/ 1
WordPress And Storyform, The Path To Better Long-form Stories? http://premium.wpmudev.org/blog/wordpress-and-storyform-the-path-to-better-long-form-stories/ http://premium.wpmudev.org/blog/wordpress-and-storyform-the-path-to-better-long-form-stories/#comments Fri, 10 Oct 2014 12:00:00 +0000 http://premium.wpmudev.org/blog/?p=132803 Despite the seemingly never-ending stream of cookie-cutter WordPress themes, if you look carefully enough you can find innovation in the delivery of WordPress-based content.

Joining the Aesop Story Engine in the long-form storytelling space is Storyform, a platform for creating magazines and photo-stories that provides tight integration with WordPress.

As we’ll find out though, Storyform’s slightly different approach often results in a headstrong solution that looks great but thinks it knows best and will often override your content flow.

Feature image
Storyform – Magazine and photo stories in one click?

When the future of WordPress is talked about, it’s often a conversation where the user platform is often considered to the only consideration. WordPress is fundamentally about delivering content and this strangely myopic view fails to take into account the ever-changing landscape of content form.

Sure, it’s a slow-burn but then how long have we been hearing that the future is mobile? Or even that print is dead (and yet, at 40 million, Australian magazines had a total readership for the 12 months to June 2014 that is 1.8 times the size of the country’s population)?

One of the most significant content trends is long-form. Support for long-form on WordPress has been slow to get going and for a long time the only major player was Nick Haskin’s recently-updated Aesop Story Engine (although Brenda Barron has some good suggestions for a long-form toolkit).

Now the ASE has company with Storyform, a long-form delivery solution that is not exclusively WordPress but is tightly integrated via a plugin, that promises to “[let] you create rich, immersive Storyform magazines with just a one click”.

A Simple Way To Build Stories?

Cover shot of Storyform's website
Storyform and Aesop Story Engine – two disimilar peas in a pod

Not that Storyform has much in common with the ASE. Storyform has no components or shortcodes to configure but uses a combination of semantic markup and positioning. This means that it feels a little underpowered compared to ASE but requires only a minor deviation from the standard post creation process.

For example, if an image or video is placed at the top of the post then it will be used as the background for the cover page. The first, and only the first, H2 heading that precedes the first paragraph in the post will be used as the sub-title on the cover page.

Screenshot of the post editor screen showing the video and subtitle which will form the cover page
No shortcodes here, just reliance on semantic markup and content flow

Pull quotes can be added by highlighting text and then clicking on the solitary Storyform-specific icon that has been added to the Visual Editor toolbar. In Visual mode, the text is highlighted in yellow (in Text mode it is enclosed in a span tag with a class of pullquote).

And in keeping with the simple approach, text overlays are achieved by specifying the text in the existing caption field and using a new icon that appears when you click on an image in the post editor to draw the placement of the caption.

It all feels like a normal WordPress post creation process which is not something you could say about the ASE although version 1.1′s use of styling the shortcodes makes a considerable improvement. And because the markup is basically semantic HTML (other than the standard WordPress shortcodes for video and images with captions) it’s not a complete disaster if you decide to stop using the plugin.

However, it’s when you start viewing your stories that you start to realize that you’ve traded something for all that simplicity: control.

Flying By The Seat Of Someone Else’s Pants

In order to use Storyform in WordPress, you need to sign-up, get an API key and enter this into the plugin’s settings. Why? Because it turns out that the plugin is not self-contained. Whilst the basic javascript, template and CSS are included, the specific files that belong to the theme selected in the post edit screen are supplied by the Storyform website.

Presumably this is to retain some control over Storyform’s use, perhaps to make expanding the stable of themes (there is only one, Puget, currently) easier and more than likely it’s to be able to add some form of monetization down the track. But the introduction of another potential single point of failure in delivering site content – you’ve got to rely on those Storyform files being constantly available – may well cause a few WordPress owners to pause for thought.

It also seems unnecessary. The ASE seems to have found a working model for monetizing this kind of product (give away the basic functionality and charge appropriately for extensions and themes) and it does make you wonder why Storyform didn’t go down the same path and allow all the necessary files to reside on the one domain.

When you initially preview your stories though, those concerns are quickly shuffled to the back of your head. There’s your full-page cover image, your title and subtitle, a navbar that appears top right that includes social media shares and a home link, an elegant progress bar and down in the bottom right-hand corner, a page counter that turns over as the Storyform javascript engages in content layout alchemy.

And it is alchemy.

I’ve got no idea how Storyform takes a virtually standard WordPress post and transform it into a multi-column, horizontal-scrolling article with a true magazine look-and-feel. Initially, this ignorance is irrelevant because the output looks so good and took ludicrously little effort to create. But then you start to realize that this magic comes at a cost.

Pages generated by Storyform on a desktop
From WordPress post to magazine article – desktop (click for bigger view)

You have no real idea, no real control over the layout process. Whilst it is consistent across the major browsers (disclaimer: I tested with Chrome, Firefox and Safari but not IE), Storyform’s decisions are highly sensitive to the size of the browser window. Often only a few pixels difference in one dimension is enough to significantly alter the layout, the page count, even where your images, video and pull quotes are inserted into the post.

Sometimes just refreshing the page can alter the layout.

How big a cost is this unpredictably? That will depend on the type of articles that you are creating. If your images are fairly standalone then perhaps the randomness of their location in the piece will not be too much of an issue. If you are a stickler for layout or need an image in a specific location then Storyform could drive you mad.

That pull quote and Spider-Man image on page 3, for example, were not that close together in the actual post – so you’ve got to trust that it has something in common with the image. And the Superman logo was actually at the end of the post.

It may also depend on the platform that you are targeting with your Storyform content. Storyform works and looks stunning on tablets and here you would have the opportunity to play with your post’s content flow to have at least some influence on the final layout.

Composite image of the pages created by Stroyform on a tablet
Same post on a tablet has 2 extra pages! (Click for bigger view)

As you can see the layout changes a fair bit when viewed on a tablet. The cover image becomes fullscreen as does the photo of the Golden Gate Bridge (most likely due to not using a big enough image for fullscreen on a desktop). That Superman image is even further away from the end of the article.

You’ve also got to be content with the design. I just wanted to change the look of the image overlays but a combination of the main theme files being delivered remotely and the plugin’s dequeuing of existing styles (which neutered the Custom CSS plugin I was trying to use) made overriding the styles very difficult.

And whilst I’m griping, I would prefer the home link in the post navbar to go to the cover page of the article rather than the home page of the site.

Storyform: A Trust Fall Exercise

There is a lot to like about Storyform. It requires very little deviation from the normal post creation process and with no complicated shortcodes to embed it will work just as easily with existing content as it will with new posts.

Above all, it looks stunning, be it desktop or tablet and navigates smoothly (both mouse and gestures). Actually tablet is where Storyform performs best: horizontal scrolling seems much more appropriate on this platform and you have more influence on the layout.

But Storyform is not for the layout pendant. It will routinely override the original content flow and place images, video and pull quotes where it thinks they should go and the window-size sensitive nature of the layout engine produces considerable variability in the results.

And that remote loading of the themes does introduce a single point of failure into your content delivery. If, for whatever reason, Storyform is unable to deliver the theme then you are left high and dry.

Storyform is, perhaps, the ultimate content trust fall exercise. You publish your post, you lean back and you hope that Storyform will catch you. If you are a trusting soul then Storyform is well worth a play.

]]>
http://premium.wpmudev.org/blog/wordpress-and-storyform-the-path-to-better-long-form-stories/feed/ 0
Integrating Twitter into WordPress: The Ultimate Guide http://premium.wpmudev.org/blog/integrating-twitter-into-wordpress-the-ultimate-guide/ http://premium.wpmudev.org/blog/integrating-twitter-into-wordpress-the-ultimate-guide/#comments Tue, 07 Oct 2014 12:00:00 +0000 http://premium.wpmudev.org/blog/?p=132375 Twitter is one of the most popular social media networks online and one of the biggest sources of traffic for many websites. If one of your articles goes viral on Twitter, you could receive hundreds or even thousands of visitors in a short space of time.

The more you integrate social media into your website, the more likely it is that your visitors will share your content using social media. Therefore, by integrating Twitter into your website, you can tap into the huge traffic potential that it offers.

I recently shared with you a collection of the best social media WordPress plugins. Rather than simply list Twitter plugins that are available to you, in today’s article I would like to show you how other blogs are integrating Twitter, and other social media networks, into their website designs. This will help you understand how others are maximizing the traffic they receive from social media. I hope you find it useful :)

* While this article does focus on Twitter, due to the nature of social media, a lot of examples and suggestions incorporate other social media networks :)

Guide to Twitter
Find out how other sites are integrating Twitter and check out our WordPress solutions.

Integrating Twitter and Other Social Media Follow Buttons

If you can turn a one-time visitor into a Twitter follower, you can display all of your tweets on their Twitter stream. This simple act of gaining another Twitter follower should not be underestimated. It could be the difference between someone forgetting about your website and them returning to your website on a daily basis for many years.

An increase in Twitter followers can greatly increase traffic due to retweets. This also leads to more people following you on Twitter.

Top websites understand this, which is why they prominently display Twitter follow buttons in their website headers. However, they all do it in different ways.

The Header Area

Huffington Post has follow buttons for Twitter, Facebook, and Google+, directly above the main navigation menu. Their website design is quite crowded due to the number of advertisements and featured posts that are displayed. Yet the sharing buttons can be seen at the top of every page of their website.

Huffington Post
Huffington Post displays official social media follow buttons above their main navigation menu.

The ever popular I Can Has Cheezburger? displays a Facebook and Twitter icon at the top right of every page. These icons are actually part of the same image. When a visitor scrolls over the image, a drop down menu will appear with official follow links to Twitter, Google+, and Facebook.

I Can Has Cheezburger?
I Can Has Cheezburger? displays official follow buttons in a drop down menu.

Both Huffington Post and I Can Has Cheezburger? have integrated official follow buttons into their header. The code for these follow buttons can be downloaded from the links below:

* Note that official follow buttons for other social media networks can be found on their respective networks.

Once you have the code for official sharing buttons, you can integrate the buttons into the desired area of your website header by modifying your theme’s header.php template.

A number of WordPress plugins are available that allow you to insert official follow buttons into your website. WPsite Follow Us Badges is one example. If your WordPress theme has a widget area in the header, you could use a plugin such as this to add official follow buttons directly into your header.

Twitter Follow Code
Twitter offers two sizes of follow buttons.

Boing Boing have taken a different approach. They have an item in their main navigation menu entitled “Follow Us”. When you hover over this menu item, links to Twitter, Facebook, and Tumblr, are displayed.

Boing Boing
Boing Boing use their main navigation menu to promote their social media accounts.

DailyTekk uses the same technique as Boing Boing and displays links to Twitter, Instagram, and Pinterest, in the main navigation menu.

Unfortunately, these links are hidden in the subscribe menu. Visitors need to click on Subscribe and then scroll down to Social to see their social media links.

DailyTekk
DailyTekk has not made promoting social media links a priority.

Adding links to your social media accounts into your main navigation menu is simple. Using the WordPress menu system, all you need to do is add a custom link and then drag it into the desired menu.

By using CSS, you can improve the look of the social media links in your navigation menu. For example, for Twitter you could make the background light blue and display the famous Twitter bird mascot.

Twitter Navigation Link
The WordPress menu system is a simple and effective way of promoting social media profiles.

Rather than display social media follow links above or below the main navigation menu, technology news blog TechCrunch have integrated theirs into the center of the navigation menu area. The main menu links are displayed at the left hand side and a search box is displayed at the right hand side; however the follow buttons get priority in the center.

TechCrunch
TechCrunch’s social media follow buttons become colorful when you hover over them.

Integrating social media follow icons into your header can be done in one of two ways:

  1. One option is to download a social media icon set and upload the appropriate icons to your website. The CSS hover selector can be used to change the color of icons when a visitor hovers over one of your social media follow buttons. Using your own icon set is a great option as it allows you to choose the design you want for your icons i.e. you are not limited to what icons are included with a plugin.
  2. Another option is to use a WordPress plugin. If your header has a widget area, you might prefer the simplicity of simply dragging and dropping a social media follow plugin into your header area. There are a lot of WordPress plugins available that allow you to do this.

The Sidebar

As I am sure you are all aware, one of the most popular places to promote a social network such as Twitter is the top of the sidebar. This is the area in which a large majority of blogs promote their social media accounts.

When social media following buttons are integrated directly into the header area, they are usually added around other important design elements such as the logo, a 728×90 advertisement banner, and navigation links. The sidebar offers a little more room, therefore buttons can be larger and you can use text if you wish. Many blogs use this additional space to promote how many followers they have.

As you can see from the top of the sidebar to the right hand side, WPMU DEV promotes how many followers and members it has. This social proof can encourage more people to follow.

WPMU Dev
WPMU DEV shows off how many followers it has.

The number of Twitter followers you have can be retrieved using the Twitter API and displayed as text. To do this, you need to add a custom function to your theme’s functions.php file. Similar functions can be created for other social media networks that you want to advertise follower counts.

A simpler approach to displaying counts is to use a WordPress plugin. There are a lot of good options available, including free counter solutions such as Social Media Followers Counter and Social Count Plus; and premium solutions such as SocialFans and SocialBox.

Social Count Plus
Social Count Plus allows you to display nine different counts.

Promoting the number of followers you have is not always necessary. Displaying basic social media icons on your sidebar can be just as effective.

American journalist Jeff Jarvis has integrated four social media icons on his website BuzzMachine. It fits well with his minimalist blog design.

BuzzMachine
Jeff Jarvis displays social media icons under his photograph and name.

As I noted earlier, there is an abundance of social media follow plugins available on WordPress.org and on other WordPress marketplaces. This includes:

You will sometimes see a website displaying their main social media follow buttons below the fold. For example, on a WordPress website the follow button for Twitter may be displayed in the 4th or 5th widget.

I am of the opinion that the main social media follow area should always be displayed prominently above the fold, however on small personal blogs it is less of an issue as there is less advertisements and other distractions in the website design.

The Footer

The footer is another place in which most websites display a link to Twitter and other social media accounts. If you scroll down to the bottom of WPMU DEV, you will our social media links displayed next to a search bar:

WPMU DEV Footer
We display social media links at the bottom of every page.

Technology blog Engadget has a well-designed footer that displays important website links, social media accounts, their apps, and their newsletter.

Engadget Footer
Engadget also uses the footer to promote their social media accounts.

Even the WordPress.org website uses the footer area to display official follow buttons for Twitter and Facebook. In fact, it is the only part of their design that follow links are displayed. They are completely absent from the header and sidebar.

WordPress.org Footer
WordPress.org displays two small follow buttons at the bottom of their pages.

The majority of WordPress designs have a widget area in the footer, therefore adding follow buttons to this area is very simple. You can insert social follow buttons using the WordPress HTML widget or by using a social media follow widget. You could also use simple text links in your footer instead of using graphics.

WPMU DEV Follow Buttons
Social media follow buttons can be integrated into other areas of your website. For example, WPMU DEV displays follow buttons underneath blog posts.

It is clear that different websites promote social media networks such as Twitter in their own unique way. I believe social media accounts should be displayed prominently in the header area or at the top of the sidebar. The footer is a good place to display a second link to your social media accounts.

Ultimately, the decision is yours, but please understand the benefits of placing follow buttons in a prominent position in your website design.

Displaying Tweets on Your Sidebar

A great way to promote your Twitter account is to display your latest tweets on your website. I have seen a few websites doing this in the footer, however I believe the sidebar is by far the most effective place to display your latest Twitter posts.

Food blog Chocolate & Zucchini displays its latest tweets using the official Twitter widget. In addition to tweets, the widget also displays a Twitter follow button.

Chocolate & Zucchini
Chocolate & Zucchini use the official Twitter widget.

You can create a new widget in the Twitter widget settings page on Twitter. The widget can be customized in a number of ways.

You can choose to exclude replies and auto expand photographs. You can also define the height of the widget, change the light theme to dark, and change the link colors.

By default, the widget will default to your main timeline. However, if you wish, you can display tweets you have favorited, lists, keywords, or collections.

Create a Twitter User Widget
The official Twitter widget tool is very easy to use.

The fashion blog The Sartorialist displays its last three tweets and a follow link underneath. The notepad style background would not fit in with a lot of other website designs, however it works well with the minimalist design of The Sartorialist.

The Sartorialist
The Sartorialist is a fashion blog that displays its latest tweets on the sidebar.

Custom functions can be created for retrieving your latest tweets from Twitter. You can find more information about this on the Twitter API information page.

As you would expect, instead of creating custom functions, most WordPress users use a WordPress plugin to display their latest tweets. There are a number of great solutions available including:

Most Twitter plugins require you to enter four unique Twitter keys. These can be acquired from Twitter Application Management.

Juiz Last Tweet Widget
Juiz Last Tweet Widget offers three unique styles for your widget.

If you are active on Twitter, displaying your latest tweets can be a great way of encouraging more people to follow you. I would advise against displaying your latest tweets if you only use Twitter to update followers of new articles you have published. As the tweets would display the same information as a recent posts widget.

Integrating Social Media Sharing Buttons Into Your Website

Sharing buttons are vital if you want to tap into the huge traffic that social media offers. This is why all successful websites integrate sharing buttons into key areas of their design.

Pete Cashmore’s online magazine Mashable is a great example of this. His website design has been customized so that shares on Twitter and Facebook are maximized.

The total number of shares are displayed above the content area with links to Twitter and Facebook. If the visitor clicks on the + symbol, additional sharing links for Google+, LinkedIn, StumbleUpon, and Pinterest, are displayed (these additional links can be minimized with the – symbol). A graph is also displayed that tracks the popularity of the article over time.

At the left hand side of the main featured image are four more sharing links: Facebook, Twitter, Google+, and Pinterest.

Mashable Before Scrolling
Mashable place an emphasis on Facebook and Twitter.

Mashable ensures that visitors can easily share its content. When you scroll down the page to read the article, the header changes so that sharing buttons are displayed at all times.

Mashable After Scrolling
Social media sharing buttons are displayed at all times.

Here on WPMU DEV, social media sharing buttons are displayed using a floating bar. This is powered by the WordPress plugin Floating Social.

The plugin supports Twitter, Facebook, Google +, Reddit, StumbleUpon and Del.icio.us. The bar can be styled to match your WordPress theme. It is also responsive so will move inline if you change the size of your browser window.

WPMU DEV
WPMU DEV displays a floating social media sharing bar at the left hand side of pages.

The most common place to display social media sharing buttons is above and below the content area. Some websites only display sharing buttons in one area; however I feel there are benefits to displaying buttons before after an article as it will increase the change of your article being shared.

Official Twitter Share Button
The official Twitter share button can be customized easily.

Official sharing buttons are available for all social media networks. The official share button for Twitter can show the number of shares of a particular page.

Other official social media sharing buttons also display the total number of shares. The code for official sharing buttons can be found at the following pages:

On my own blog, I am using a WordPress plugin entitled Easy Social Share Buttons for WordPress.

I was inspired to use the plugin after seeing how my friend Brian Jackson uses the plugin on his website Okay Marketing. As you can see from the screenshot below, Brian has integrated the sharing buttons into his newsletter subscription box.

Easy Social Share Buttons
Easy Social Share Buttons supports over 20 social media networks and has 12 built in templates.

WordPress.org has a large number of social media sharing plugins. Once installed, sharing buttons can be automatically inserted into key areas of your website including posts, pages, archives, custom post types, widget areas, and floating at the side of pages.

Below is a small selection of social media sharing plugins you may want to consider:

Social Sharing by Danny is a solution I have used in the past many times. I love its minimal style.

Social Sharing by Danny
Social Sharing by Danny is a beautiful sharing solution with a minimal design.

Be warned that many social media related plugins and solutions can increase your page loading times. This is particularly true for social media sharing plugins.

After you install a new social media button or widget on your website, test the speed of your website using a benchmarking service such as GTmetrix or Google PageSpeed.

It is also in your interest to check the markup validity of your website using the W3C Markup Validation Service; as many plugin developers do not adhere to standard coding practices.

Final Thoughts

I hope this article will inspire you to integrate Twitter and other social media websites into your website design. As you have seen, there are a number of ways in which you can integrate social media into your website.

You may want to consider hiring a developer to help you achieve what you want; as a custom solution gives you full control and allows you to be creative and do something truly unique. Official buttons and widgets available from Twitter and other social media networks are also a good option.

With so many social media plugins available to WordPress users, there is bound to be a good solution available that fits your needs. So be sure to test a few different options before settling on a particular solution.

How do you integrate Twitter into your WordPress website? Please let us know in the comment area below.

]]>
http://premium.wpmudev.org/blog/integrating-twitter-into-wordpress-the-ultimate-guide/feed/ 5
Add WhatsApp To Your WordPress Website And Double Your Traffic http://premium.wpmudev.org/blog/add-whatsapp-to-wordpress/ http://premium.wpmudev.org/blog/add-whatsapp-to-wordpress/#comments Mon, 06 Oct 2014 12:00:50 +0000 http://premium.wpmudev.org/blog/?p=132625 With mobile usage on the rise, ensuring your website is mobile-friendly is a no-brainer.

According to Smart Insights, mobile usage is overtaking fixed internet access, while 91% of mobile internet users go online to socialize.

So it’s no wonder smartphone apps like WhatsApp have taken off. WhatsApp is now the most globally popular messaging app with more than 600 million users.

In today’s post we’ll look at how to integrate WhatsApp with your WordPress site to maximize engagement and make it easier for your visitors to share your content.

WhatsApp
Integrate WhatsApp with your website and maximize your shares on social networks.

What is WhatsApp and Why Should I Use it?

If you don’t already have WhatsApp installed on your smartphone, you probably will soon.

WhatsApp is a cross-platform mobile messaging app, which allow you to exchange messages without having to pay for SMS.

In addition to text messaging, the app lets users send each other images, video, and audio messages, as well as their location using integrated mapping features.

Many sites have already begun displaying a WhatsApp button. The button allows visitors to quickly send or share an article with their friends in real time while they are reading the article.

BuzzFeed was an early WhatsApp adopter and, according to conversations of Re/Code with BuzzFeed President Jon Steinberg, the site’s shares on iOS devices doubled while shares on Twitter also great.

“Every time we looked at WhatsApp’s numbers, it blew us away,” said Mr Steinberg. “We knew last April this was a huge social network and have become increasingly obsessed with it.”

The difference between Twitter and WhatsApp is that WhatsApp sharing is private, i.e. it works as if you’ve sent an email to a friend and it can make anything go viral if you’ve got loyal and engaging readers.

We’ve explored the potential of displaying a WhatsApp button to your device users. Let’s look at how to implement it.

WhatsApp with the Mobile ShareBar Plugin

Download and install the Mobile Share Bar plugin, and then activate it.

Go to Settings > Mobile ShareBar to configure the plugin.

Mobile sharebar settings for whatsapp

The configuration is pretty simple. You can edit the sharing texts if you want but I recommend keeping them as they are. You can add your bit.ly credentials to automatically shorten URLs during sharing.

Under the Display Settings option, you can select the position to display, whether at the top or bottom of the page and select which pages to show the buttons – front page, pages, posts, categories, etc.

Under Troubleshooting and other Stuff, check the options “Display Mobile ShareBar automatically” and “Show Everywhere”.

Finally, save the changes and clear your cache.

The only limitation is  the WhatsApp button works only on iOS devices for now.

WhatsApp button display

Now it’s time to verify if the button is working, so open your website on an iOS device and check it out.

WhatsApp with the AddToAny Plugin

Download, install and activate the AddToAny plugin.

Go to Settings > AddToAny to configure the settings.

AddToAny WhatsApp settings

Select large or small icons as you need, and click “Add/Remove Services” to add the buttons you want along with the defaults given for Facebook, Twitter and Google+.

Scroll down a little and you’ll find the WhatsApp service. Click on it to add WhatsApp and configure the display options according to where you want the button to display – at the bottom or top of the page.

There is also an option to use a floating social sharing bar at the side of your page that displays as you scroll down the article.

You can also use custom icons to suit the design of your website.

Finally, save the changes and check from your iOS device to see if the WhatsApp button is working.

What I like most about AddToAny is that it integrates with Google Analytics so you can track the amount of traffic you’re receiving from sharing analytics.

Have you integrated WhatsApp with your WordPress site? Let us know in the comments below.

]]>
http://premium.wpmudev.org/blog/add-whatsapp-to-wordpress/feed/ 16
A Thoroughly Biased Guide to the Plugins You Need to Get WordPress Multisite Up and Running http://premium.wpmudev.org/blog/guide-to-plugins-you-need-wordpress-multisite/ http://premium.wpmudev.org/blog/guide-to-plugins-you-need-wordpress-multisite/#comments Wed, 01 Oct 2014 12:00:00 +0000 http://premium.wpmudev.org/blog/?p=131889 Multisite is a fantastic feature of WordPress that allows you to easily create a network of websites and crown yourself “Super Admin.”

But once you’ve activated Multisite for your WordPress install and set it up, what next?

In this post we’ll look at the best plugins – all created by WPMU DEV – to help you manage your network. Each of the plugins below will extend the functionality of a basic Multisite install, adding features such as domain mapping, cloning, SEO, and analytics.

Pro Sites

pro-sites

Pro Sites lets you create your own profitable blog or site hosting network, just like our sister site Edublogs.org or WordPress.com. A great example of Pro Sites in the wild is Webinly.

With Pro Sites, you can offer and charge your users for access to features like premium themes, plugins, extra storage, domain mapping, better support and advertising removal.

Other features include rich statistics to help you make informed decisions about your network, front-end checkout, membership levels, and BuddyPress integration.

Infinite SEO

infinite-seo

Infinite SEO is a powerful search engine optimization plugin built to support Multisite.

It features comprehensive sitemaps, title and meta data optimization, automatic sitewide linking, and complete Moz integration.

The neat thing about this plugin is that it allows an incredible amount of control on both a post/page and global level, so you can control what the world sees.

Anti-Splog

anti-splog

Anti-Splog is an absolute must-use plugin for Multisite users.

You’ll need a WPMU DEV API key in order to use the Anti-Splog service, which allows you to limit the number of signups per IP address per 24 hours, human tests (reCaptcha, random questions etc), pattern matching so you can check site domains, titles or usernames against a defined set of regular expressions.

There’s also a free version of this plugin if you want to take it for a spin before buying the premium version.

Domain Mapping and Multi-Domains

domain-mapping

Domain Mapping and Multi-Domains are both fantastic plugins for managing your network domains.

Let’s start with Domain Mapping. This plugin provides an simple way to point multiple domains to your primary hosting account. If you’re a Multisite admin, this means you can map any domain to your network, giving you the option to offer domains to your users. Mapping domains can be fiddly, but Domain Mapping makes the whole process a straightforward affair. I even wrote a post recently on how to set it all up.

Multi-Domains, on the other hand, allows you to run an unlimited number of different domains from on Multisite installation. This allows you to easily create blogs at alternative domains to your main site, or give your users the options to choose the domain they prefer.

You can even combine Domain Mapping and Multi-Domains for even more control over your URLs. The plugin combo will let you map individual blogs set up to different domains to their own dedicated URLs.

New Blog Templates, Cloner and Multisite Content Copier

Copying suite

New Blog Templates, Cloner and Multisite Content Copier are just three of the plugins that make up our Multisite Copying Toolkit, a suite of tools that cover the bases when it comes to copying data from one site to another, and even multiple destinations.

New Blog Templates helps you ensure that every new site is created using a pre-defined set of content, themes, plugins and settings by specifying an existing site to be used as a template. Multiple templates can be created and categorized to build a library of templates to be selected by site admins and network members when creating a new site. As the templates are based on existing sites, the site can be updated and any subsequent new sites will incorporate those changes.

Cloner, the latest tool in the suite, lets you choose your own combination of nine site components, or all of them for complete site replication, and get a clone of any site on the network (except the root site). Clone a site for troubleshooting or staging, give users from one site access to another or simply copy content (including attachments) from one site to another in just a few clicks.

If you want to copy posts, pages, custom post types, users and even plugins to a single site, all sites or a group of sites on your Multisite network, then Multisite Content Copier is what you need. When copying posts and pages, this plugin ensures that all images are also copied across, making it a perfect tool for syndicating content from one site to any number of others. It also integrates with New Blog Templates, allowing Super Admins to also update the templates used for the creation of new sites.

Snapshot

snapshot

Snapshot is Time Machine for your website.

This backup plugin lets you schedule a backup of a single install, a single site on a Multisite network or your entire Multisite network at an interval of your choosing from immediately to once-a-month.

You can create multiple backup jobs and the data can be stored locally or preferably on a host of external service providers including DropBox, Amazon S3 and Google Drive.

Ultimate Branding

ultimate-branding

Ultimate Branding lets you white-label the entire WordPress admin area, from the admin bar to the dashboard.

Removing all traces of WordPress from your site or Multisite network has many advantages. Having WordPress branding sitting alongside your own can cause unnecessary confusion for your users. The login page is just one example where WordPress pushes your branding to one side.

With Ultimate Branding, you can replace the login logo with your own company logo, update your favicon, help content and dashboard widgets, even replace the footer text.

Google Analytics +

google-analytics

Our Google analytics plugins lets you track and view your statistics for an individual post, a site or an entire Multisite network right from your WordPress dashboard.

The plugin displays beautiful charts and graphs in your dashboard and in the Post Editor.

This plugin is also compatible with Pro Sites, which means you can offer Google Analytics as a premium feature on your Multisite network.

Reader

reader

Reader is a recent addition to our stable of plugins. This plugin turns your Multisite network into a community by adding Tumblr, WordPress.com and Edublogs-style “follow” features to your sites.

Modelled on Google Reader, you’ll find many great features similar to Feedly and the WordPress.com reading experience.

But more importantly, Reader encourages your users to engage with sites across your network, without having to leave their site.

Even More Multisite Plugins

I’ve highlighted just a handful of the best plugins you need to get Multisite up and running. There are plenty more that I’ve left out because we have so many fantastic plugins for Multisite! But there are a few more that deserve honorable mentions.

Recent Network Posts

Allows you to display a list of recent posts from across your Multisite network on your main site.

Blog & User Creator

Allows you and your users to batch create gazillions of blogs and/or users, while setting passwords, urls, titles and more.

Recent Network Posts

Lets you display a list of recent posts from across your Multisite network on your main site.

User Reports

Create reports of all user activity across an entire Multisite network.

Add Existing Users

Allows you to bulk-add existing users to a Multisite network and even set roles.

Batch Create

Create multiple sites and users automatically by uploading a CSV or XLS file.

What Multisite plugin can’t you live without? Let us know in the comments below.

]]>
http://premium.wpmudev.org/blog/guide-to-plugins-you-need-wordpress-multisite/feed/ 9
Top WordPress Custom Fonts Plugins Reviewed http://premium.wpmudev.org/blog/top-wordpress-custom-fonts-plugins-reviewed/ http://premium.wpmudev.org/blog/top-wordpress-custom-fonts-plugins-reviewed/#comments Mon, 29 Sep 2014 12:00:00 +0000 http://premium.wpmudev.org/blog/?p=132234 These days we’re spoilt for choice when it comes to web typography, the only issue being how to actually add custom fonts to your WordPress site.

Digging around in code and messing with files can be fiddly. Luckily, there are plenty of great options if you want to change your site’s fonts, from simply adding a new font to see on elements like your header, to adding colors changing font sizes.

In this post, I’ve reviewed six of the best plugins that can help you get custom fonts set up easily on your WordPress site.

In this post, I’ve rounded up and tested the six best custom font plugins, scored them, and given each a brief description so you can make up your own mind. Each of the plugins has been scored on usabilty, user interface and the ability to upload custom fonts.

Use Any Font

Use Any Font

WPMU Rating

4.15/5

The Good

  • Ability to upload multiple custom fonts
  • Ability to assign fonts to elements such as headers, paragraphs and blockquotes

The Bad

  • Wonky user interface with instructions at the bottom of the settings screen rather than the top

Our Verdict

  • Usability: 4.5/5
  • User Interface: 3/5
  • Upload Fonts: 5/5
  • Overall: 4.15/5

The Bottom Line

Use Any Font is incredibly easy to use. Signing up for an API key is quick and painless. While this plugin offers basic options, the ability to upload your own custom fonts is a fantastic feature.

Use Any Font Review

Use Any Font is marketed with the tagline “Embed any font in your website.” A simple enough promise that describes exactly what this plugin delivers.

After installing the activating this plugin, you’ll need to sign up to the developer’s website in order to get an API key.

Use Any Font
You’ll need to sign up for an API key to use this plugin.

The developer, Dinesh Karki, asks for donations in increments up to $100 for using his plugin. Any donation over $10 will get you unlimited activation and unlimited font conversion for a lifetime. If you’re tight with cash and want the plugin for free (which I suppose isn’t asking too much since it’s available to download in the WordPress Plugin Repository), then you’ll only get a single activation and a single font conversion. So you pretty much get your arm twisted into making a contribution since who wants a plugin for just a single font?

Use Any Font
If you want access to more than one font you’ll need to make a donation to the plugin’s developer.

Once you’re API key is sorted, you can get on with uploading your own fonts. The plugin has one settings screen, which can be found in Settings > Use Any Font. From here, you can upload fonts, assign fonts to elements like headlines, paragraphs and blockquotes, and add custom CSS.

Dinesh seems to use his own service for converting your fonts to web fonts, but they do come out clear and the anti aliasing is pretty good.

Use Any Font
The plugin displays clear fonts on the front-end of my site.

While the user interface is fairly easy to get around, it’s not all that attractive, and it doesn’t make any sense that the instructions are at the bottom of the settings page and not at the top.

There are detailed usage instructions (not that you’ll probably need them) as well as support available on the developer’s website.

This is a fantastic plugin if you’re looking to quickly and easily add custom fonts to your website.

WP Google Fonts

WP Google Fonts

WPMU Rating

3/5

The Good

  • Easy to use
  • Access to a huge number of Google fonts

The Bad

  • Unable to preview fonts
  • Unable to upload custom fonts

Our Verdict

  • Usability: 5/5
  • User Interface: 3.5/5
  • Upload Fonts: 0.5/5
  • Overall: 3/5

The Bottom Line

WP Google Fonts couldn’t be more simpler to use. This plugin places the entire Google Font Directory at your finger tips, allowing you to choose from the vast number of fonts available for free. Unfortunately, this fantastic plugin loses points for the inability to upload custom fonts.

WP Google Fonts Review

WP Google Fonts makes adding custom fonts to your site really easy. After installing and activating the plugin, go to the settings page (located at Settings > Google Fonts) where you can add new fonts and assign each of them to elements such as headlines, blockquotes, paragraphs and lists. You can also add custom CSS.

WP Google Fonts
WP Google Fonts offers an easy to use settings screen.

Cleverly, the plugin limits users to just six custom fonts, not only so you don’t use up too many resources, but also so your website doesn’t look ridiculous with different fonts for every element.

WP Google Fonts options
Customise how and where your fonts display.

Unfortunately, you can’t preview what fonts will look like on the front-end before saving them. Instead, you’ll have to search through the Google Font Directory to find the fonts that you want before switching back to the plugin to input and save your settings.

Overall, this plugin gets top points for simplicity and ease of use.

Easy Google Fonts

Easy Google Fonts

WPMU Rating

3.15/5

The Good

  • The ability to preview custom fonts in the Customizer before saving them
  • Powerful customization

The Bad

  • Confusing settings page. It’s not clear that you need to use the Customizer

Our Verdict

  • Usability: 4.5/5
  • User Interface: 4.5/5
  • Upload Fonts: 0.5/5
  • Overall: 3.15/5

The Bottom Line

Easy Google Fonts gives you incredible control over how you integrate custom fonts your on your website. It’s easy to use (once you work out you need to use the Customizer) and you can tweak the font on just about every element on your site.

Easy Google Fonts Review

After installing and activating this plugin, the natural thing to do is head over to the settings page, which you’ll find at Settings > Google Fonts. The settings page is confusing at best. Where are all the fonts? What are you supposed to do?

Easy Google Fonts
The Easy Google Fonts backend.

There’s a noticeable lack of instructions, so I went back to the plugin download page to try and work out what I needed to do.

It turns out, you use the plugin from the Customizer. Nifty, right? This allows you to preview fonts on your website before you save them.

The plugin gives you incredible control over how you integrate fonts with your website. For each element on your site, you can choose a different font, specify its weight, decoration and any text transformation. You can also add colors, a background color, font size, line heigh and letter spacing. And not only that, you can also edit the positioning of your font, including margins and padding.

Easy Google Fonts
Use the Customizer to control your fonts.

Now back to the settings page. You can create font controls, which allow you to add specific CSS selectors that you want to control or even override. For example, you may want to bunch all your headline elements (h1, h2, h3 etc) into one font control called “Headings,” or put your body text elements (body, p, blockquote) into a font control called “Body Text.”

This plugin is perfect for anyone looking for an easy and powerful way to use Google fonts in their theme without having to mess around with code.

Typekit Fonts for WordPress

typekit

WPMU Rating

1.65/5

The Good

  • Ability to add custom CSS rules

The Bad

  • You need to sign up for an Adobe/Typekit account if you don’t already have one.
  • Inability to add and manage custom fonts from within the plugin

Our Verdict

  • Usability: 1.5/5
  • User Interface: 3/5
  • Upload Fonts: 0.5/5
  • Overall: 1.65/5

The Bottom Line

This plugin has been designed with Typefit users in mind. If you’re looking for a straightforward solution for adding custom fonts to your site, I suggest you check out some of the other plugins mentioned in this article.

Typekit Fonts for WordPress Review

After reviewing many solid plugins for this round-up, Typekit Fonts, for me, was a bit disappointing.

I was expecting the ability to upload fonts and even some integration with my Typekit account, but instead I got a text area for pasting embed code and another text area for custom CSS rules. And that’s it.

Typekit Fonts
The Typekit backend.

In order to use this plugin you need to have a Typekit account, or sign up for one. The idea is that you choose a few fonts in your account and publish them, then go to the Kit Editor and get your embed code, which you then paste on the plugin’s settings page.

Typekit Adobe
Sign in to your Adobe Typekit account to choose the fonts to add to your site.

If you aren’t willing to spend some cash on a Typekit plans, your options are limited to just a handful of fonts.

Overall, there are better plugins out there than this one if you want to add custom fonts to your website.

FontMeister

FontMeister

WPMU Rating

1/5

The Good

  • Hard to say because the plugin wouldn’t work

The Bad

  • It seems the plugin doesn’t appear to work with WordPress 4.0 and the developer is no longer maintaining it

Our Verdict

  • Usability: 0.5/5
  • User Interface: 2/5
  • Upload Fonts: 0.5/5
  • Overall: 1/5

The Bottom Line

FontMeister would be a really useful custom font solution for developers – if it worked. The ability to browse and add fonts from third-party services from within the plugin is a fantastic feature. Hopefully the developer will update this plugin soon.

FontMeister Review

FontMeister bills itself as a “one-stop plugin for all your fonts.” And indeed it appears to be just that. This plugin pulls fonts from your Google, Typekit, Fontdeck and Font Squirrel accounts for you to use in any theme.

FontMeister
Sign in to your third-party fonts accounts for integration with your website.

I was looking forward to testing this plugin to see what it was capable of, but when I tried to add new fonts from Font Squirrel I was unable to preview them or make changes.

So I went back to the plugin page in the WordPress Plugin Repository and realized the plugin hasn’t been updated since WordPress 3.5 at the end of 2012. It seems the plugin developer has abandoned this plugin as many questions seeking support have also gone unanswered. It’s a shame because this plugin has a lot of potential.

FontMeister fonts
Adding new fonts to FontMeister (but they’re not working).

Even if this plugin was working and up-to-date, average users you would be better off looking at other easier to use font plugins that don’t require signing up for a third-party account.

Hopefully someone adopts this plugin because it has a lot of potential to be useful for developers.

Font

Font

WPMU Rating

3.5/5

The Good

  • The front-end font editing experience is… interesting

The Bad

  • The front-end editing experience isn’t smooth and it takes a few goes to get things looking right. It also appears to be a bit buggy.

Our Verdict

  • Usability: 3/5
  • User Interface: 2.5/5
  • Upload Fonts: 5/5
  • Overall: 3.5/5

The Bottom Line

This throw back to the 1990s is fun to play with and is ideal for users working on a personal website who want full and fancy control over their fonts. If you’re a developer or more advanced user, you may want to look elsewhere.

Font Review

I must admit, I was hesitant to test this plugin. Anything that uses an excessive number of exclamation marks and 1990s era graphics with lots of drop shadow instantly puts me off. But the huge number of downloads (almost 340,000) and high rating (4.4 out of 5 starts) convinced me this plugin must be actually good.

Do you remember what Myspace pages used to look like when teenagers would go crazy with their CSS, making headers bright green and body text bright red, not to mention the distracting, moving background images? Well, this plugin is kind of a throwback to that time.

Font settings
The Font plugin’s settings appear to be fairly innocuous…

After installing and activating Font, you need to go to the front-end of your site and click “Font settings” in the top admin bar. A floating menu box will then appear and a bunch of font settings will replace the admin bar, including fonts, font size, and color. There are also pro settings that offer shadows and text angles if you want to upgrade. Upgrading is a fairly clumsy experience, which you do from within the front-end editing view and pay via PayPal.

Font front-end
…until you get to the front-end.

And the Winner Is…

There is no real clear winner. While I’ve scored the above plugins based on usability, user interface, and the ability to upload custom fonts, the last criteria skewed the results. While plugins like WP Google Fonts and Easy Google Fonts don’t allow you to upload your own fonts, they are still great options if you’re content with the, you know, 600+ or so Google fonts available.

  • Overall Score
  • Use Any Font: 4.15/5
  • WP Google Fonts: 3/5
  • Easy Google Fonts: 3.15/5
  • Typekit Fonts for WordPress: 1.65/5
  • FontMeister: 1/5
  • Font: 3.5/5
If I had to pick a winner after testing all these plugins, it would be Easy Google Fonts. This plugin gives you incredible control over the fonts for each element on your website without allowing you to go crazy like the Font plugin does.

If you have just one font you want to add to your site to change, say, your headers, Use Any Font is a brilliant and easy to use option for the average user.

While of these custom font plugins has its pros and cons (as described above in each review), each seemed to be let down by their user interface. While it wasn’t too hard to figure out how to use these plugins without turning to documentation, these plugins obviously haven’t been designed with user experience in mind, which is a downfall for many plugins.

Hopefully this list will provide you with some food for thought when choosing a solution for adding custom fonts to your WordPress site.

]]>
http://premium.wpmudev.org/blog/top-wordpress-custom-fonts-plugins-reviewed/feed/ 4
Add Courses To Your WordPress Site In Just 10 Minutes, For Free! http://premium.wpmudev.org/blog/add-courses-to-your-wordpress-site-in-just-10-minutes/ http://premium.wpmudev.org/blog/add-courses-to-your-wordpress-site-in-just-10-minutes/#comments Tue, 23 Sep 2014 15:30:00 +0000 http://premium.wpmudev.org/blog/?p=132236 There are many reasons why you might want to add courses to your WordPress site: to broaden your appeal to your audience; to generate revenue; or simply to educate and inform.

Whatever your reasons, you’ll need a course management system to manage your courses and your students. CoursePress (Free VersionPro Version), is just a such a system and is the latest release from WPMU DEV.

Let me show you how you can add courses to your WordPress site in less time than it takes to read this post.

CoursePress 10mins Featured
With CoursePress, you can create engaging courses for your audience in just 10 minutes

Be Prepared

The motto of millions of scouts worldwide is also a prerequisite step for any content creator, including a course content creator.

Yes, you can sit down and craft a course off the top of your head but it’ll be a whole lot easier if you have performed some preliminary thinking.

How your course will structured?

A CoursePress course contains 1 or more units; each unit contains 1 or more pages; each page contains 1 or more elements.

CoursePress comes bundled with 10 elements for adding content to a page:

A screengrab of the element selection panel on the course unit creation screen
10 elements allows you to create highly engaging course content, including quizzes

A page can contain multiple elements, including the quiz types (multiple choice, single choice and answer field), so you need to think carefully about how the content you have available, how you will group it into pages and units.

In particular, you’ll need to think about how the person taking the course (the student) will navigate between the units. You can set a unit as a prerequisite for the next unit to ensure that the course is completed in a predetermined order.

One common method for ensuring that students have actually consumed a unit’s content is to place a quiz somewhere in the unit flow.

With CoursePress you can either add a quiz as an additional page in a unit or create a unit specifically to act as a container for the quiz. As a rough guideline, place a quiz on an additional page to test a unit; and place a quiz in its own unit when you want to test multiple previous units with the one quiz (where you can also use pages to split the quiz up).

How much it will the course cost?

CoursePress comes bundled with, and offers seamless integration with, WPMU DEV’s e-commerce solution MarketPress, allowing the charging for courses.

Most of the MarketPress integration is behind the scenes and the general e-commerce settings such as the payment gateway and a course’s price are all controlled via the CustomPress interface.

MarketPress supports a full range of payment gateways including PayPal Express Checkout, PayPal Payflow Pro and Stripe and also allows you to set your price using a wide range of currencies (depending on the gateway selected).

Even if a course is a paid course, you can still make certain units freely available to enable prospective students to “try before they buy”.

Who Will Be Able To Take The Course?

CoursePress offers a range of options for who is eligible to enroll on your courses. It does depend, however, on the general WordPress Membership setting.

If this setting is not checked (the default), and therefore visitors cannot join the site, then all registrations for a course must be made manually: the site admin will need to create a new user and then add them in the course’s student list page.

If the setting is checked (anyone can register) then you’ll have several new options for controlling course enrollment:

  • Anyone – any member of the site can enroll on a course
  • Anyone with a passcode – restrict access to a course through a pre-set passcode
  • Anyone who has completed the prerequisite course – select an existing course to ensure that only those students who have completed that course can enroll on the new course

Fully Integrated Or Separate Sub-domain?

The final decision you need to make is where to locate your courses.

You can fully integrate CoursePress into your existing site for a seamless experience. You’ll likely need to perform some work on the styling of the CoursePress components to completely match the look and feel of your site. How much obviously depends on your theme and the level of integration you want to achieve.

Alternatively, you could set up your courses on a separate sub-domain, either a new install of WordPress or a new site in a multisite installation. The advantage of this approach is that you can use the CoursePress theme which is specifically designed to deliver CoursePress courses.

Adding Courses – The 10 Minute Guide

Okay, so let’s get to creating a course. We are going to step through how to create a free course that anyone can enroll for. For the purposes of this post, we’ll look at using CoursePress in a site that is using the CoursePress theme. Future posts will tackle integrating CoursePress into an existing theme.

Step 1 – Install CoursePress

CoursePress comes in 2 flavours: Pro and Standard. The Pro version is available to all WPMU DEV members or from the WPMU DEV site for $19. The Standard version is available for free from the WordPress plugin repository.

The major differences between the two versions are:

  • The Standard version is limited to the creation of 2 courses (Pro allows unlimited courses)
  • The Standard version provides payment via PayPal and Simplify (Pro supports over a dozen payment gateways, including Stripe).

Step 2 – Configure CoursePress

Before we configure CoursePress itself, let’s check and update a couple of WordPress settings first.

Firstly, go to Settings > General and click on the checkbox for Membership (Anyone can register). This will give us more options for who can enroll.

Secondly, staying in Settings, click on Permalinks. Ensure that Post name is selected and click on Save Changes if necessary.

You’ll have noticed that activating CoursePress added a new item to the WordPress admin menu. Click on CoursePress and then on the bottom item, Settings.

There are 4 tabs but the good news is that you don’t actually have to change anything to set up a course. These settings are somewhere to revisit once you are comfortable with setting up courses.

Step 3 – Create A Course

Okay, down to the business end. Let’s create a course.

Click on New Course and you’ll find the course creation form, divided into its 6 tabs.

Course Overview

This is where you give a course a name, a short overview – and it really does need to be short – and a listing image. You can also set the language the course is being delivered in.

These details are used in the Course Listing and at the top of the Course Details page:

Screengrab of a course listing in the front-end of a CoursePress enabled website

Course Description

Here you can expand on the course contents by adding a video and providing a more in-depth description of the course. Both these elements are used on the Course Details page.

Screengrab of the About this course section of the Course Details page
The description is critical in selling your course to your audience

You can also control how the structure is displayed and set preview options.

Checking the Show the Course Overview structure and Preview Options will enable the display of the structure on the Course Details page. If this is a paid course then you can enable units to be browsable (“free preview”) by the checking the box next to the unit.

Screengrab of the Overview section of the Course Details page
The Course Structure will give potential students a clear idea of what to expect from the course

We’ll revisit this after we have created the units.

Checking Display Time Estimates for Units and Lessons will add the estimated time to complete a unit (this is set in the unit itself) to the Course Structure.

Instructors

Each course requires one or more instructors. To assign an instructor to a course, click on the drop down and either select a name from the list or use the search facility.

The list is built from the site’s users, so to add a new instructor you’ll first need to add them to the site as a user or use the Invite New Instructor form.

Course Dates

Specify the date the course starts and finishes as well as the dates between which students can enroll for the course.

Use the options for no end date if the courses can be taken and completed at any time.

Classes, Discussion & Workbook

If a course is to be limited in size – perhaps because it is an instructor led class, or you simply want to restrict availability – then check the Limit class size option and enter the maximum number of enrollments that can be accepted.

Enabling discussions allows students to interact with each other as well as, of course, the instructor. The discussions are formatted as questions and answers and all questions for a class / course combination are visible to all students in the class.

Screengrab of a discussion
Encourage interaction with and between students by enabling discussions

Enable and disable the discussion feature via the checkbox.

The final option in the tab is the Workbook. Enabling this option, provides the student with an overview of their interaction with the course. Quiz results are listed, detailing the date the answer was submitted and the grade. The answers themselves are also available for review.

Screengrab of the Workbook for a student for a particular course showing progress for each of the Units
Workbooks allow students to track their progress. Very useful for larger courses.

Enrollment & Course Cost

The final tab is where you determine who can enroll in the course and the cost of the course.

As I mentioned earlier, who can enroll is heavily influenced by the WordPress Membership setting and unless you want to manually add students you will almost certainly want to allow anyone to register with the site and then select one of the extended enrollment options.

For the purposes of this post, we’ll set enrollment to Anyone.

To charge for a course you need to check This is a paid course, enter a price and set up a payment gateway if you haven’t already done so (for example, this is your first course).

For the purposes of this post we’ll leave the course as a free course. We’ll cover the various options for how to charge for courses in a later post.

Step 4 – Add The Units

We’ve stepped through setting up a course, now we need to add the actual content.

If you have already thought about the structure of your course then this step is going to be far easier. It’s well worth spending the time up front designing your units and their pages.

Creating a course should have taken you to the Units tab. If not, click on Courses in the CoursePress menu and move your mouse over the course you just created to activate the action menu. Click on Units.

Screengrab of the Unit creation screen
Add elements to Pages to create Units for your course all from the one interface.

For each unit, add a Unit Title, set the Unit Availability. You also need to determine whether the unit needs to be completed before the student can access any subsequent units.

TIP: To drip-feed the course content to students, rather than making the entire course available immediately, set the Unit Availability to a future date.

Now it’s time to add pages to the unit. Pages are displayed much like a paged WordPress post, so you need to carefully consider about how you’ll break up your content in pages for optimal learning.

To build a page, just click on on an element and complete the details. You can add as many elements to a page as you want; they are displayed in a concertina making them easy to access and update.

Add as many pages as you need by simply clicking on the +. Just remember that pages cannot be reordered: another reason for preplanning.

TIP: Add as few elements as possible to a page; multiple elements will be too distracting.

TIP: Put quiz elements on a separate, final page.

When you’ve finished creating your pages, click on Save at the top of the unit page. Add as many new units as you need.

At any time you can reorder your units by simply dragging and dropping their tab.

TIP: If you put quiz elements in their own units then you can make just these units mandatory.

Step 5 – Publish The Course

Once you’ve added all the content, you need to publish the course before it’s available to students.

It’s important to remember that both courses and units effectively have a status and it’s entirely possible to publish a course but not see any units because they are still in draft mode.

So, the first thing to do is to change your units’ status to Live.

Go to each unit and look in the top right hand corner where you’ll find the Status switch: click on the switch to change the unit status to Live. You’ll also notice that the grey circle on the unit tab also becomes green.

Screengrab of the Units tab showing the Unit tabs
Make sure all your units are Live before publishing your Course

When you’ve changed the status of all the required units to Live, you are ready to publish the course itself. To the right of the course tabs you’ll see another switch for Publish Course. Click on this and the switch will slide to the right and turn green.

Go to the home page of your site and you’ll find two new options added to the main menu, one of which will be Courses. Click on it and you’ll see your new course listed. Click on Details to see more information and to enroll on the course (if the dates allow).

You’re now in the education business!

Offering Preview For Paid Courses

If you set up your course as a paid course then you might want to offer one or more units for free to enable potential students to “try before they buy”.

To do this, click on the course in the Course Listing, then on the Overview tab and then on Step 2 Course Description where you’ll find Course Structure.

Screengrab showing the Course Structure admin where  units can be selected for free previewing
Give potential students a free preview of selected units of paid courses

Click on the checkbox of the course units that you want to make available for preview and click on Update.

Could Courses Enhance Your Digital Offering?

No-one knows your audience better than you do and you’ll be able to quickly determine whether adding courses to your content mix will enhance your digital offering.

If you are using WordPress as an internal communications channel then it’s almost certain that CoursePress will be of use for delivering training on everything from how to submit an expense claim to the meeting regulatory requirements for training all employees about sexual harassment.

For commercial publishers, courses offer a way to leverage expertise and specialist knowledge using a medium that an audience is far more accepting in having to pay for.

Regardless of your situation or your motivations, CoursePress will allow you to quickly and easily bring functional and engaging courses to your audience.

Download CoursePress from the WordPress plugin repository (Standard version) or from WPMU DEV (Pro version).

]]>
http://premium.wpmudev.org/blog/add-courses-to-your-wordpress-site-in-just-10-minutes/feed/ 3