WPMU DEV's Blog - Everything WordPressWordPress Tutorials - WPMU.org http://premium.wpmudev.org/blog The WPMU DEV WordPress blog provides tutorials, tips, resources and reviews to help out any WP user Fri, 18 Apr 2014 12:00:00 +0000 en-US hourly 1 http://wordpress.org/?v=3.8.2 How To Test WordPress Plugins With PayPal Sandbox http://premium.wpmudev.org/blog/how-to-test-wordpress-plugins-with-paypal-sandbox/ http://premium.wpmudev.org/blog/how-to-test-wordpress-plugins-with-paypal-sandbox/#comments Wed, 16 Apr 2014 12:00:00 +0000 http://premium.wpmudev.org/blog/?p=128194 Virtually all WordPress plugins that collect payments, from e-commerce stores to fundraising, offer integration with a PayPal product.

Testing this integration prior to launch means setting up the PayPal Sandbox and this, like PayPal itself, can be a little confusing.

In this article, we’ll look at how to create a PayPal sandbox environment and where to find the data that the majority of PayPal supporting WordPress plugins ask for.

Image consisting of the WordPress and PayPal logos
Finding the right settings for testing plugins with the PayPal Sandbox can be confusing

The PayPal ecosystem consists of 3 environments:

  1. Live PayPal – this where real money changes hands
  2. Sandbox – provides a replica live environment for testing but without funds exchange and without live data (only sandbox accounts and transactions exist in this environment)
  3. Developer portal – provides management of sandbox accounts and access to testing features such as the Instant Payment Notification simulator

In order to test a plugin with PayPal, you need to:

  1. Create an account on the PayPal Developer Portal
  2. Create the necessary Sandbox accounts in the Developer Portal
  3. Configure your plugin to use the Sandbox environment

It is important to remember that Sandbox data and live PayPal data are completely separate. You cannot use a live PayPal account for testing a plugin configured to use the Sandbox PayPal gateway and you cannot use a Sandbox account if your plugin is configured to use the live gateway.

The unfortunate upshot of this is that whilst you can certainly test your plugin, you will have to reconfigure it after testing to point to the live PayPal environment, so you will have to test it again with a live account just to be sure that it has been configured correctly.

Step 1 : Create A Developer Account

Go to the PayPal Developer Portal and either log in (if you have an existing PayPal account then you can use these credentials) or register a new account.

Step 2 : Create Test User Accounts

To view your existing accounts, or create new ones, click on Applications and then on Sandbox accounts.

Screenshot of the Sandbox accounts screen in the the PayPal Developer Portal
The Business account is automatically created for you.

You’ll find that it has already created a Business PayPal account for you. This is your Sandbox merchant account and is will be the account that provides all the configuration details for the plugin and where you’ll see all your test transaction details.

When you test your plugin, you’ll want to use a test user account for testing making purchases. To create a new account, click on the New Account button and complete the details in the form.

Screenshot of the create new account form
Create as many test accounts with as many variations as you need

As you can see, you can set up the account with a range of features, including the type of credit card. How many accounts you set up will depend on how many variations you feel you need to test.

A good rule of thumb is that too much testing is barely enough.

Step 3 : Configure Your Plugin To Use The Sandbox Environment

This is where it can get a little confusing as the configuration requirements depend on how the plugin you are testing integrates with PayPal.

Generally, though, the plugin settings page will contain some combination of the following:

PayPal Mode

Screengrab of the PayPal Mode Settings
Use Sandbox mode for testing

Most plugins that support a PayPal gateway will allow you to select whether you want to operate in Live or Sandbox mode. Obviously, for testing you want to select Sandbox.

PayPal Email Address

If the plugin is using PayPal Simple Payment then it will ask for an email address. You need to enter the email address of the Sandbox business account that was automatically set up for you when you logged into the developer portal.

You can see this email when you go to Applications > Sandbox accounts.

PayPal Merchant Account ID

This field is usually requested when the plugin is using the Payments Standard gateway and requires the Merchant ID for the Sandbox business account.

Unfortunately, this data is not available in the Developer Portal, so you’ll need to log into the PayPal Sandbox site using the Sandbox business account credentials.

The Sandbox site can be confusing as it will show you logged in at the top of the page but you still need to log in with the Sandbox business account to get to the information.

Once logged in, click on Profile > My Business Info.

As you can see, there’s a range of data there, all of it fake but all of it updateable. The Merchant account ID is nearer the bottom of the list.

Screenshot of the test account data
The test account profile contains essential data. Change the name whilst you are here.

While you are here you might want to change the name of the account (to your business name) so that the PayPal payment screens look a bit more realistic.

PayPal Site

This is actually quite important. Ensure that the country selected is the same as the country in the business account address.

PayPal API Credentials

If your plugin uses the PayPal API to access the PayPal gateway then it will ask for an username, a password and a signature.

These details can be found back in the Developer Portal:

  1. Go to Applications > Sandbox accounts
  2. Click on the arrow next to the business account and then on profile
  3. Click on API Credentials
Screenshot of the API credentials
All the details for testing “classic” API calls to PayPal

Simply cut and paste the details into the plugin configuration form.

Ready For Testing

It’s a good idea, even with a premium plugin, to test as many scenarios as you can prior to launching especially when there is a payment process involved. Hopefully, this post will have covered how to access all the data you need to enable you test the PayPal integration with your plugin.

And, of course, when you’ve done testing, don’t forget to reconfigure your plugin to use the live PayPal environment.

http://premium.wpmudev.org/blog/how-to-test-wordpress-plugins-with-paypal-sandbox/feed/ 0
Creating Categories and Tags for Your WordPress Media http://premium.wpmudev.org/blog/wordpress-media-categories-tags/ http://premium.wpmudev.org/blog/wordpress-media-categories-tags/#comments Tue, 15 Apr 2014 15:30:00 +0000 http://premium.wpmudev.org/blog/?p=128234 The media system in WordPress has come a long way in the last few years. It’s seen many welcome improvements.

As usual, however, it could probably be a little better. And one obvious way would seem to be adding categories and/or tags to media.

This would allow for easier management and even a little creative curation.

With that in mind, we’re going to go over a few ways you can assign categories or tags to media (such as images), and also how that might help.


