WPMU DEV's Blog - Everything WordPress http://premium.wpmudev.org/blog The WPMU DEV WordPress blog provides tutorials, tips, resources and reviews to help out any WP user Thu, 17 Apr 2014 00:18:47 +0000 en-US hourly 1 http://wordpress.org/?v=3.8.2 WordPress 3.9 “Smith” is Out http://premium.wpmudev.org/blog/wordpress-3-9-smith-is-out/ http://premium.wpmudev.org/blog/wordpress-3-9-smith-is-out/#comments Thu, 17 Apr 2014 00:00:00 +0000 http://premium.wpmudev.org/blog/?p=127956 The latest version of WordPress has been released.

Named “Smith” in honor of jazz organist Jimmy Smith, WordPress 3.9 aims to “close the gap” between what you see when creating posts in the backend of WordPress and what you see published on your site.

This release includes a raft of improvements that build on features in previous versions of WordPress, including quick image editing, the ability to drag and drop images directly into the visual editor, gallery previews, audio and video playlists, live widget and header previews and a new theme browsing experience.

WordPress 3.9 is available for download or update in your WordPress dashboard.

WordPress 3.9 Major Features

Improved Visual Editor

Visual editor
Preview galleries within the visual editor before they go live.

TinyMCE, the software that powers the visual editor behind the scenes, has been updated to the latest version 4.0, giving the interface a cleaner and more streamlined look.

The “Paste from Word” button has been removed, so no more wasting time cleaning up messy formatting (hurrah!).

The visual editor now allows you to edit images while editing posts, so you can quickly scale, crop and rotate images.

One of my favorite new features is the ability to drag and drop images directly into posts. Simple stuff.

Live Widget and Header Previews

The Customizer has been updated to include widgets, so you can now add, edit and rearrange the widgets on your site without having to save, switch windows and refresh your site. Now you can preview changes live and only save them when you’re ready.

The header image tool has also been improved, allowing you to upload, crop and manage headers in the Customizer.

Widget management
You can now manage widgets from the Customizer and preview settings before you hit save.

Audio and Video Playlists

Audio playlist
Easy audio and video playlists have been added to WordPress 3.9.

WordPress 3.9 includes the ability to create audio and video playlists. This is a great for musicians who want to share their music, and likewise for videographers.

You can upload multiple audio/video files and add them to a playlist from the media uploader.

Improved Theme Browsing Experience

The theme browsing interface has been updated again after it was overhauled in WordPress 3.8.

It’s now a much easier and smoother experience to search through themes you may want to preview and install.

Under the Hood Updates

The Make WordPress Core blog has been updated in the lead up to the release of WordPress 3.9 with important developer updates:

  • Much of the bootstrap code for Multisite in ms-settings.php has been refactored with the intent to improve the handling and detection of domains and paths for sites and networks in WordPress core.
  • WordPress 3.6 introduced HTML5 versions of popular template tags, starting with comments, the comment form and the search form. WordPress 3.9 adds galleries and captions.
  • While it has been possible to symlink plugins in the past, functions such as plugins_url() return the wrong URL, which causes breakage in most plugins. This has been corrected with the help of a new function, wp_register_plugin_realpath().
  • An extra layer has been added to WPDB, causing it to switch to using the mysqli PHP library, when using PHP 5.5 or higher. For plugin developers, this means that you shouldn’t be using PHP’s mysql_*() functions any more – you can use the equivalent WPDB functions instead.
  • Inline code documentation. Every action and filter hook in WordPress is now documented, along with expanded documentation for the media manager and customizer APIs.
  • External libraries have been updated: TinyMCE 4, jQuery 1.11, Backbone 1.1, Underscore 1.6, Plupload 2, MediaElement 2.14, Masonry 3.
  • New utility functions. Identify a hook in progress with doing_action() and doing_filter(), and manipulate custom image sizes with has_image_size() and remove_image_size().

For detailed information on these developer updates, check out the Make WordPress Core blog.

Also, props to the 267 contributors who helped with WordPress 3.9. A new record!

WordPress 4.0

With WordPress 3.9 out of the way, we can now look forward to WordPress 4.0.

We’ve had a crack at predicting what it will including. Check out our post What To Expect In WordPress 4.0! There might be some features you don’t expect…

