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 Tue, 22 Apr 2014 21:32:53 +0000 en-US hourly 1 http://wordpress.org/?v=3.8.2 Get Your Own Personalized Shortened Links Like Bit.ly with WordPress http://premium.wpmudev.org/blog/wordpress-link-shorten-url/ http://premium.wpmudev.org/blog/wordpress-link-shorten-url/#comments Mon, 21 Apr 2014 12:00:46 +0000 http://premium.wpmudev.org/blog/?p=128368 Ever wanted your own personalized domain for shortened URLs like bit.ly? Or, for example, the way we use wp.mu here at WPMU DEV?

Well, it’s possible. And perhaps the easiest way to achieve it is to go ahead and run things through Bit.ly, letting them do most of the heavy lifting, but also letting them do some tracking and stat keeping for you too.


Our Example

Suppose you had a domain name like:


(The .com being taken, of course.)

But let’s also suppose you also had the domain name shor.ty.

(No, the .ty extension doesn’t actually exist.)

Wouldn’t it make sense to shorten your URLs to use the shor.ty domain? That’s what we’ll do in the example below.

Just follow the steps.

Step 1: Sign Up for Bit.ly

Sign up for a Bit.ly account or sign into your existing account.

Step 2: Install Plugin

Install and activate the WP Bitly plugin.

Step 3: Get OAuth Token

Once the plugin is activated, go to the settings page for it. The settings for this plugin happen to be at the bottom of your Writing page settings: Settings > Writing.

You will see the WP Bit.ly Options there. It first asks for an OAuth Token. If you’re signed into Bit.ly, when you click on the link provided under the red box, it should take you to the right page in your Bit.ly account.

You may have to verify your email address if you haven’t done that.

Get your token from Bit.ly, and then go back to your settings and put it in the red box. If everything is all right, the box should turn white when you save the settings.

Below that box, you will also see which types of content you want these short links generated for (posts, pages, etc.). Select what you’d like there.


Step 4: Set Up Short Domain

Assuming you already have a short domain you’d like to use (like shor.ty), go back to your Bit.ly account now and set it up there.

In the top right-hand corner of your account page, you’ll see your login name with a little arrow by it. Clicking on that arrow gives you a drop-down menu. Choose “Settings” from that menu.


Once in the Settings section, click on the “Advanced” tab at the top.

In the Advanced tab you can read Bit.ly’s explanation about setting up your own domain.

Essentially you will need to click “Personal” or “Business.” Clicking “Business” takes you to a sign up page for “Brand Tools.” After a little poking around, it would appear that “Brand Tools” cost $995/month.

Instead of pulling out my credit card, I clicked the free “Personal” option instead. It was a much less difficult decision than you might imagine.

On the next page, you will need to put the domain you will be using as your “short domain” in the box at the top (e.g. shor.ty).

And then a little below that, Bit.ly gives you an IP address to put into the A Record spaces for you domain. (See next section.)


Step 5: Set Up A Record

For this next step, you’ll need to go into your account at your domain registrar and change your A Records for the domain you’re using (e.g. shor.ty), putting in the IP address Bit.ly gives you.

Because different registrars are set up differently, it’s hard to say exactly how you can get to your A Records, but they are a pretty common setting, and so just hunt around a while. You’ll probably first need to click on something that says “manage domain” or something similar first.

You may also need to look under DNS Settings or something similar.

If you can’t find how to get to your A Record settings, then do a search. Again, it’s a pretty common thing, and so your registrar should have instructions for you.

Barring that, of course you can contact your registrar.

Once you find your A Record settings, it’s pretty easy. Just insert the new IP into the @ section and the www section, then save your changes.


Step 6: Verify Your A Record

Next, go back to Bit.ly and verify your A Record settings.

It may take a little while for things to resolve, but that should be it.

Step 7: Get Shortlinks

Now, every time you publish a post and then click the “Get Shortlink” button beside your URL, you’ll see your shortname domain pop up in the shortlink box.