Two Solutions

As people often like non-plugin solutions, we’ll offer one here. But we’ll also offer a plugin solution that is much more powerful out of the box.  It gives you a refreshing new twist on working with your media and doing things like building galleries from it.

Enhanced Media Library Plugin

This first solution comes in the form of a plugin called the Enhanced Media Library.

That link goes to a site where you’ll need to download the plugin to your computer first and then upload it to your site.

That plugin is an improved version of another media library plugin with the same name found on WordPress.org.

We are recommending the plugin in the first link, however, because it really is an improvement.  The big difference is that this plugin lets you move images into categories in bulk – for example, choosing 20 travel photos and moving them into a “Travel” category and then choosing 30 food photos and moving them into a “Food” category.

With the other plugin, you would need to move each image one by one (and only after you’ve clicked into the edit screen).

This plugin lets you use your existing categories and/or tags, or you can easily create your own that will only be available for media.

How It Works

We’ll go over some of the basics of how the plugin works to give you an idea of its power.

There are a number of ways to assign your media to a category.

Assigning to Categories (or Tags) via the Uploader

Of course many people first upload their media via the post editor. And so when you do that, you’ll see a section on the right-hand side of the uploader/library for categories.


When you click into an image to edit it via the media library, you’ll see a similar set up with the categories (or tags) on the right hand side.

Via the Media Library List

If you have lots of images that aren’t assigned yet, or you’d like to put images into more than one category (or change their categories), then you can go to the Media Library. (Media > Library)

There you’ll see a list of all your images. But you’ll also see some new additional functionality since adding the plugin.

When you hover over an image, you’ll now see options to assign the image to the categories you have set up.


If you select a number of images, you can then go to the drop-down at the top to the left of the Toggle Bulk button, choose your category, and then click Toggle Bulk.


This will move them into the category.


Working with Media Categories

Working with media in the categories is just as easy as getting it into the categories.

Still in the Media Library, you may have noticed that there was a filter button that lets you see only the images in that category.


But let’s say you were looking for a photo while writing a post. If you click the media button on the post editor and go into the Media Library that way, you still have a way to filter your images.


That makes it much easier to find the image you want. But it also makes it easier to do things like build a gallery of all your travel photos.

You’d simply need to do the following:

  • Click “Create Gallery”
  • Filter your images by category
  • Select the images you want
  • Click “Create a new gallery”

Code for Functions File

This second options is code for your functions file. While this isn’t as powerful as the plugin above, it may be a start for developers looking for something more stripped down.

If you place the following in your functions.php file, you will now see that attachments such as images can be assigned categories or tags. This is the same category and tag system already set up on your site.

As you’ll be changing your theme, you should probably consider creating a child theme if you haven’t already.