What’s your favorite features in WordPress 3.9? What do you think should be included in WordPress 4.0? Tell us in the comments below.

]]>
http://premium.wpmudev.org/blog/wordpress-3-9-smith-is-out/feed/ 2
10 WordPress Plugins for More Powerful and Flexible Scheduled Posts http://premium.wpmudev.org/blog/wordpress-scheduled-posts-plugins/ http://premium.wpmudev.org/blog/wordpress-scheduled-posts-plugins/#comments Wed, 16 Apr 2014 15:30:00 +0000 http://premium.wpmudev.org/blog/?p=128235 Some of us are more organized than others. Some have our future posts already written and scheduled out a month in advance.

While I can’t claim to be one of those, here at WPMU DEV, we do use the scheduled post option in WordPress quite a lot. In fact, it’s rare that any post here will be written and then published straight away.

I’d say that about 98-99% of the posts you see here have been scheduled to publish. And so we surely appreciate that function.

But that function, like most, can be improved upon. And so below we’ve found 10 plugins to help do just that – all doing different jobs, but all working to help make WordPress scheduled posts more powerful and flexible.

1. Schedule Content Actions

schedule-content-actions

Where WordPress lets you schedule posts for publication, this plugin lets you schedule all sorts of functions associated with posts.

You can schedule a post to become a sticky, and then you can schedule it to unstick.

You can schedule comments to be opened, and then you can schedule them to close.

You can schedule to unpublish a post, and then you can schedule what to do with it – delete it, trash it, set it draft.

And so if you’re looking to schedule more than the post itself, this plugin offers a number of nice options.

2. Bump the Schedule

bumped-posts-2

The Bump the Schedule plugin is very handy for anyone who sets up a lot of scheduled posts in advance.

Let’s say you have 30 posts scheduled out for the next month. But something big has just happened in your industry. You know you’re going to spend the next 2 days covering it exclusively, and so you want to push ALL of your scheduled posts forward by 2 days.

In order to do that, you’ll have to go and reschedule each of the 30 posts by hand (making sure not mess each one up as well).

With the Bump the Schedule plugin, you can do that with the click of a button. Just enter when you’d like to start the bump, and how many days you’d like to bump the schedule, and then simply click.

3. Post Expirator

post-expire

This plugin lets you schedule a post to expire. It gives you a range of choices for what happens to the post when it expires. You can set it to go to Draft, Private, Delete, or you can move it into a special category, which makes for easier review: Category Replace, Category Add, Category Remove.

It also comes with a shortcode that will let you show the expiration time.

4. Dashboard Scheduled Posts

dashboard-widget

This plugin automatically adds a widget to your backend dashboard that shows all your scheduled posts. Very convenient if you happen to schedule a lot of posts.

Clicking on the titles takes you to the edit screen for that post.

5. Auto Schedule Posts

auto-schedule

The Auto Schedule Posts plugin is perhaps especially good if you have a number of writers on your site. Or perhaps you accept lots of posts from the public.

It lets you set somewhat random times for scheduled posts that fall within the parameters that you define.

For example, say you have a site with 10 writers, all pumping out content non-stop. However, you don’t want those posts going out at certain times (in the middle of the night, on the weekend, or even after 5 p.m. perhaps). You also don’t want writers posting on top of each other, and you don’t want certain writers taking up all the good time slots.

This plugin can solve all those issues, and you don’t even have to hire a professional logician. You could, for example, post only between the hours of 10 a.m. and 5 p.m. Monday-Friday, and you could both space those posts out and also randomize them so that no one writer gets preference over another.

This plugin catches posts before they are published on the front end; however, it might not play nicely with other plugins such as Twitter plugins that automatically tweet a post when it’s published. Make sure you test thoroughly for conflicts such as this.

6. Internal Linking for Scheduled Posts

internal-linking

When you create a link in the WordPress editor, at the bottom of the box that pops up, you get a list of possible posts to link to. This list, however, doesn’t include posts scheduled for the future.

This plugin takes care of that, listing future posts as well. If you do a lot of scheduled posts, then this should come in handy.

Obviously you will need to be careful not to link to a post that hasn’t published yet. But, for example, if it’s Monday, and you already have a post scheduled for Wednesday, and you’re currently writing a post for Friday, then you could create a link in the Friday post that goes to the Wednesday post – all without leaving your link creation box.

Normally you’d need to go digging through your posts to first find the scheduled post, and then do a little more digging to then find the URL. Then you’d need to traipse back to your editor to insert the link.