Short Stuff

And that’s it. Now you’ll have your own shortened domain for links in places like Twitter, etc. As well, as mentioned, running your domain through Bit.ly gives you the added advantage of tracking those links with their stat service.

http://premium.wpmudev.org/blog/wordpress-link-shorten-url/feed/ 3
Let Users Sign In and Recover Passwords On The Front-End Of Your WordPress Site http://premium.wpmudev.org/blog/let-users-sign-in-and-recover-passwords-on-the-front-end-of-your-wordpress-site/ http://premium.wpmudev.org/blog/let-users-sign-in-and-recover-passwords-on-the-front-end-of-your-wordpress-site/#comments Sat, 19 Apr 2014 15:00:00 +0000 http://premium.wpmudev.org/blog/?p=128239 Earlier this month, Rae published a great post on how to fully customize and brand your site’s login page.

If you only have 15 minutes though, there is an alternative and that’s to add front-end login, registration and password recovery directly into your site’s pages and sidebars.

Weekend WordPress Project logo
Use widgets and shortcodes to brand your sign-in, register and forgotten password functions.

The problem with the builtin sign-in, register and password recovery forms are that they carry the WordPress branding and don’t look anything like your site.

Whilst you can do some amazing things with the sign-in page, there is a quicker path to branding these pages as your own and that’s to have all the action take place in a page of your website.

Sidebar Or Page (Widget Or Shortcode)?

Your first decision is to decide whether you want to allow login from a sidebar (a widgetized area). This will be mostly dictated by your theme layout and perhaps also how your theme responds when viewed on smaller devices such as tablets and mobiles.

Many themes either move sidebars to the footer or drop them altogether on the smaller screens which is not going to be too useful if that’s where your sign-in form is.

The alternative is to use a new or existing page. Unlike widgets this won’t make the form available on every page, of course, but does mean that you don’t have to worry about the form disappearing on those small devices.

Adding A Sign-in Widget

Screengrab of the tabbed widget widget
A perfect widget except for
hard-coded phrasing.

There are many, many widgets out there that will put a sign-in form and more into a widgetized area but as is the case, no one plugin seems to be perfect. That said, I like these two:

Why aren’t they perfect? Well Tabbed Login Widget is great except that there are no settings to configure, so if you don’t like any of the headings or text, you can’t easily change it. On the plus side it does support signing in, registering (if enabled) and password recovery all from the widget.

Sidebar Login does a simple job, very well. It is highly configurable, even allowing user profile fields such as First Name to be merged into the widget display when a user has signed in but sign-in is all it does with the forgotten password link, for example, using the built-in WordPress page.

To use, just install either plugin and then go to Appearance > Widgets and drag the widget to the appropriate sidebar and, in the case of Sidebar Login, configure.

Using A Shortcode On An Existing Page

If you want to go down the page and shortcode path then Profile Builder is an excellent choice.

Once installed, this plugin provides the following 4 shortcodes:

  • [wppb-edit-profile] - to grant users front-end access to their profile (requires user to be logged in)
  • [wppb-login] - to add a front-end login form
  • [wppb-register] - to add a front-end user registration form
  • [wppb-recover-password] - to add a password recovery form

You can configure how these shortcodes behave through the plugin’s settings page which is accessed via Users > Profile Builder, including goodies such controlling which fields appear on the edit profile and registration page and whether to allow users to use their email address to sign-in instead of their username (always a good idea, I would suggest).

Screenshot of WordPress page with sign-in, register and recover password forms shown.
All the forms you need for front-end user management.

Profile Builder also has a premium version that comes with plenty more options.

To present a form to your visitors, you just need to add the appropriate shortcode to a page’s content.

And you’re done. A quick and relatively easy way to make the core functions of sign-in, register and forgotten password look as though they actually belong to your site.

http://premium.wpmudev.org/blog/let-users-sign-in-and-recover-passwords-on-the-front-end-of-your-wordpress-site/feed/ 0
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/ 2
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