// add categories for attachments
function add_categories_for_attachments() {
    register_taxonomy_for_object_type( 'category', 'attachment' );
add_action( 'init' , 'add_categories_for_attachments' );

// add tags for attachments
function add_tags_for_attachments() {
    register_taxonomy_for_object_type( 'post_tag', 'attachment' );
add_action( 'init' , 'add_tags_for_attachments' );

Just Right for Heavy Duty Media Users

If you use and reuse a lot of media on your site, then categories for these attachments is a no-brainer. In fact, after you moved to media categories, you’d probably never be able to go back. It’d be like working with posts without categories or tags – possible, yes, but who would ever want to?

http://premium.wpmudev.org/blog/wordpress-media-categories-tags/feed/ 0
Beyond Pie Charts: Add Mind-blowing Visualizations To WordPress http://premium.wpmudev.org/blog/beyond-pie-charts-add-mind-blowing-visualizations-to-wordpress/ http://premium.wpmudev.org/blog/beyond-pie-charts-add-mind-blowing-visualizations-to-wordpress/#comments Mon, 14 Apr 2014 12:00:00 +0000 http://premium.wpmudev.org/blog/?p=128181 When it comes to embedding graphs and charts in your WordPress posts, there are quite a few options in the plugin repository.

But what if you want to go beyond pie-charts and bar-graphs? What if you want to add the kind of interactive, data-visualizations that will leave your visitors’ minds well and truly blown?

Then you need to strap on the D3 javascript library and take a leap into data-driven documents.

Collage of D3 visualizations
It can be a lot of work but the results of D3 visualizations are truly mind-blowing

If you thought that charts and graphs began and ended with pie-charts and bar-charts then you are in for treat because integrating the D3 library with WordPress brings a whole new level of charting sophistication.

But be warned, this is not for the faint-hearted.

So what is D3? The official website says:

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

Before we do anything, go to the D3 examples page and try out some of the examples.

This is not a tutorial on how to use D3 (Data-Driven Documents) but merely how to integrate D3 into WordPress. You’ll need to build the visualizations yourself but such is the range of available examples that you should be able to find something similar to what you need and modify it yourself.

Let’s get started.

Embedding A D3 Visualization In A WordPress Post

What we are going to do is add the Force-Directed Graph example to a WordPress post. Like most of the more complicated D3 examples, this visualization loads the data in from an external file, so the steps to embed it in a post are:

  1. Install the WordPress-d3.js Plugin
  2. Upload the visualization data file
  3. Insert the visualization javascript into a post
  4. Tweak the javascript to work with the plugin

Step 1: Install the WordPress-d3.js Plugin

Download this plugin from the WordPress repository (or search for it in your Add New plugin panel), install and activate it.

The plugin adds a new button to the Visual Editor to allow the insertion of D3 javascript (via a shortcode) as well as adding the D3 library to the <head> of the blog post.

Step 2: Upload the Visualization Data File

D3 can use a variety of data formats including comma separated values (CSV), tab separated values (TSV) and JSON formatted. This example uses JSON formatted data: download the file ( miserables-json.txt ) and upload it into your media library.

(Note: even though it is JSON formatted, the file uses the .txt extension as the default install of WordPress won’t allow the uploading of a .json file.)

Cut and paste the URL somewhere handy, as we’ll need it in the next step.

Step 3: Insert the Visualization Javascript

Either create a new post or open an existing post in the Visual Editor and click on the WPD3 button in the toolbar. This screen will pop-up:

Screenshot of the WordPress-d3.js plugin pop-up dialog
Just add your visualization’s javascript. Or copy someone else’s.

Go to the example page and scroll down to the code. Copy and paste the javascript code but excluding the <script> tags.

Step 4 : Tweak the Javascript

For the example to work, we just need to change a couple of lines in the javascript:

  1. how the svg element is initially created
  2. the location of the data file
Screenshot of the pop-up dialog with javascript
Just a couple of tweaks are required to fully integrate the demo

Changing How The SVG Element Is Created

If you look in the left-hand corner of the pop-up dialog you’ll see a tab with a label which is wpd3-{post-id}-{tab id}. When the shortcode is processed a div with this class is created and so we’ll create the svg element as a child of this div rather than as a child of the body element which is how the example javascript works.

Look for this code:

var svg = d3.select("body").append("svg")

and replace body with the tab label, for example:

var svg = d3.select(".wpd3-1-0").append("svg")

Don’t forget the . before the tab label; this is replicating the CSS class selector and won’t work otherwise.

Changing The Location Of The Data File

With all the examples, the file is usually just listed as data.csv or data.tsv or, in this case, miserables.json and you need to change this to your locally hosted file name.

For this example, look for the following code:

d3.json("miserables-json.txt", function(error, graph) {

and replace the miserables-json.txt with the location of your data file relative to the root (e.g. /wp-content/uploads/2014/04/miserables-json.txt).

Click on Save and then on Insert then on Close. You should see a shortcode has been added to your post that looks something like:

[d3-source canvas="wpd3-79-0"]

Save or Update the post and View it.

If all has gone to plan you should see something like this:

Screenshot of the Force-Related Grpah demo
A simple example that gives a hint of the power of the D3 library

You can drag the nodes and when you mouseover you’ll get a tooltip with a Les Miserables character name.

Unlimited Mind-blowing Potential

Whilst this example is pretty simple, it shows the potential of the D3 library, particularly for interactive visualizations. I’d encourage you read the tutorials and play with some of the other examples to really get a feel for this library because its potential is vast.

If you’ve used the D3 library with WordPress already, post a link a below.

Note: I would love to have included the real examples on the blog but due to obvious constraints on the plugins we can install this wasn’t possible.

http://premium.wpmudev.org/blog/beyond-pie-charts-add-mind-blowing-visualizations-to-wordpress/feed/ 1
Boost Your Site’s Impact With Custom Sidebars and Widgets http://premium.wpmudev.org/blog/boost-your-sites-impact-with-custom-sidebars-and-widgets/ http://premium.wpmudev.org/blog/boost-your-sites-impact-with-custom-sidebars-and-widgets/#comments Sun, 13 Apr 2014 15:00:00 +0000 http://premium.wpmudev.org/blog/?p=127979 If your WordPress site uses static sidebars and widgets then you are missing out on a massive opportunity.

Would your Contact Us page be enhanced by having its own sidebar? Do you have a free download that you’d like to display in a widget for just a week? Would you like to show a special offer to logged-in users only?

In this Weekend WordPress Project, we’ll give your static sidebars and widgets a dynamic makeover that will dramatically improve the relevance and impact of your site’s content.

Weekend WordPress Project logo
Boost the relevance and impact of your site’s content with custom sidebars and dynamic widgets

Let’s first just have a quick recap about how widgets and sidebars work.

Sidebars are for displaying content on a WordPress site other than the main content. Although generally manifesting themselves as the left or right margin of a site (or both), and despite their name, there’s no requirement for sidebars to be vertical and it’s not unusual to see sidebars as footers or even headers.

Screenshot of the Widgets panel in WordPress admin
Widgets and Sidebars are static out-of-the-box, wasting a massive opportunity

The sidebars you see in your Widgets Panel (Appearance > Widgets) are created in your theme’s functions.php. Your theme also controls where those sidebars are displayed through functions in the template. Generally, one or more sidebars will be displayed on every page to every user however it’s not unusual to see sidebars that are output on the front page only (Twenty Twelve does this) or to see a “full-width” template that will not display sidebars in the left or right margin.

A sidebar’s content is generated by widgets – it’s actually better to think of sidebars as “widgetized areas”. WordPress comes with a set of default widgets such as calendar, recent posts and meta, and there’s a myriad of plugins that will add additional widgets for pretty much anything you can think of.

Or, of course, you can write your own.

Widgets are configured and assigned to sidebars in the Widgets Panel and are static in the sense that they will be displayed regardless of the page that is being generated or the user who is making the request.

Due to the fact that sidebar content can so easily be configured by authorized users, sidebars and widgets are powerful tools for controlling the output of a site without the need to resort to coding.

For a simple site they are more than adequate but if you have a growing site and subscribers then you’ll want to take your sidebars and widgets’ potential a big step forwards.

Content Aware Sidebars and Dynamic Widgets

When you start assigning widgets to a sidebar, it’s not unusual to go a little overboard and end up with a sidebar that is far longer than the main content.

The problem is often due to trying to cater for all pages and all users.

We are going to install two plugins that will help you overcome these problems and produce sidebars and widgets that are targeted to both the content being output and the visitor who is making the request.

Content Aware Sidebars

The Content Aware Sidebars plugin allows you to create multiple sidebars and to assign rules to each to control when and how it is displayed – it can replace the default sidebar or merge with it. Given the extent of the options, I can’t help feeling that Context Aware would have been a more apt name.

Content Aware Sidebars
Requires: 3.3 or higher
Compatible up to: 3.8.2
Last Updated: 2014-1-6
Downloads: 92,248
Ratings: 4.9/5.0 (71 reviews)
AuthorJoachim Jensen (Intox Studio)

Dynamic Widgets

The Dynamic Widgets plugin works on the same basis but with widgets and provides a much wider set of rules allowing, for example, widgets to be targeted at certain roles and for specified timeframes.

Dynamic Widgets
Requires: 3.0.0 or higher
Compatible up to: 3.8.2
Last Updated: 2014-2-24
Downloads: 354,602
Ratings: 4.8/5.0 (170 reviews)
Author: Qurl

When To Be Content Aware and When To Be Dynamic

Before you start creating new sidebars and adding rules to your widgets, you need to sit down and sketch out your requirements including:

  • Which pages should have separate sidebars?
  • Do you have widgets that are only applicable to certain roles?
  • Are their widgets you want hidden on certain pages (might cause a distraction in a sign-up or purchase process)?
  • Do you want to display a particular widget ony on a mobile device (perhaps about an app alternative)?

Whilst it’s tempting to just use dynamic widgets this will quickly make your sidebars difficult to manage. If you want a completely different set of widgets for a page, then create a new sidebar and override the default; use the dynamic widgets for criteria other than the page the widget is being displayed on.

Two Quick Examples

So, let’s run through a couple of quick examples of how to use these new plugins.

Firstly, we’ll set up a sidebar that’s just for the Contact page as we want to use that sidebar to list the various key contacts, for example.

To create the new sidebar that will replace the default sidebar on the Contact page only:

  1. Click on the new Sidebars link in the Dashboard menu and click Add New
  2. Add a Title (“Contact”)
  3. Click on Pages and check the box for the Contact page
  4. Click on Add to Group, the rule will now appear in the Condition Groups pane, click on Save under the condition
  5. In the Options pane, ensure Handle is set to Replace and select the primary sidebar (in Twenty Twelve’s case this is Main Sidebar)
Screenshot of the Context Aware sidebars admin screen
Take control of your sidebars, merge or replace, restrict by context

Now, if we go to Appearance > Widgets there is a new Contact sidebar to which we can assign widgets and which will replace the default sidebar when the Contact page is displayed.

Next, let’s set up a dynamic widget for displaying a special offer to logged-in users for the current month only.

  1. Go to Appearance > Widgets and drag the Text widget into the Main sidebar
  2. Enter a title and a description and click on Save
  3. Click on Dynamic Setting: Static – the Dynamic Widget pane will be displayed
  4. Click on Role, select No for show to everybody and check Subscriber (and probably Administrator to allow you to test)
  5. Click on Date and set the to and from dates to the current month
  6. Click on Save – you’ll be returned to the Widget pane. Expand the Text widget and you’ll notice that Dynamic Setting is now Dynamic.
Screenshot of dynamic widget settings pane
Dynamic widgets offer a myriad of options for controlling when a widget is displayed

If you browse your site in the same browser you should see the new widget; browse the site on another browser (or in an incognito window if using Chrome) and the widget should not be shown.

The Path To A High Impact Site

As you browse the options of these two plugins you’ll quickly become aware of the vast possibilities that they provide when combined.

Being able to better target your supporting content by improving its relevance to where in the site it is being viewed, who is viewing it and when it is being viewed is obviously an important step in making your site more effective.

Spend a few minutes looking at the supporting content on your site. Are you maximizing this space, or could you benefit from content aware sidebars and dynamic widgets?

http://premium.wpmudev.org/blog/boost-your-sites-impact-with-custom-sidebars-and-widgets/feed/ 0
Highlighting Comments on Your WordPress Site Since Your Last Visit http://premium.wpmudev.org/blog/highlighting-comments-on-your-wordpress-site-since-your-last-visit/ http://premium.wpmudev.org/blog/highlighting-comments-on-your-wordpress-site-since-your-last-visit/#comments Sat, 12 Apr 2014 15:30:00 +0000 http://premium.wpmudev.org/blog/?p=127957 We get a lot of comments on our blog from our awesome members, but it can be hard to keep track of comments.

It can be a pain to subscribe to comments (more pesky emails landing in my inbox!), though after a few hits of the refresh button, new and old comments blur into one when discussion really takes off on a popular post.

Luckily, there’s a simple way for site admins to help their readers.

In today’s Weekend WordPress Project I’ll show you how to highlight new comments made on a post since a person’s last visit.

Comments feature image
Easily highlight comments to help returning visitors pick up where they left off.

Comments Since Last Visit

Developer John Parris has released a fantastic plugin on GitHub called Comments Since Last Visit.

Simply download the plugin, install and activate it. And that’s it. There are no settings to wade through or boxes to tick. The plugin works straight out of the box.

When you refresh your site, your new comments will look like this:

Highlighted comment
A highlighted comment, thanks to the Comments Since Last Visit plugin.

When you refresh your site again, comments will return to their usual styling:

Read comment
A read comment using the Twenty Fourteen theme.

The plugin adds a light blue background to new comments. While the plugin itself doesn’t offer any customizations, it’s easy enough to edit the plugin and change the styling of highlighted comments yourself.

In the plugins interface find the plugin and click “Edit.” Scroll down until you’re almost near the bottom and find this code:

Comments Since Last Visit
Add any highlighted comments styling directly into the plugin’s code.

As you can see, there is only one styling: the background is blue. With a little CSS, you can change the background to whatever color you like, add a border, change the font – style it however you like to match your site.

For each comment, Comments Since Last Visit adds the new-comment CSS class, which you can target in themes to control how new comments look.

If you’re interested in contributing to this plugin, check out Parris’ blog or the plugin’s page on GitHub.

http://premium.wpmudev.org/blog/highlighting-comments-on-your-wordpress-site-since-your-last-visit/feed/ 1
How to Make a WordPress Blog Completely Private http://premium.wpmudev.org/blog/make-wordpress-blog-private/ http://premium.wpmudev.org/blog/make-wordpress-blog-private/#comments Thu, 10 Apr 2014 15:30:00 +0000 http://premium.wpmudev.org/blog/?p=128117 Although it’s easy to make individual posts private or password protected in WordPress, what if you wanted your whole blog to be private?

We’re not talking about partially private here. We’re talking about a blog that’s completely off the grid except for those who have access.

We covered this topic a while ago, and at that time it took a combination of several plugins to make a site completely private.

Since that time, however, some plugins have upped their game, and really you only need one.


Private Only Plugin

The Private Only Plugin has been updated and should do the trick nicely – sending non-registered users to a login page. However, you can also include a link on the login page to a public page of your liking.

This plugin also protects your RSS feed – a weakness in past “private blog” plugins.  When you download this plugin, it will actually install two plugins. The second one, called “Private Only, Disable Feed,” takes care of the RSS feed.

When a user attempts to access your feed, they will come up empty-handed.


The plugin also lets you control the following on the login page:

  • include your own logo
  • use the WordPress logo
  • use no logo
  • remove the “Lost Password” text
  • remove the “Back to Blog” link

There is also an option to use custom CSS.

Blocking Search Engines

It would appear that this plugin also blocks search engines automatically; however, there is no info that I could find that directly spells that out.

Therefore, it might also be a good idea to go ahead and block search engines in your admin area.

Go to Settings > Reading > check “Discourage search engines from indexing this site”


Works on Multisite

This plugin also works on Multisite sites.

Of course if you install it on a Multisite install, you will probably not want to network activate it.

Most likely, unless you plan to make all the sites private, you’ll want to simply install the plugin, and then go to dashboard of the site you want to make private and activate the plugins there.

Photo: Private Sign from BigStock

http://premium.wpmudev.org/blog/make-wordpress-blog-private/feed/ 2
How to Create a Stunning Custom WordPress Login Page http://premium.wpmudev.org/blog/create-a-custom-wordpress-login-page/ http://premium.wpmudev.org/blog/create-a-custom-wordpress-login-page/#comments Thu, 10 Apr 2014 11:30:00 +0000 http://premium.wpmudev.org/blog/?p=128121 Let’s face it, the default WordPress login page is boring and bland.

Over the years the login page hasn’t changed much. Since the change to darker colours in WordPress 3.8, it’s surprising the it wasn’t similarly styled to match the new backend aesthetics.

Most theme designers don’t bother styling the login page because it’s not all that necessary, especially when it’s not part of the WordPress theme setup. But when you’re creating a site for a client, neglecting to style – and more importantly, brand – the login page is a lost opportunity that breaks the user’s experience when you have a custom theme in place.

Creating a custom theme isn’t all that difficult with a bit of CSS and PHP. In this tutorial I’ll walk you through how to style your login page with a WPMU DEV inspired theme.

Here’s what we’ll be making in this tutorial:

Final login page
A beautiful, customized WordPress login page.


Customizing the WordPress Login Page

Create a /login folder to store your login page files.

This tutorial will cover several modifications to theme files that will allow you to create your own personalized login page:

  • 1. Add a Custom Background
  • 2. Replace the WordPress Logo With a Custom Logo
  • 3. Customize the Look of the Login Form
  • 4. Change the Login Logo URL
  • 5. Remove the Lost Password Link
  • 6. Hide the Login Error Message
  • 7. Remove the Login Page Shake
  • 8. Change the Redirect URL
  • 9. Set “Remember Me” To Be Checked

As mentioned above, the login page isn’t part of the WordPress theme setup. If you’ve ever tried to customize the login page, you would have discovered WordPress doesn’t load your theme’s stylesheet that page.

But that’s okay because in this tutorial we’re going to create our own. Open a next .txt file and name it login-style.css.

For consistency, we’ll save any changes we make in our current theme’s folder. I suggest keeping any files in a new /login directory, which will help keep everything in one place.

Upload your new style sheet to the /login directory.

We’ll need to tell WordPress to load this CSS file so open up your theme’s functions.php file and add the following code:

function custom_login_css() {
echo '&lt;link rel="stylesheet" type="text/css" href="'.get_stylesheet_directory_uri().'/login/login-styles.css" /&gt;';
add_action('login_head', 'custom_login_css');

Now let’s get stuck in.

Add a Custom Background

We want to emulate the WPMU DEV site’s dark blue background, which we can achieve with a little CSS. By default, WordPress adds a .login class to the body of the login page, so you can use this class to add your own background.

Add the following CSS to the login-style.css file:

body.login {
background: #021a2b;

The login page now looks like this:

Login background color
The login page, now with a background color similar to the WPMU DEV site.

It’s easy enough to add an image instead of a solid color. Just remember to choose an image that will look good on large screens. It’s also a good idea to save the image to the /login directory and link to it there.

Replace the WordPress Logo With a Custom Logo

We’ll use the default .login h1 a class to add our own custom logo. Upload your own logo to the /login directory and take note of its height and width.

Then add this code to the style sheet:

.login h1 a {
background-image: url('../login/logo.png');
background-size: 300px 72px;
width: 300px;
height: 72px;

Replace the background-size, width and height with the dimensions of your own logo and don’t forget to replace “logo.png” with your logo’s file name.

Our login page now looks like this:

Login custom logo
Personalise your WordPress login page wiht a custom logo.

You may want to adjust the padding depending on the height of your logo:

#login {
padding: 30px 0 0;

Customize the Look of the Login Form

WPMU DEV login
The WPMU DEV mini form.

Now we’re going to play with the look of the login form so it better matches the WPMU DEV mini form.

It’s easy to style the form using CSS. The CSS below will transform our form so it resembles the WPMU DEV form, but you can change the CS however you like to match the look and feel of your own site.

First, we’ll add the style for the form. Add this CSS to your login-styles.css file:

.login form {
border: 1px solid rgba(0,0,0,.2);
background-clip: padding-box;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
overflow: hidden;

Next we’ll make the text a little darker:

.login label {
color: #333;
line-height: 26px;

Lastly, we’ll change the look of the button:

.login .button-primary {
width: 120px;
background-color:#083353 !important;
background: -webkit-gradient(linear, left top, left bottom, from(#0b436e), to(#083353));
background: -webkit-linear-gradient(top, #0b436e, #083353);
background: -moz-linear-gradient(top, #0b436e, #083353);
background: -ms-linear-gradient(top, #0b436e, #083353);
background: -o-linear-gradient(top, #0b436e, #083353);
background-image: -ms-linear-gradient(top, #0b436e 0%, #083353 100%);
text-shadow: #333333 0 1px 0;
color: #849db0;
.login .button-primary:hover {
background-color:#083353 !important;
background: -webkit-gradient(linear, left top, left bottom, from(#0b436e), to(#083353));
background: -webkit-linear-gradient(top, #0b436e, #083353);
background: -moz-linear-gradient(top, #0b436e, #083353);
background: -ms-linear-gradient(top, #0b436e, #083353);
background: -o-linear-gradient(top, #0b436e, #083353);
background-image: -ms-linear-gradient(top, #0b436e 0%, #083353 100%);
text-shadow: #333333 0 -1px 0;
color: #fff;

.login .button-primary:active {
background-color:#083353 !important;
background: -webkit-gradient(linear, left top, left bottom, from(#0b436e), to(#083353));
background: -webkit-linear-gradient(top, #0b436e, #083353);
background: -moz-linear-gradient(top, #0b436e, #083353);
background: -ms-linear-gradient(top, #0b436e, #083353);
background: -o-linear-gradient(top, #0b436e, #083353);
background-image: -ms-linear-gradient(top, #0b436e 0%, #083353 100%);
text-shadow: #333333 0 -1px 0;
color: #fff;

While the changes are subtle, they better match the WPMU DEV site:

Login custom form
The login form after some CSS styling.


Change the Login Logo URL

By default, the logo will link to wordpress.org. You can change this and point it to your own site by adding this code to your functions.php file:

function my_login_logo_url() {
return get_bloginfo( 'url' );
add_filter( 'login_headerurl', 'my_login_logo_url' );

function my_login_logo_url_title() {
return 'Your Site Name and Info';
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

You can change the title of the link to anything you want.

Remove the Lost Password Link

The “Lost Your Password?” link is helpful if you’ve lost your password, but if someone has hacked your email they will be gable to get hold of your WordPress password and take over your site.

To move the lost password link, add this snippet to your functions.php file:

function remove_lostpassword_text ( $text ) {
if ($text == 'Lost your password?'){$text = '';}
return $text;
add_filter( 'gettext', 'remove_lostpassword_text' );

Hide the Login Error Message

When you enter an incorrect username or password, the login page returns an error message that says either your username or password was incorrect.

If password cracking software correctly guesses either your username or password, the error message will let it know which piece of the puzzle it got right.

We can use a login page hook to remove the error message, just add this code to your functions.php file.

add_filter('login_errors',create_function('$a', "return null;"));

Remove the Login Page Shake

When you enter an incorrect username or password, the login form shakes to alert the user.

Shake, shake, shake!

I don’t really mind this feature, but some people find it annoying. To remove the shake, add this snippet to your functions.php file.

function my_login_head() {
remove_action('login_head', 'wp_shake_js', 12);
add_action('login_head', 'my_login_head');

Change the Redirect URL

When you login to the WordPress backend, you’re immediately taken to the dashboard. You can easily change this to redirect users to your homepage instead.

Add the following code to your functions.php file so that all users other than admin are redirected:

function admin_login_redirect( $redirect_to, $request, $user )
global $user;
if( isset( $user->roles ) && is_array( $user->roles ) ) {
if( in_array( "administrator", $user->roles ) ) {
return $redirect_to;
} else {
return home_url();
return $redirect_to;
add_filter("login_redirect", "admin_login_redirect", 10, 3);

Set “Remember Me” To Checked

The “Remember Me” is unchecked by default. I like to check this when I login, but sometimes I forget, only to realise my mistake after I’ve already logged in. Doh!

To leave this box always checked, add this snippet to functions.php:

function login_checked_remember_me() {
add_filter( 'login_footer', 'rememberme_checked' );
add_action( 'init', 'login_checked_remember_me' );

function rememberme_checked() {
echo "<script>document.getElementById('rememberme').checked = true;</script>";

Summing Up

So there you go. With a few simple modifications you can easily personalize you login page to match the look and feel of your site.

If you have users regularly logging into your site, customizing your login page is worth the time and effort. it’s another opportunity to brand your site and service and also leaves an impression on your users.

A big thanks to Paul Underwood and his awesome snippets blog, which I’ve borrowed from.

Have you customized your login page? Show us what you’ve done in the comments below.

http://premium.wpmudev.org/blog/create-a-custom-wordpress-login-page/feed/ 23
How to Massively Reduce Your Images for a Faster WordPress Site http://premium.wpmudev.org/blog/reduce-images-faster-wordpress/ http://premium.wpmudev.org/blog/reduce-images-faster-wordpress/#comments Wed, 09 Apr 2014 12:00:00 +0000 http://premium.wpmudev.org/blog/?p=127976 Page speed is often an issue for WordPress users. Many are often looking for a way to increase it.

Not only does it affect your users, it also affects your SEO (because it affects users, of course).

Large images are often one of the worst culprits when it comes to slowing down pages. And so we’re going to talk about a way to massively reduce the size of your images (both on the page and on the server).


(IMPORTANT: You must have access to the WordPress files on your server in order to do this.)

A Little Work Required

Before we get started, let me say up front that this is going to require a little work. While it’s not overly complicated, it does take more than simply pushing a button or two.

There are plugins out there that will reduce your image files automatically. WPMU DEV maintains a free one on the WordPress.org directory called Smush.It.

Plugins like Smush.it are obviously very valuable because once installed, they require zero work. Just activate it, and any file uploaded from that point on will automatically be put through the system and “smushed.”

Here’s a look at the size of a file uploaded without Smush.it and then with Smush.it.


As you can see, it went from 216.64 KB down to 201.55 KB.

So that’s nice, especially as it requires no work. But with the method we’re going to talk about today, we’re going to get MASSIVE reduction in file sizes. Here’s a look at an example (and not even the best one).


So this image went from 216.64 KB down to 80.87 KB (as compared to Smush.it’s 201.55 KB). And the thing is – we probably could have made it even smaller (more on that later).

Another advantage of this method is that it can reduce the size of images that are above 1 MB. The Smush.it plugin, which uses the Yahoo Smush.it system, cannot reduce the size of images over 1 MB because Yahoo doesn’t allow it.

Image Compression Software

The way we’re going to reduce our image files is by using image compression software that you run on your computer.

There are free programs available that work well.

I’m sure there are a number of different programs out there, but I’ll just mention two here:

For Windows, Caesium will do the trick.

And for Mac, there is ImageOptim.

We won’t go over the ins and outs of each program here, but you can get both working in at least a very basic way very easily.

Compressing Your WordPress Images

Obviously if the image compression program is on your computer and your images are on your server inside of your WordPress system, then it’s going to take a little work to get the two together. And that’s true. That’s the majority of “the work” that I warned you about above.

And not only that, this is something that you will need to do on at least a semi-regular basis. You can choose when – once a month, once every three months, once a year, etc. You decide.

Fortunately, media in WordPress is stored in a system of folders that makes this easy because it’s stored by date.

I’m writing this in April of 2014. If I were to upload files to my WordPress site on this day, they would go into a folder for April of 2014. In other words, in my WordPress file system, they would reside here (starting in my wp-content folder):


And last month’s files would reside here:


And so as you can see, if you wanted to keep on top of this little task every month, you would just need to do the last month’s folder and you’d be up to date.

Obviously that means files for the current month wouldn’t be compressed till next month, but that’s a compromise that may be worth living with.

A Step-by-Step System for Compressing Files

Of course you can work out your own system for doing this. But I’ll map out one possibility below.

You might want to use an FTP client like Filezilla for parts of this, or you can just work through your server’s FTP solution. Both ways will work, of course.

I’ll go through these steps below by simply using the tools available in Cpanel, which is popular web hosting control panel. If you don’t have Cpanel, yours will probably offer similar tools. If it doesn’t, then using something like Filezilla should work.

I’m going to do one month’s worth of images here. You can adjust your methods if doing more than one month.

Step 1

Find your images on your server. As mentioned before, they are stored in folders by date, so you’d drill down like this:

wp-content > uploads > year > month

For example, you’d find the files for April 2014 here:

… /wp-content/uploads/2014/04

Step 2

Compress/zip your folder on the server.


Step 3

Download the compressed file to your computer.


(Or download with a program like FileZilla.)

Step 4

Extract/unzip the files on your computer.

IMPORTANT:  If you have non-image files, such as mp3s, take them out for now and place them somewhere for later.

Step 5

(The exact steps here may differ according to your image compression software. But take note of general ideas.)

Import your images into the compression software and set up an export folder.

Your export folder (where your newly compressed images will be stored on your computer) should have a different name from your original folder.

For example, if you’re working with the April folder, which would have the name “04,” you might want to name your export folder something like “04-compressed.”

Step 6

Set the image quality and compress your images.

Obviously you may have different settings from me depending on what image compressing software you have. And so you can play around with those to see what types of results you get.

Using the Caesium software, I loaded up some images, and then set the quality to 50. (It was set at 80 by default.)

I knew from playing with other image software that sometimes you can GREATLY reduce file size without seeing much loss in quality.

Set at 50 in Caesium, I didn’t see any examples of large scale degradation. And I’m sure I could have even gone lower, making the file sizes even smaller.

But you should run your own test. And, of course, the quality of your original images will play into it as well.


So I simply loaded up some images, set the quality to 50, then hit “Compress!” And I was done.

IMPORTANT: If you had non-image files, such as mp3s, place them into the folder where your now-compressed images are (e.g. the “04-compressed” folder).

Step 7

Zip the folder of compressed images (i.e. zip the “04-compressed” folder).

Step 8

Upload the zipped folder of compressed images (“04-compressed” folder) to your server.


(Or use a program like FileZilla.)

Step 9

On the server, extract the folder of compressed images (i.e “04-compressed”). You may need to refresh to see the unzipped folder appear.


Once this is extracted, you should have a folder for “04” (that’s the original), “04.zip” (the original zipped up), “04-compressed.zip” (the compressed images zipped up), and “04-compressed” (the compressed images unzipped).



Step 10

Rename the folder of original images. For example, you might rename it from “04” to “04-original.”


And here it is renamed.


IMPORTANT: KEEP this folder on the server for a while in case you run into problems. If you do, you can just rename it back to its original name, and things should go back to normal while you figure out the problems. If there are no problems, you can delete it. But you might keep the copy that you downloaded onto your computer just to be safe.

Step 11

Rename the folder of compressed images (i.e. rename “04-compressed” to simply “04″ — the original name).


Step 12

Delete extra folders as you like.

As mentioned, you might want to make sure to keep the original folder until you’ve had time to check your site out to make sure everything went as planned. But once everything checks out, you can get rid of all the extra folders – i.e. “04-original,” “04-compressed.zip,” and “04.zip.”

The Quality and Size of Compressed Images

As mentioned, the size of your images should be greatly reduced after going through this process.

In fact, you’ll probably find that the average reduction is even more that was demonstrated with the one photo near the beginning.

For example, in my test, I ran a folder with over 1,200 images through the process. The end result saw the compressed images (on average) being on about 25% the size of the original images.

See the size of the folders below.


By the way, you might notice that the “Original Images” folder has one more file than the “Compressed Images” folder. No image was lost. It’s just that Windows put a file called thumbs.db into the folder. It’s completely unnecessary for your purposes.


Also as mentioned, the difference in quality was not noticeable. But you’ll need to do your own tests.

Final Note: This step-by-step process outlined above is for dealing with images that were already previously on your server and in your WordPress system. This is not for uploading NEW images directly to your server. If you upload NEW images directly to your server, then your WordPress Media Library will NOT recognize them. For a case like that, check out the Add From Server plugin.

http://premium.wpmudev.org/blog/reduce-images-faster-wordpress/feed/ 7
Support Your Clients With White Label Videos and Awesome Tutorials http://premium.wpmudev.org/blog/support-your-clients-with-white-label-videos-and-awesome-tutorials/ http://premium.wpmudev.org/blog/support-your-clients-with-white-label-videos-and-awesome-tutorials/#comments Tue, 08 Apr 2014 11:30:00 +0000 http://premium.wpmudev.org/blog/?p=128033 Did you know we have dozens of continuously updated, high quality white label video user manuals for WordPress?

We’ve also got a comprehensive YouTube channel featuring 180+ videos on how to use our plugins, and topics such as installing WordPress, how to beef up your security and choosing the right web host.

Providing support for clients with little to no experience with WordPress can be a costly exercise, both in time and money. Who’s got time for hand holding?

But with our videos – put together by our awesome in-house video team – you can help your clients right from the comfort of their WordPress install. Just integrate our videos into their WordPress dashboard and you’re good to go.

White label videos
We’ve got lots of tasty white label videos and YouTube tutorials.

White Label Videos

Our embeddable instructional videos cover a wide variety of support and service issues common to WordPress.

Choose from 38 videos, all with clean audio, scripts and screen captures.

Each video is updated to coincide with the release of the latest version of WordPress.

Video topics include:

  • How to use the media library
  • Creating and editing users
  • Using widgets
  • Editing posts and pages
  • Managing comments
  • Changing passwords
  • Embedding media

Best of all, WPMU DEV hosts the video files, saving you valuable bandwidth and site speed. Simply embed the video code by copying and pasting wherever you need them.

Integrated Video Tutorials Plugin

You can easily provide access to WPMU DEV’s collection of white label videos using our Integrated Video Tutorials plugin.

Once activated, the plugin provides a library within the WordPress admin area where you can preview and watch tutorials.

It’s like having your own WordPress video training team at your fingertips.

WPMU DEV YouTube Channel

Having trouble with access levels in Membership? Setting up MarketPress eCommerce for the first time? Not sure which settings to use in Appointments +?

Our YouTube channel features helpful tutorials to help you make the most of our plugins and any settings you may find confusing.

Our channel includes videos on:

  • Setting up Appointments +, MarketPress eCommerce, Membership and more
  • How to add extra layers of security to your site
  • Setting up your own fundraising site with our Fundraising plugin
  • What is a blog?
  • Installing WordPress
  • How to set up WordPress Multisite

If you’re thinking about trying out one our plugins, our YouTube videos give an in-depth behind the scenes look at how our plugins work.

From time-to-time we also feature comprehensive guides, such as our recent Security Essentials series. This guide offers a great introduction to WordPress security, as well as a timely refresher for more experienced WordPress folk.

So if you’re looking for a great guide to help a new client or just need a little help with a plugin, check out our videos. While our YouTube channel is available for free, you’ll need to sign up for a WPMU DEV membership to access our white label video collection.

Have you used our videos? Isn’t our video team the best ever? Tell us in the comments below.

http://premium.wpmudev.org/blog/support-your-clients-with-white-label-videos-and-awesome-tutorials/feed/ 7
How to Install Breadcrumbs in WordPress and Why You Should http://premium.wpmudev.org/blog/wordpress-breadcrumbs-seo-ux/ http://premium.wpmudev.org/blog/wordpress-breadcrumbs-seo-ux/#comments Mon, 07 Apr 2014 15:30:00 +0000 http://premium.wpmudev.org/blog/?p=127978 Did you know that there is a “Breadcrumb Team” at Google?

‘Tis true.

And by “breadcrumbs” here, of course I’m talking the links that appear at the top of web pages and map out the location of a page in a hierarchy,  like WordPress > Plugins > Photo Gallery Plugins.

Anyway, back to this “Breadcrumb Team.”

Near the beginning this video (around :25) by Matt Cutts, who is head of Google’s webspam/search quality team, he gets a question about breadcrumbs, says he wasn’t sure of the answer, and so he asked “the Breadcrumb Team or folks who work on breadcrumbs.”

Now, I seriously doubt that “the folks who work on breadcrumbs” do nothing else at Google. But I labor to make this point in order to show the importance of breadcrumbs.

If there are people at Google dedicated to them, then they must be fairly important.

Breadcrumbs in Search Results

Google having people dedicated to breadcrumbs isn’t the only reason we know they’re important. In fact, it’s not even the most convincing one.

We know breadcrumbs are important in Google because they actually show them in their search results. If you’re lucky, that is. Or maybe I should say: If you’re good.

Take a look at a screenshot where the results for wordpress.org show breadcrumbs instead of a single URL.


Merely implementing breadcrumbs on your site, however, doesn’t automatically guarantee that you will start seeing them in your search results. You need to have a site that Google trusts and believes is something of an authority.

That said, it’s not hard to see that Google thinks they’re a good thing. And so implementing them might be a good idea if you’re looking for one more little push toward gaining more authority and upping your SEO score.

Good for User Experience

Breadcrumbs can help search engine spiders crawl your site and understand its architecture. So there’s a technical reason for breadcrumbs.

But at least as important is that breadcrumbs can help with user experience. They can help users not only know where they are, but they can help them get easy access to other pages they might need.

After all, Google puts breadcrumbs in their own search results. They don’t do this to make it easier for search bots to crawl search pages. They do this because they believe it improves user experience.

And, of course, Google even use them on their own info pages. Take a look at the screenshot below on a page for, well, breadcrumbs.


How to Implement Breadcrumbs

OK, if you’re convinced, then you’ll probably want to know how to implement them on your own site.

You can either go the plugin route or the more manual route.

Some SEO plugins may contain a breadcrumbs component. But there are stand-alone breadcrumb plugins too. The most popular is Breadcrumb NavXT.

With about 1.3 million downloads and  4 ½ stars on the WordPress.org directory, it has a pretty good track record.

It gives you lots of options in the settings (many more than you probably thought possible for breadcrumbs), and it’s easy to set up.

Inserting Breadcrumb Code

You will need to insert a bit of code into your theme where you want the breadcrumbs to appear. For most people, that’s going to be at the top of the content. And the easiest way to do that is to insert the code into your header.php file near the bottom.

Here’s what my test looks like.


Breadcrumbs without a Plugin

For those who don’t like plugins, it’s possible to get breadcrumbs without a plugin. I found at least one solution on Cazue.com.

You should also double check the backend of your theme to see if breadcrumbs are already built in. Sometimes they are.

What About WPMU DEV Breadcrumbs?

Before someone else mentions it, allow me to. You may notice that we have no breadcrumbs on this site. (At least at the time of writing.)

Before looking into it deeper, I hadn’t thought a lot about breadcrumbs. I knew they existed, of course, and I was tangentially aware of some possible SEO value, but I hadn’t given them a lot of thought.

Now that I have given them some more thought, I think I’ll be lobbying for inclusion here. So maybe we will get them, or maybe we won’t.

But that brings up another important point. If you feel that breadcrumbs somehow detract from the user’s experience on your site, then you may want to go ahead and skip them.

Breadcrumbs are meant to make the user’s experience better. If they aren’t doing that for one reason or another, and going without them would be better, then by all means, go for “better.”

As always, better is better.

Photo: a crumb of comfort

http://premium.wpmudev.org/blog/wordpress-breadcrumbs-seo-ux/feed/ 1