7. Schedules Posts Calendar

post-schedule-calendar

The Schedules Posts Calendar gives you a calendar with the current day’s date highlighted, and then down below it you have a list of all the scheduled posts.

While the layout is nice and helps you to see things clearly, it appears that there are no links (to the actual posts, for example), and it also seems that the future posts don’t appear on the calendar (only the current day is highlighted).

Still, this gives you a handy overview of your upcoming posts, along with a calendar for easy reference.

8. Show Off Upcoming Posts

upcoming-posts

The Show Off Upcoming Posts plugin lets you list scheduled posts in a widget on the sidebar. While many may not be crazy about that idea, this plugin points to the usefulness of doing such a thing by allowing you to encourage people to subscribe to your RSS feed or to sign up for your email newsletter.

And that seems like a pretty smart thing to do.

If you have enticing titles, but they aren’t yet published, you just may get some more followers with this little trick.

9. Drafts Scheduler

draft-scheduler

This plugin lets you schedule all your Drafts automatically (and only Drafts). You can schedule them sequentially or randomly at set intervals. You can also set it to post completely randomly within a certain time frame.

While this plugin might seem a little odd for most people’s needs, for those who might need it, well, here it is. With about 24,000 downloads in the WordPress directory, it seems more people than you might think fall into that category.

10. WP Missed Schedule

missed-post

And finally we come to the WP Missed Schedule plugin.

If you schedule a lot of posts, as we do here at DEV, then there’s a good chance you’ve run across the problem of your scheduled posts not publishing. When that happens, you will get a message that the post “Missed schedule.”

I know we’ve had this issue, and lots of others have too. This plugin purports to fix the problem.

But of course the problem isn’t easily replicated, and so you’ll just have to take the word of others who have used it. With over 100,000 downloads, 46 5-star ratings, and a 4.9/5 average, I think it’s safe to say that people are finding success with it.

Photo: Aztec/Mayan Calendar

]]>
http://premium.wpmudev.org/blog/wordpress-scheduled-posts-plugins/feed/ 3
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/ 1
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.

featured-messy-photos

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.

uploading

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.

hover

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.

bulk-move

This will move them into the category.

moved-images

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.

filter-by-cat

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.

filter-in-uploader

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”
create-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/ 1
Pay With a Like and Watch Your Site Go Viral http://premium.wpmudev.org/blog/pay-with-a-like-watch-your-site-go-viral/ http://premium.wpmudev.org/blog/pay-with-a-like-watch-your-site-go-viral/#comments Tue, 15 Apr 2014 11:30:00 +0000 http://premium.wpmudev.org/blog/?p=128238 While much of our lives happens online these days, social interactions are still the most powerful way to connect with people when marketing a product.

Once you get your foot in the door with users on Facebook, Twitter, Google + and Linked In, word of mouth can spread quickly as people promote a site of product to their friends, family and colleagues.

Pay With a Like can help you leverage word of mouth marketing. Once installed and activated, visitors to your site will be asked to “Like” your content in exchange for access to articles, videos, downloads or any other content.

Pay With a Like
Boost your brand awareness with Pay With a Like.

Instead of exchanging cash for the privilege of accessing your content, all your users need to do is share your content on social media.

It’s a big idea in a simple plugin that will help you build brand awareness and drive traffic to your site.

Major Updates to Pay With a Like

Since the last major release of Pay With a Like, the plugin has been totally rewritten and includes some exciting new features.

Pay With a Like
Pay With a Like looks great with any theme, including Twenty Fourteen.

New Look User Interface Settings

The UI settings have been given a fresh, new look and now comes with its own menu section.

Improved Facebook Support

We’ve added deeper support for Facebook API and Facebook Query Language to check for previous likes.

The latest update also includes support for Facebook pages. If a visitor has liked your Facebook page, you can grant them automatic access to your hidden content.

This is a fantastic feature if you want to promote your business’s Facebook page and grow your fan base.

Facebook app setup
Set up a Facebook app and take advantage of deeper integration with Facebook API.

New Internationalization Options

Pay With a Like now comes with the option to set the language used for buttons if no in the default site language.

Keep Track of Your Stats

We’ve added cool new charts that show statistics for social button usage on your site so you can monitor which social media channel is working best for you.

There’s also a new section that displays your “Top 10 Posts” according to likes and a “Top 10 IP Addresses.”

Better Social Button Styling

Social buttons
More options have been added for social button styling.

New options have been added to support social button styles and layout.

Buttons come with vertical, horizontal and no count options so you can choose a style that best matches your site design.

Other Cool New Features

We’ve also added:

  • Support for loading hidden content via AJAX, which should help WP Engine customers and any experience caching plugin issues.
  • Customization options have been added to the post metabox to override the default settings.
  • Support for real shortcode via the do_shortcode() function in WordPress.

Why Use Pay With a Like?

If you want to protect you content but don’t want to monetise your site, Pay With a Like is perfect for helping you build brand awareness in exchange for access to your content.

Users could like your site in exchange for access to:

  • News articles
  • Your band’s latest audio track
  • Your online store’s latest coupon code
  • Photographic images
  • Video tutorials
  • Reviews

Pay With a Like allows you to protect your content behind a social share wall – it’s like a paywall, where readers pay to access content, except you encourage them to share your site rather than ask for cash.

It’s the smartest way to get your site out there, drive traffic and push your site up the search engine rankings.

Pay With a Like is Easy to Use and Looks Great

Adding Pay With a Like to your posts and pages is easy. Just select your content and click the Pay With a Like button that is added to the visual editor.

The plugin blends in seamlessly with any theme and comes with various button stylings. But if you want to add your own styling, you can customize the look and feel with CSS and shortcode.

Download Pay With a Like today and encourage your users to spread the word about your site.

]]>
http://premium.wpmudev.org/blog/pay-with-a-like-watch-your-site-go-viral/feed/ 13
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:

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

and replace body with the tab label, for example:

1
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:

1
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/ 0
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 Hide or Highlight the Screen Options Tab in WordPress http://premium.wpmudev.org/blog/how-to-hide-or-highlight-the-screen-options-tab-in-wordpress/ http://premium.wpmudev.org/blog/how-to-hide-or-highlight-the-screen-options-tab-in-wordpress/#comments Fri, 11 Apr 2014 12:00:19 +0000 http://premium.wpmudev.org/blog/?p=128170 The Screen Options tab at the top of pages in the WordPress admin section often goes unnoticed.

Sitting up in the corner of the page as it does, the Screen Options tab often goes unnoticed.
Sitting up in the corner of the page as it does, the Screen Options tab often goes unnoticed.

For some admins, that’s a good thing. For whatever reason, they don’t want users that have access to the backend playing around with it, and they hope it continues to go unnoticed.

For other admins, however, the very opposite is true. They actually WANT users to notice it. They feel it will help them do what they need to do more easily.

The Screen Options tab contains some important options.
The Screen Options tab contains some important options.

In this post, we have good news for both types of admins. We have a way to hide the Screen Options tab completely, and we also have a way to highlight it so that it might attract a little more attention.

Hiding the Screen Options Tab

There are two options for hiding the Screen Options tab.

Code Method

The first is more manual and wide-sweeping. If you place the following snippet of code into your functions.php file, the Screen Options tab will disappear across the whole backend for all users except the admin.

(As you’ll be changing your theme with this solution, you should probably consider either creating a child theme or making your own simple plugin to use.

 function remove_screen_options_tab() {
       return current_user_can( 'manage_options' );
  }
  add_filter('screen_options_show_screen', 'remove_screen_options_tab');


Plugin Method

And the there is the Screen Options and Help Show Customize plugin that will do this trick for you. But it also gives you more control at the same time.

This plugin lets you hide both the Screen Options tab and the Help tab on whichever pages you like, and also for whomever you like.

So, for example, you could hide the Screen Options tab only on the New Post screen for everyone under the level of Admin, but leave it visible on the Media screen – but only for Editors and above.

Your options are totally open for where (New Post, Media, etc.), what (Screen Options or Help tab), and who (Admin, Editor, Author, etc.).

screen-options-plugin

Highlighting the Screen Options and Help Tabs

The second plugin, called Seeing Red, does the opposite of the above and actually highlights the Screen Options and Help tabs in red.

While it’s not overly garish, it probably will help to catch a user’s attention – at least eventually.

seeing-red
And so there you are — now you have options concerning your options.
]]>
http://premium.wpmudev.org/blog/how-to-hide-or-highlight-the-screen-options-tab-in-wordpress/feed/ 0
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.

featured-private-blog


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.

rss

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”

search-engine-block


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