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 Mon, 22 Sep 2014 16:30:00 +0000 en-US hourly 1 http://wordpress.org/?v=3.9.2 How To Share Media Across WordPress Multisite http://premium.wpmudev.org/blog/how-to-share-media-across-wordpress-multisite/ http://premium.wpmudev.org/blog/how-to-share-media-across-wordpress-multisite/#comments Sat, 20 Sep 2014 15:30:00 +0000 http://premium.wpmudev.org/blog/?p=131888 WordPress multisite installs might use a single codebase but when it comes to media each site operates in its own silo.

If you are using multisite to publish multiple sites then reusing media across your sites either means inserting with a url or loading the image up twice. Hardly satisfactory.

In this Weekend WordPress project, we’ll take a look at how to share images, video and audio across your site, saving you considerable time, trouble and disk space.

Featured image
Sharing media across your multisite has enormous time saving benefits

The Network Shared Media plugin by Joost de Keijzer does exactly what it says on the tin: allows media to be shared across a WordPress multisite network.

Why is this important? In a default multisite install each site has its own media library, with no built-in capabilities to easily access media from other sites. The choices are either use the Insert from URL facility or load up the image into each site.

If you have a widely used set of images, such as logos or icons or portraits, then you have to either link to the original source (and trust that the URL doesn’t change) or load each item up in the site where you want to use it.

Clearly, the better option is to be able to select media from any site on the multisite network for insertion into a post and to not have to duplicate it. And preferably, have the URL look and feel as if it is local to the post’s site.

This is exactly what Network Shared Media provides.

Installing and network activating the plugin (there’s no need to activate on the individual sites) adds a new option, Network Shared Media to the Add Media dialog:

Screengrab of the Add Media dialog showing hte Network Shared Media link and the individual blog links
A new Network Shared Media option give you access to any network site’s media

Clicking on this new option, displays the media as normal but creates a new menu bar with links to each site on the network. Clicking on a site brings up the media for that site.

Selecting and inserting a media item is exactly as before (clicking on the Insert into Post button) but what’s interesting is that the plugin localizes the URLs, so although there is only one source, the URL is for the current blog, not the original.

For example, here’s the img tag and a tag for an image inserted into a post on Blog A but that physically actually resides in the primary site’s uploads folder (http://www.multisite.dev/wp-content/uploads).

1
2
3
4
5
<a href="http://www.multisite.dev/bloga/wp-content/uploads/2014/09/iphone3.png">
<img class="alignnone size-medium wp-image-nsm-1-11"
src="http://www.multisite.dev/bloga/wp-content/uploads/2014/09/iphone3-155x300.png" 
alt="" width="155" height="300" />
</a>

No Featured Image Support

The only real drawback with the plugin is that it’s functionality doesn’t extend to the Featured Image selection tool.

This is not really the plugin’s fault as, and I hadn’t ever noticed this before, the Featured Image dialog is not the same as the Add Media button. It only allows for picking directly from the site’s media library or uploading a new item and doesn’t support Add Media functionality such as Insert from URL.

One For The Multisite Publisher’s Essential Plugin List?

If you use WordPress in multisite mode to manage several websites, then this plugin offers a time-saving way of sharing common media across those sites.

For that reason alone, it’s a prime contender for the Essential Plugin list for WordPress multisite operators.

]]>
http://premium.wpmudev.org/blog/how-to-share-media-across-wordpress-multisite/feed/ 6
Build Apple-Inspired Full Page Scrolling Pages For Your WordPress Site http://premium.wpmudev.org/blog/build-apple-inspired-full-page-scrolling-pages-for-your-wordpress-site/ http://premium.wpmudev.org/blog/build-apple-inspired-full-page-scrolling-pages-for-your-wordpress-site/#comments Thu, 18 Sep 2014 12:00:00 +0000 http://premium.wpmudev.org/blog/?p=131886 That full page scrolling is becoming increasingly popular is hardly surprising as it taps into our paper-based reading experiences and provides all the visual clues about needing to read to the end before “turning the page”.

In this post, I’ll show you how to leverage all the advantages of full page scrolling in your WordPress site by integrating the fullPage.js library – the gold standard of full page scrolling – to build an Apple-inspired, full page, scrolling landing page with animation.

5 Apple iPhone 5Cs with the title Apple fullPage.js Demo
Build impressive pages with animation and full page scrolling

This post was inspired by the examples that Alvaro Trigo has put together to showcase his fullPage.js jQuery plugin which delivers full page scrolling both vertically and horizontally. In particular, the clone of the now-superseded promotional page for Apple’s iPhone 5C is particularly impressive, combining full page scrolling and animation.

Have a look at the demo as this is what we are going to recreate in WordPress. To do this, we’ll need to:

  1. Create a template specifically for using fullPage.js
  2. Ensure that any post that uses fullPage.js is rendered using the new template
  3. Mark-up post content so that it is fullPage.js compatible
  4. Add custom post-specific CSS for injecting into the output
  5. Add custom post-specific javascript for injecting into the output to initialize fullPage.js

Steps 2 to 5 are facilitated via a custom plugin. There is a WP FullPage plugin in the WordPress.org plugin repository but I have to confess that I had a hard time using it, so I resorted to writing my own, much simpler version.

Step 1 – Creating A Specific fullPage.js Template

As fullPage.js is, as the name suggests, full page, it needs to operate in as simple a template as possible, devoid of any headers, footers and sidebars that your current theme may have.

And that requires a custom template.

The plugin comes with a simple template (see /templates/fullpage.php), designed to let fullPage.js be completely unencumbered as it does its work:

As you can see, there’s really not much to it. It outputs the standard CSS, the jQuery plugin (both contained in the plugin’s directories) and jQuery itself as well as any custom CSS (this is held in the post’s fullpage_css custom field).

jQuery and jQuery UI are pulled in from the Google CDN, so change this if you prefer to use a local copy.

The only actual content is the post’s filtered content but you’ll notice that we first remove the wpautop filter from the the_content function so that we can better lay out the content without having to worry about superfluous <p> tags being added that can easily break your content.

The final action of the script is to output the javascript to initiate fullPage.js on the page itself. If the post has the fullpage_js custom field set then this content is used as the initialization script otherwise the default fullPage.js initialization script is used.

Step 2 – Ensure the New Template Is Used

It’s no good having a template unless it gets used of course, so the plugin that adds fullPage.js to your WordPress install, uses the template_include filter to change the template if the post is using fullPage.js.

The fullpage template is located in the plugin’s /templates folder.

Download, install and activate the plugin.

Step 3 – Mark-up fullPage.js Compatible Post Content

When porting the example across to WordPress, there were a number of decisions to be made about how much functionality should be abstracted.

To keep things initially simple, I’ve opted for (only!) 5 new shortcodes to model fullPage.js‘s basic structure:

  1. fullpage – this is the main container for a fullPage.js page; all content should reside inside this wrapper
  2. section – a section is effectively a page; has the following attributes:
    • id – adds an id which can be referenced in CSS or javascript
    • action – is currently translated to a class
  3. slide – similar to section in that it is a page but is intended for horizontal scrolling; should always be contained within a section; has the following attributes: 
    • bg – the url of an image to be used as the background image
  4. header - a fixed bar at the top of the page
  5. footer – a fixed bar at the bottom of the page

So, a basic fullPage.js structure would look something like this (in text mode):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
[fullpage]

[header]Header[/header]

[section id="section1"]
This is slide 1
This is slide 2
This is slide 3
[/section]

[section id="section2"]
<h2>Section 2</h2>
<p>This is section two!</p>
[/section]

[footer]Footer[/footer]

[/fullpage]

In the Apple example, this means that quite a bit of the mark-up is left as <div> tags.

Here’s the content marked-up with the shortcodes and the <div>s:

Step 4 – Add Post-specific CSS

One of the enormous benefits of fullPage.js is just how flexible it is and I wanted an implementation that didn’t restrict that flexibility at all.

So, I’ve left the adding of custom CSS to a textarea in a new post edit screen metabox created by the custom plugin.

Screengrab of the post edit screen showing the new metabox
A new metabox on the post edit screen allows full control over styling and initialization

This CSS is for custom styling only – there’s no need to define the structure of a section or slide, this is done in the standard CSS file

The post-specific CSS for the Apple demo is:

It’s pretty comprehensive and all the sections are styled beyond the standard styling. Of particular interest is the treatment of the #staticImg element. This is actually the green iPhone that slides from section 3 to 4 on scroll; this animation is controlled via the toggling of the moveDown and moveUp clauses.

Step 5 – Add Post-specific Javascript

I did think long and hard about whether I could abstract out the javascript to make it easier. WP FullPage does do this but I’m not sure how much time and effort it saves, so instead there’s a second textarea in the fullPage.js metabox that allows the inputting of the fullPage.js initialization script.

If you leave this empty then the standard script will be used but in this case the Apple demo requires a little more interaction:

The script is an initialization of fullpage (the #fullpage id is automatically added when processing the [fullpage] shortcode) and consists of setting properties and specifying functions to call on fullPage.js custom events.

The 2 custom events used here are afterLoad and onLeave and refer to the displaying of a section. The events are used to trigger functions that toggle classes on various elements in order to trigger an animation.

For example, in the afterLoad function, if the index is 2 (that is the second section is being displayed) the images in the section have the active class added (these trigger the horizontal slide-ins).

Step 6 – Finalizing And Running The Demo

Before you can view the final demo, you’ll need to insert the images into your post. I’ve included them in the plugin’s folders, so locate that folder and do a batch upload.

You’ll need to change the filenames in the content to match your installation.

Once the images are loaded, you are good to go. If you view the post, you should be looking at something similar to this:

The Apple iPhone 5C line-up with the title Apple fullPage.js Demo
The first section in the impressive Apple demo

On a desktop use the mouse scroll-wheel to navigate the sections, on a tablet swipe up and down (although be aware that the demo is not really designed for a tablet).

Tip Of The Iceberg

This is an impressive demo but, of course, all the hard work had already been done by Alvaro; all we had to do was make it WordPress-friendly.

That said, the basics of sections and slides should work out of the box, so you have the beginnings of a really very powerful tool for building some impressive landing pages, especially when those CSS3 transition muscles are flexed.

It would be a waste, however, to restrict fullPage.js to just landing pages. Alvaro’s additional examples such as the One Single Section (a full page slider sitting above normal website content) should fire up plenty of curiosity and it’s not hard to see fullPage.js being used to deliver a wide range of fullpage scrolling content that is at home both on the desktop or mobile devices.

I’ve included the Apple, One Single Section and Vertical Navigation Dots examples in the plugin’s /content folder, so have a play with this awesome library. Yes, there can be quite a bit of hand-coding involved but the results are definitely worth it.

What’s really required, is a little imagination.

]]>
http://premium.wpmudev.org/blog/build-apple-inspired-full-page-scrolling-pages-for-your-wordpress-site/feed/ 3
How To Add Background Videos To Your WordPress Posts http://premium.wpmudev.org/blog/how-to-add-background-videos-to-your-wordpress-posts/ http://premium.wpmudev.org/blog/how-to-add-background-videos-to-your-wordpress-posts/#comments Tue, 16 Sep 2014 15:30:36 +0000 http://premium.wpmudev.org/blog/?p=132120 Fullscreen background videos, used judiciously, bring a certain something to WordPress posts. They catch the eye, grab the attention of your visitor and start telling the story before the text can even get a word in.

But getting background videos to work on WordPress is much harder than it should be. Enough theme, browser and format gotchas to give even the most determined a headache. Luckily, we’ve got the aspirin you need.

And as a bonus, we’ve also got a bit of lateral thinking that might let you avoid the headache altogether.

Featured image with mountain scene and the words Background Video overlaid.
Grab your visitors’ attention and start storytelling before they even read a word

Fullscreen background video. Seems easy enough doesn’t it? But unlike background images, CSS holds no obvious solution for us.

We can’t simply open up our CSS and slap the URL for our MP4 video into the background clause and set the size to cover for fullscreen video magic. That’s in the ideal world.

In the real world, to make a background video requires:

  1. Wrapping the video in a div
  2. Positioning that div absolutely (or fixed if you don’t want it to move) to the top left of the viewport, setting its height and width to 100% and it’s z-index to 1 so that sits underneath the main content
  3. Using javascript to get the actual height and width of that div and then scaling up the video whilst keeping its original ratio to fill the entire screen
  4. Catching the screen resize event in order to do all that scaling again
  5. Catering for some unusual behavior in Chrome which displays a scroll bar when the div’s z-index is set to -1
  6. And “click to play” functionality for iOS devices because video autoplay is disabled on iPhones and iPads (thanks Apple!)

So you might be wondering, is it all worth it?

The answer is yes.

Have a look at this simple example from new WordPress compatible long-form creation tool entrant Storyform (the example screenshots use the video from this demo). Simple but effective. And there’s old favorites, of course, such as Pitchfork’s Daft Punk feature.

Nothing overly fancy but just that little movement is enough to really grab the attention and start the storytelling process.

A moving picture is worth considerably more than a thousand words.

Bringing Background Video To Your WordPress Posts

Those 6 tasks look a little daunting, and that’s because they are, so the first thing we are going to look at is how to use this custom plugin (download, instal and activate) that will de-daunt the process of adding video to a WordPress post.

The plugin supports a new self-contained shortcode: bgvideo. Adding this shortcode to a post’s content will generate a background video.

The shortcode takes the following attributes:

  • height – the native height of the video
  • width – the native width of the video
  • mp4 – the url for the mp4 version of the video
  • webm – the url for the WebM version of the video
  • ogg – the url for the Ogg version of the video
  • autoplay – whether the video should play immediately after it has loaded (default is yes)
  • loop – whether the video should play continuously (default is yes)
  • muted – whether audio should be turned off (default is yes)
  • fixed – whether the positioning is fixed meaning the background is always visible and the background scrolls over the top (default is yes)

The reason I went for a shortcode is that this shortcode can easily be generated by hijacking the built-in video shortcode.

Use the Add Media button in the post editor screen to select and insert a video into your post. Then jump into text mode and simply edit the video shortcode to bgvideo and add the source as an attribute.

Screengrab of Add Media dialog showing 2 videos and 1 image selected
Select the videos and the poster image to easily create the bgvideo shortcode

For example, this video shortcode

becomes this bgvideo shortcode

Once you’ve downloaded, installed and activated the plugin, the bgvideo shortcode will be turned into a background video.

But there’s still some work to be done.

Letting The Background Shine Through

It’s all well and good having a background video but if your content has a background applied then your video is going to remain hidden.

We need to add some custom CSS to remove anything that might block the video. In most WordPress themes, this means removing the background from the #page element.

We can do this by adding the following CSS to child theme or by using a plugin such as Simple Custom CSS:

1
2
3
#page {
background: none;
}

Playing Nicely With iOS Devices

Screenshot of post with fullscreen background video on an iPad with 'tap to play' button visible
No autoplay on Apple mobile devices needs a fallback solution

One of the really annoying aspects of HTML 5 video is that autoplay is disabled on iOS devices. Apple sees this as a bandwidth issue (even if the user is on WiFi) and that the downloading of multimedia requires a conscious decision.

In order to provide a graceful fallback for iPods, iPhones and iPads, you should always provide an image URL for the poster attribute. This image will be shown instead of the first frame of the video on any device that does not support autoplay.

The solution also helps make the fallback a bit easier on mobile users by providing a “tap to play” button. Using media queries, this button is only displayed on Apple mobile devices and when tapped will play the background video.

It’s far from perfect but it’s the best solution and does at least give your mobile users the option to view the video.

Going Fullscreen

First, let’s be clear that in this case “fullscreen” means the entire browser window, not the entire available display.

At the moment, your video will only be fullscreen if there is enough content. Most sites that employ background video ensure that the video is taking up the entire browser window in order to maximise its impact.

How you do this will very much depend on the theme you are using but as a rough guide, for the Isola theme that means expanding the post header to the full height of the browser.

In fact, what we actually do is expand the height of the .entry-header element (again, a common class in WordPress themes) to the height of the .bgvideo-wrapper element (as we know this is 100%). The following javascript achieves that:

As you can see, the function is attached to both the (document).ready and the (window).resize events to ensure that the height responds to a changing browser window size.

A Chrome Hack To Prevent Sidebars

While we are talking about javascript, this solution required a small hack to get around an issue in Chrome where setting the z-index on the .bgvideo-wrapper div caused the appearance of a scrollbar in Chrome (but not Safari or Firefox).

This caused much consternation and eventually after picking the brains of a proper front-end developer here at WPMU DEV HQ, a solution was found.

It’s certainly not pretty – the overflow property for the html element is set to hidden before the background video elements are resized and is then set to auto when the resizing is complete – but it works.

The Alternative - Using Animated Gifs Instead Of Video

At the start of this post, I lamented that adding background video wasn’t as simple as whacking an URL into the appropriate background property.

However, if we assume that the movement of the video is what hooks our readers then do we actually need video? Could we achieve the same thing with a carefully crafted animated GIF?

If we can substitute a GIF for a video, then we can avoid a lot of headaches:

  • we can simply use CSS to add the desired background animation
  • works on Apple mobile devices
  • no need to employ hacks to counter curious browser behavior
  • potentially much smaller file size

Whilst there are quite a few online services for converting video to animate GIFs, that’s probably not the answer and, indeed, the file size of the resultant image can be considerably larger than the original video.

But quite striking animated images are possible without breaking the file-size bank.

Here’s an atmospheric animated GIF of Heath Ledger’s Joker. And this is a little more mundane but no less impressive animated GIF of a Subway train. Both come in at less than 1MB.

So, if eye-catching movement is our aim, something a little more interesting than a static image, then an animated GIF may well fit the bill. As the 2 examples show, it’s not necessary to animate the whole image to get the required impact.

Best of all, we’ve already covered how to properly add background images to WordPress.

Just What The Doctor Ordered

As advanced as HTML 5 and CSS 3 are, adding a video as a background is nowhere near as simple as it should be.

The plugin here should help lessen potential headaches, although your theme might have other ideas, and the option of an animated GIF instead of a video might banish them altogether, especially if you are targeting iPad users.

Regardless of the pathway you choose, there’s no excuse for not trying to catch your visitors’ eye with that all-important movement.

]]>
http://premium.wpmudev.org/blog/how-to-add-background-videos-to-your-wordpress-posts/feed/ 2
Tweet Archived WordPress Posts and Boost Traffic to Your Site http://premium.wpmudev.org/blog/tweet-archived-wordpress-posts-and-boost-traffic-to-your-site/ http://premium.wpmudev.org/blog/tweet-archived-wordpress-posts-and-boost-traffic-to-your-site/#comments Sat, 13 Sep 2014 15:30:39 +0000 http://premium.wpmudev.org/blog/?p=132048 We have published a helluva lot of posts on the WPMU DEV, more than 4000 in fact. With a daily post schedule, we are constantly coming up with new articles to write about to help you, our dear readers, make the most of WordPress.

The only problem is, it can become somewhat disheartening when I’ve spent hours carefully crafting a post, it’s published, and then it’s quickly lost amongst the deluge of WordPress blogs articles pumped out in the internet each day never to be commented on again.

So how do you get around his? How can you bring back posts from your archive graveyard so they can again enjoy their 15 minutes of fame?

In today’s Weekend WordPress Project, we’ll look at scheduling and tweeting archived posts – and how it can dramatically boost traffic to your site from social media platforms like Twitter.

Evergreen Post Tweeter
Revive your old posts with the Evergreen Post Tweeter.

Tweeting Archived WordPress Posts

A few months ago I decided to experiment with our tweeting schedule on the WPMU DEV Twitter account. Previously, we were tweeting once a day and it was usually an automatic tweet whenever a post was published. Our support team was also replying to people who tweeted us, but we weren’t posting many of our articles from the blog.

Basically, we were neglecting our Twitter account.

So I upped the ante. I started tweeting some of our older posts from the past year at three hours intervals. I also tweeted our most recent posts more frequently and included links from The WhiP.

It made a massive difference. Traffic to our site from Twitter jumped by 30 per cent. Moreover, our posts were getting a second chance at exposure and comments to our blog increase.

The only problem was manually scheduling tweets was time consuming and, let’s face it, boring. It was time to find a solution.

The Evergreen Post Tweeter

After some searching and testing, I came across the Evergreen Post Tweeter plugin.

The plugin, created by former WPMU DEV writer Tom Ewer, lets you schedule and automatically tweet out links to old posts on your site.

The concept behind the plugin is simple: periodically tweet our old posts from your site that is “evergreen” content, i.e. posts that are an relevant today as they were when they were first published.

In Tom’s case, the plugin helped increase Twitter referrals to his site by about 250 per cent.

Increased Twitter traffic
Tweet “evergreen” content from your site and boost traffic to your site from social media.

The plugin is easy to install. Just activate it and go to your settings (Settings > Evergreen Post Tweeter). You’ll then need to sign into Twitter so the plugin can access your account.

The settings are fairly straightforward. You can choose the minimum and maximum age of posts you want to tweet, any categories/tags you want to specify and whether you want to shorten URLs.

Evergreen Post Tweeter
Evergreen Post Tweeter settings.

Once you save the settings, the plugin will then tweet your posts randomly. So if you want to tweet your old posts from the past year, but not from the past week, and only on weekdays at 8am, you can do just that.

As the analytics screenshot included above shows, tweeting older posts can have a beneficial impact on your traffic.

The plugin includes various settings that allow you to:

  • Schedule by day and time
  • Tweet out posts and/or page
  • Filter posts to be tweeted by category and/or tag
  • Choose from a selection of URL shorteners
  • Add extra text to tweets

What I like about this plugin is the ability to schedule tweets to go out at specific times on certain days. There are similar plugins that only let you tweet at intervals, so you can’t pick times.

How often do you tweet content from your site? Tell us in the comments below.

]]>
http://premium.wpmudev.org/blog/tweet-archived-wordpress-posts-and-boost-traffic-to-your-site/feed/ 6
Boost Engagement By Prioritizing Comments On Your WordPress Site http://premium.wpmudev.org/blog/boost-engagement-by-prioritizing-comments-on-your-wordpress-site/ http://premium.wpmudev.org/blog/boost-engagement-by-prioritizing-comments-on-your-wordpress-site/#comments Fri, 12 Sep 2014 12:00:00 +0000 http://premium.wpmudev.org/blog/?p=131522 WordPress authors crave comments. They tells us that someone felt strongly enough to take time out to share their thoughts – complimentary or otherwise.

The problem is that a single comment in the wrong place can undermine all your good work. Wouldn’t it be good to be able to put those comments that enhance your post front and center and hide those that don’t?

In this post I’ll show you how to take control of your comment lists so that they work for your WordPress site and not against it and make engagement easier by moving that comment form to the top of the comment list.

Featured image
Not all comments are equal – put the best in front of your visitors

Last week, we looked at how to put your WordPress site’s comments in a slideout sidebar, just like the New York Times does. As one of the comments on that post mentioned, the NYT also uses tabs to segment its comments into featured and staff comments.

As I started looking into how to replicate this functionality, it also became apparent that we can do more to ensure that comments make a positive contribution to the post:

  1. Display featured (hand-picked) comments at the top of the comment list
  2. “Bury” a comment
  3. Display comments in tabs (all, featured, by the post author)
  4. Display the comment form at the top of the list
  5. Hide the comment form and toggle display with a link

The 30,000 Feet Overview

The solution is a combination of 2 plugins: a custom-built plugin and Featured Comments a collaboration of WordPress stalwart Pippin Williamson and developer Utkarsh Kukreti.

Featured Comments provides the functionality that allows the site administrator to tag a comment as featured or buried, either in the Admin interface or, even more usefully, directly on the public-facing site. The tagging manifests itself as a class on the individual comment which makes it easy to apply styling to but also, as we’ll see, to manipulate client-side.

The custom plugin, Enhanced Comments, is primarily concerned with inserting the client-side javascript that handles the tab display, the display of the featured comments (normal or at the top of the listing) and the display of the comment form (normal or top, hidden). The plugin also provides an options page in Settings to allow the site admin to have some control over the functionality.

The only additional requirement is some custom styling. As this will dependent on both your theme and personal tastes, I’ve kept the CSS separate and left the decision with you on how to inject it into your site. All the usual suspects (custom CSS plugin, child theme, new CSS file) are options.

The solution requires no changes to your theme’s templates or WordPress core. Featured Comments uses the appropriate comment hooks to add the feature or buried class to a comment element but that’s the only change. All the other functionality is provided client-side.

Taking Control Of Your Comments

Step 1 – Install The Featured Comment Plugin

In the WordPress Admin Interface, go to Plugins > Add New and search for ‘featured comments’. Install and activate.

Once installed, visit a page on your site that has comments. It shouldn’t look any different apart from the appearance of Feature and Bury links at the bottom of each comment (if you are logged in as the site admin). Feature and Bury a couple of comments for testing.

Screengrab of a comment showing the Feature and Bury action links
Easily prioritize comments and enhance your WordPress posts

Highlighting, Hiding Just With CSS

If you are not interested in tabs, or moving featured comments to the top or buried comments to the bottom of the comment list, then you don’t need the Enhanced Comments plugin: you can achieve that, and more, with the Featured Comments plugin and some custom CSS.

To highlight the featured comments add CSS for the .comment.featured clause. For example:

1
2
3
4
/* make featured background blue */
.comment.featured {
background: #a4d3eb;
}

For buried comments, we’d want to make them less visible so we need to add CSS for the .comment.buried clause. For example:

1
2
3
4
5
6
7
8
9
/* hide buried comments */
.comment.buried {
display: none;
}

/* or just fade */
.comment.buried {
opacity: 0.25;
}
Screengrab of a two comments, one with a blue background (featured) and one with opacity set to 0.25 (buried)
A little CSS can go a long way to provide visual cues for what’s worthy of attention

WordPress itself automatically adds a number of classes to a comment which you can leverage to further enhance your comment lists:

  • bypostauthor – identifies a comment by the author of the post. Style these comments using the CSS clause .comment.bypostauthor
  • byuser – identifies a comment by a registered user. Style these comments using the CSS clause .comment.byuser

There’s quite some scope there using just the Featured Comments plugin and CSS but if we really want to step it up then we need Enhanced Comments.

Step 2 – Install And Configure The Enhanced Comments Plugin

Download the zipped master file for the plugin from GitHub. Go to Plugins > Add New > Upload Plugin. Select the downloaded file and activate.

Once installed, we need to configure the plugin, so go to Settings > Enhanced Comments.

Let’s step through the options.

Screengrab of the comment list  and comment identifier options in the Enhanced Comments settings page
You need to tell Enhanced Comments how to identify the comment list and an individual comment

Comment container identifier, Individual comment identifier

In order to enable the plugin to work with a wider range of themes, the plugin allows identifiers to be specified for both the comment list container and the comment itself.

In all likelihood, the comment will be .comment but the comment list can vary, can be an ordered list or a div. For example, Twenty Twelve uses an ordered list with a class of .commentlist, so the identifier would be ol.commentlist. Twenty Thirteen and Twenty Fourteen, on the other hand use an ordered list with a class of .comment-list.

To check your theme, it’s probably easiest just to take the look at the page source.

Screengrab of the featured, buried and comment form placement options
Control the placement of featured, buried comments and the new comment form

Placement of featured comments

This option allows you to control the placement of the featured comments:

  • normal – leave the featured comments in place
  • top – move the featured comments to the top of the comment list

Placement of buried comments

This option allows you to control the placement of the buried comments:

  • normal – leave the buried comments in place
  • bottom – move the buried comments to the bottom of the comment list
  • remove – remove the buried comments from the comment list

Placement of new comment form

The new comment form is usually wrapped in its own div and so can also be moved. The options are:

  • normal – leave the comments form in place
  • top – move the comment form above the comment list

Hide comment form until Add Comment clicked?

Whilst you might want to have the new comment form above the comment list, you might not want to show it immediately. This checkbox controls whether the form is visible or not; if the form is hidden, then a link (Add Comment) is added to the top of the comment list to toggle the display of the form.

Screengrab of the tab options
Control the tabs and their content

Show comment-related tabs?

This checkbox controls whether the comments are arranged in tabs. The tabs that are displayed are determined by the following options although an All tab is automatically created to display all the comments for the post.

Comment class names to use as tabs

This is a comma-separated list of classes that will be used to control the comments that are displayed under each tab. The available classes are:

  • featured – comments that have been tagged as featured by the Featured Comments plugin
  • buried – comments that have been tagged as buried by the Featured Comments plugin (this would be unusual)
  • bypostauthor – comments created by the author of the post
  • byuser – comments created by registered users of the site

The most likely value is featured,bypostauthor which will create 3 tabs that will show all comments (automatically added), featured comments and comments by the post author.

If no comments exist for the post that have a tab class assigned then the tab is not created.

Tab headings

This is a comma-separated list of headings to use as the tab labels. Obviously, you want to make sure that they are synchronized with the tab classes. So, if the tab classes are featured,bypostauthor then this option will be Featured,Author.

Again, you do not have to specify All as this is automatically added.

Tab to show on load

This option allows you to specify the class name of the tab you’d like to show on the initial display of the post. There’s obviously advantage to be gained in showing the featured comments as you’ve hand-picked these comments, so the most likely setting is featured.

If a post does not have any comments tagged with the specified class then it will default to showing the All tab.

The placement options for featured and buried comments and the new comment form all work whether tabs are used or not, and, of course, you can also use this plugin in conjunction with the CSS highlighting discussed earlier, so there’s enough permutations to allow good control over how your comments look and operate.

Step 3 – Style Those Tabs

Adding the necessary CSS to style is heavily dependent on the theme itself, so I haven’t included it in the plugin: you’ll need to add it yourself.

Just for testing purposes (and perhaps even in a live environment), using a plugin such as Custom CSS is as good a method as any.

The best approach is to use the CSS below, see how it works with your theme (this was tested on Twenty Thirteen and should work with a number of themes) and tweak it until you get the look that you want:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.comment-tabs {
border-bottom: 1px solid #ccc;
margin: 10px 30px 0px 30px;
padding-bottom: 7px;
}

.comment-tabs li {
list-style: none;
display: inline;
padding: 10px 15px;
background: #ccc;
margin-left: 10px;
}

.comment-tabs li.active {
background: #ffffff;
border: 1px solid #ccc;
border-bottom: 1px solid #ffffff;
}

.comment-tabs li.tab-add-comment {
border: 0;
background: none;
}

.comment-tabs li.tab-add-comment a:before {
content: '+';
}

The .tab-add-comment is where the Add Comment link is placed when the new comment form is being hidden. Although it forms part of the tab unordered list, it is not styled as a tab:

Screengrab of the top of a comment list complete with 3 tabs (all, featured, author) and CSS styling
Use your own combination of styling and tabs to enhance the display of comments

If you’ve followed the 3 steps you should now have well and truly enhanced your WordPress comments. As the solution makes minimal changes to the HTML (merely adds classes to the comments), you’ll find that it should play nicely with the Slideout Comments.

How It Works

For the interested, here’s more detail on how the Enhanced Comments plugin works.

The WordPress Plugin

The plugin has 3 main actions:

  1. Handling the Settings > Enhanced Comments options page
  2. Injecting the client-side javascript into the HTML
  3. Passing the option values from WordPress to the javascript

I won’t go into the options page here as the Settings API is a topic in itself, suffice to say that I used the WordPress Settings Generator to create the basic framework.

Injecting the client-side javascript into the HTML is achieved by first registering the script using the wp_register_script function and then enqueuing it using the wp_enqueue_script function.

In between those two functions is where the plugin’s options are pulled out of WordPress and provided to the client-side script using the wp_localize_script function which takes an array and recreates it as a global javascript object that can be accessed by our script.

The plugin does not alter any HTML other than inserting the javascript. All the major functionality is provided by the client-side javascript.

Client-Side Script

The plugin injects a jQuery-based javascript file into the page that provides all the major functionality. It uses the settings that are passed to it via the localize function to determine what actions it needs to take.

It uses the iQuery (document).ready() event to:

  • move buried comments to the bottom of the comment list
  • remove buried comments (if required)
  • move featured comments to the top of the comment list (if required)
  • generate the tabs (if required)
  • move the comment form to above the comment list (if required)
  • hide the comment form and add the Add Comment link (if required)
  • change the tab to the specified tab (if required)
  • add the handler for clicking on a tab link
  • add the handler for clicking on the Add Comment link
  • add the handler for clicking on an inline reply link

How Tabs Are Handled

The tabs are added as a unordered list, with a list item generated for each of the passed tab classes (but only if comments exist with that class) as well as an universal all tab.

When a tab is clicked (and the handler is activated), the script determines which class needs to be shown using the tabs href attribute and then filters the existing comment list with that class. In that sense, the tabs are really fake: they don’t have their own content, they simply filter the one structure which is not only simpler but also doesn’t break inline replies.

Catering For Inline Replies

By default, WordPress provides for inline replies to comments – that is replies that have a parent comment. It does this by using its own javascript to move the comment form to sit under the parent comment and to prefill the comment form with the comment id which is why we filter the comment list when using tabs rather than duplicating the content.

Hiding the comment form creates another issue. When the reply link is clicked we want the default WordPress behavior to take place (moving and setting up the form) but we also need to toggle the display of the form as the chances are that it is hidden.

For some reason, WordPress hardcodes the click handler for the reply function on the link itself, so adding a click handler to the link won’t work so the handler is added the link’s parent instead.

Taking Control Of Your Conversations

Comments are an essential part of many, many sites yet can often be a double-edged sword: good comments can greatly enhance the post whilst a single bad comment can undermine it completely.

Deleting negative comments is possible but can create more problems than it solves. Being able to prioritize comments, to get those comments that enhance immediately in front of visitors, including the authors own comments, allows you to combat negative comments without reaching for the delete button, maintain the quality of the conversation and to encourage others to join in.

Is it time for you to take control of your WordPress comments?

]]>
http://premium.wpmudev.org/blog/boost-engagement-by-prioritizing-comments-on-your-wordpress-site/feed/ 2
Top CDN Services to Make Your WordPress Site Blazingly Fast (and More Reliable) http://premium.wpmudev.org/blog/top-cdn-services-to-make-your-wordpress-site-blazingly-fast/ http://premium.wpmudev.org/blog/top-cdn-services-to-make-your-wordpress-site-blazingly-fast/#comments Wed, 10 Sep 2014 12:00:00 +0000 http://premium.wpmudev.org/blog/?p=131891 If you’re serious about speeding up your site and you’ve optimized the bejesus out of your site (smushed image, minified CSS and Javascript, set up a caching plugin…) it’s time to think about signing up to a content delivery network, or CDN.

A CDN will drastically reduce server lag by storing static resources on a network of fast loading servers.

Choosing a CDN can be tricky since there are many options available. Finding the right one depends entirely on your needs and the popularity of your site.

In this post we’ll look at some of the more popular CDNs available for websites, big and small. I’ve deliberately excluded some CDN companies, such as Akamai and Level 3, which are better suited to large-scale enterprise sites.

What is a CDN and Why Use One?

A CDN is a network of servers, usually located at various sites around the world, which cache the static content of a site, such as image, CSS and JavaScript files.

The CDN provider copies your site’s static content to its servers, so when someone lands on your site, the static content is delivered from the server closest to them.

For a visual look at how this works, check out this handy graphic from GTmetrix:

How a CDN works
Serving up content to a user, with and without a CDN.

MaxCDN

maxcdn

Free Trial: If you use over 15TB a month you qualify for a free MaxCDN trial. This includes everything that comes with a MaxCDN enterprise account, including unlimited bandwidth, negotiable trial length, all features enabled, and one-on-one setup call.

Pricing: Basic Start Plan comes with 100BG bandwidth for two websites for $9 a month.

MaxCDN is a popular and well-known CDN that powers the likes of The Next Web, The Washington Times and WP Engine.

If you use W3 Total Cache, setting up MaxCDN is a piece of cake. Simply go to the plugin’s setting, enable the CDN function, select MaxCDN, and then go to the CDN tab and enter your CNAMEs and API credentials. MaxCDN will then serve up whatever you specify, including images, media, and JavaScript and CSS files.

An elegant control panel displays a CDN usage summary for your website, and you can also access information such as hourly breakdown, edge locations users, and your top 50 files.

The service has servers all over the world, including the US, UK, China and Australia, with more edge locations planned. In addition, MaxCDN has 53 peering partners in North America and Europe to minimize hopes between ISPs.

CloudFlare

cloudflare

Free Trial: CloudFlare offers a basic free plan that includes fast site performance, board security protection and powerful stats about your visitors.

Pricing: Plans start at $20 per month for your first website and $5 per month for each subsequent website.

CloudFlare is another well-known CDN service. Unlike many CDNs, CloudFlare doesn’t charge for bandwidth usage on the basis that if your site suddenly gets popular or suffers an attack, you shouldn’t have to dread your bandwidth bill.

According to CloudFlare, on average a website using the CDN will load twice as fast, use 60 per cent less bandwidth, have 65 per cent fewer requests, and is more secure.

CloudFlare operates out of 28 data centers around the world and uses a technology called Anycast to route your visitors to the nearest data center.

Rackspace Cloud Files

rackspace-cloud-files

Free Trial: No.

Pricing: Plans are pay-as-you-go and start at 10 cents for your first terabyte of storage and 12 cents for your first terabyte of CDN bandwidth.

Rackspace Cloud Files offers online object storage for files and media and uses Akamai, a third-party CDN, to deliver your files globally.

The service uses more than 200 global edge locations around the world so your users get content fact and from servers within their region. Cloud Files maintains three copies of each files, ensuring files are delivers fast and reliably.

Rackspace’s partnership with Akamai is significant. The CDN is one of the world’s largest distributed computing platforms, responsive for serving between 15 and 30 per cent of all web traffic. Some of the company’s customers have include Facebook and Twitter.

CacheFly

cachefly

Free Trial: 30-day free trial.

Pricing: Plans start at $99 a month for 256GB bandwidth transfer and 1000MB storage.

CacheFly promises to deliver your static files (images, video, audio, CSS etc) at up to 10 times faster than other solutions. The company even guarantees 100 per cent network availability or your money back.

Microsoft, Adobe and Bank of America are just some of CacheFly’s clients.

While CacheFly has a solid reputation – and has clients who have stuck around since they started in 2002 – the only downside is that it’s one of the most expensive CDN options.

WPPronto

wppronto

Free Trial: No.

Pricing: A Small plan starts at $30 a month and includes two WordPress site, 10GB SSD storage and 100GB bandwidth.

WPPronto makes it onto this list because it started out as a CDN (the company launched in 2009 at WPCDN) and has since pivoted to focus on web hosting.

The company offers a CDN service using CloudFlare. It also focuses on security, offering multiple layers of protection (including DDoS attached production), SSL for everyone, and support Clef two-factor authentication.

SoftLayer

softlayer

Free Trial: No.

Pricing: Plans are pay-as-you-go at a set price of 12 cents per gigabyte of CDN bandwidth or 15 cents per gigabyte of CDN SSL bandwidth.

SoftLayer, an IBM company, offers cloud infrastructure as a service from data centers and network points around the world. Its customers range from startups to global enterprises.

The company uses the EdgeCast CDN to provide 24 content delivery nodes around the world, in additions to SoftLayer’s 13 data centers and 17 extra network points of presence.

Amazon Web Services

amazon-web-services

Free Trial: The AWS Free Usage Tier includes 5GB of Amazon S3 storage, 20,000 get requests, 2000 put requests, and 15BG of data transfer out each month for up to 12 months.

Pricing: Amazon S3 storage starts at 3 cents per gigabyte for standard storage. Amazon CloudFront pricing starts at 12 cents per month for the first 10 terabytes, with separate pricing for regions outside the US.

Amazon offers a couple of services I’ll mention here. Amazon S3 is a budget-friendly storage solution designed to make web-scale computing easier for developers. Amazon CloudFront is a CDN that gives any developer access to the same highly scalable, reliable, secure and fast infrastructure that Amazon uses to run its own global network of websites.

While Amazon AWS has a reputation for reliability, it’s good to keep in mind that CloudFront is aimed at developers and not inexperienced users.

CDN77

CDN77

Free Trial: 14-day trial.

Pricing: Pay-as-you-go plans started at $49 per terabyte up to 30 terabytes for US and European customers. Prices are much more expensive for users in other regions.

CDN77 sets itself apart from other CDNs with specialized software, video and gaming delivery for uninterrupted streaming.

It’s a relatively young CDN, having started only three years ago, but it’s quickly built up a stable of 25 data centers in 21 countries.

Incapsula

incapsula

Free Trial: A free plan includes bot protection, access control, login protect, CDN and Optimizer, website analytics, and community support.

Pricing: A basic Personal plan starts at $19 per month and includes the same features as the free plan, plus SSL support, advanced performance and email support.

Incapsula offers global CDN and caching (dynamic and static), including content that other CDNs might consider uncacheable.

On average, websites using Incapsula’s CDN are 50% faster and consume 40%-70% less bandwidth, according to the company’s website.

The service provides a great monitoring dashboard so you can check the effect of caching on your website’s performance.

There’s also an API for companies that want to control caching policies and change things like caching modes, create custom caching rules, purge the cache, purge a specific cache, or configure content optimization settings.

Photon by Jetpack

jetpack

Free Trial: Free product.

Pricing: Free product.

Photon isn’t a CDN, but it makes this list because it provides a WordPress-only image caching service through the Jetpack plugin. This means less load on your hosting server and faster images for your visitors.

There are a few limitations with this service. There are no cache invalidations, so currently the images are cached “forever” and if you want to refresh an image you will need to change the name of the image. Also, Photon only caches GIF, PNG and JPG files.

jsDelivr

jsdeliver

Free Trial: Free service.

Pricing: Free service.

jsDelivr is a free CDN that allows any developer to host their files, including CSS, fonts, JavaScript, and jQuery plugins.

The service is supported by CloudFlare and MaxCDN.

Choosing a CDN

Knowing your website’s specific needs is key to choosing a CDN.

Before signing up for a CDN, it’s important to have a clear outline of what your are looking for.

Bandwidth Needs

What are your bandwidth needs? Are you going to use 10GB per month or 10TB per month?

To find your bandwidth usage, login to your web host to access your bandwidth stats.

If your site gets little traffic, it might not be worth signing up for a premium CDN. A free service, such as Photon by Jetpack or Cloudflare’s free service will suffice. Alternatively, you may want to consider upgrading your hosting.

When you are delivering about 500GB per month of traffic it makes sense to offload those hits to a CDN.

If you provide videos, podcasts, music, large images, and software downloads, a CDN will ensure your visitors are able to access your media quickly.

Network Performance

Where are your users located? How many servers do you expect a CDN to have, and where?

If the majority of visitors to your site are based in the US, it makes sense to go with a CDN with servers spread across that region. However, if you have a spread of visitors from across the US, Europe and Asia, it would be better for your content to be available on servers in those regions.

It’s also important to note whether a CDN offers a push or pull service. A push CDN works very much like a secondary server. The user uploads content directly to the CDN (automatically or manually) and links to it. With a pull CDN, the site owner leaves the content on their server and and rewrites their URLs to point to the CDN. When asked for a specific file, the CDN will first go to the the original server, pull the file and serve it. The CDN then caches that file until it expires.

CloudFlare CDN network
CloudFlare operates out of 28 data centers around the world.

Technology

Do you require streaming downloads, such as video, audio or software downloads? Do you run a gaming website?

Some CDNs, like CDN77, offer speciality services that support streaming.

Also, check whether a CDN offers quality analytics and real-time monitoring features.

Support

What kind of support do you expect from a CDN?

It’s easy to check what kind of support is on hand, whether it be live chat or email support. Some CDNs offer technical assistance over the phone.

It’s also worth noting whether a CDN is available 24/7, and having a look through their service level agreement.

Most CDNs offer a 100 per cent SLA, but you don’t want to have to chase down credits if your CDN doesn’t meet it SLA.

Cost

How much are you willing to spend? Will you be compensated for network outages?

There are huge differences in cost from one CDN to the next, and plans differ from pay-as-you-go to monthly accounts with set features.

The price you pay will depend on the CDN plan that best meets your needs and how much traffic lands on your site.

Many CDNs offer free trial periods so if you’re interested in trying out a CDN you’ve got nothing to lose.

Best CDN for Multisite?

The jury’s still out on this.

While many services support WordPress, the lines blur when it comes to Multisite.

Services like MaxCDN, CloudFlare and Rackspace can be integrated with WordPress using W3 Total Cache, but the caching plugin still doesn’t fully support Multisite (you can use it on sub-sites and the main site, but not an entire network).

If you’ve used a CDN successfully with your Multisite network, I’d be interested to read about your experience in the comments below.

Summing Up

Where once websites were delivered from a single server, CDNs have revolutionized how online content is delivered, ensuring sites load quicker and downloads are faster and more reliable.

If you run a small to medium-sized site (around 40,000 to 50,000 page views), MaxCDN, CloudFlare and Rackspace are both solid options for your needs.

Services such as Amazon CloudFront are better suited to enterprise level sites and are overkill for sites with minimal traffic.

For small sites, Photon and jsDelivr, along with CloudFlare, are great options since each of these services are free.

Sites offering streaming media, such as video, audio and gaming, should check out CDN77 and it’s tailored service for this kind of media.

Do you use a CDN? Tell us about your CDN experiences in the comments below.

Image credits: CloudFlare, GTmetrix.

]]>
http://premium.wpmudev.org/blog/top-cdn-services-to-make-your-wordpress-site-blazingly-fast/feed/ 12
Don’t Make Your Mobile Users Think: Support Gestures On Your WordPress Site http://premium.wpmudev.org/blog/easily-add-touch-gestures-to-your-wordpress-site/ http://premium.wpmudev.org/blog/easily-add-touch-gestures-to-your-wordpress-site/#comments Mon, 08 Sep 2014 12:00:00 +0000 http://premium.wpmudev.org/blog/?p=131882 Many tablet and mobile users are app-trained to expect swipes and taps to result in navigation.

Many WordPress themes don’t include gesture support out-of-the-box but it’s actually surprisingly easy to add to an existing site.

Let me show you how to let your mobile visitors navigate your site with taps and swipes.

Screengrab of a ginger swiping on an iPad
Adding gesture support to your existing WordPress site is quick and easy

We all do it. You’re jump out of an app and into your tablet browser and you start swiping – to no avail – in a vain attempt to navigate around a website and, of course, it doesn’t work. This is particularly prevalent with tablets as they tend to served the standard site far more often than smartphones which will often get a mobile version of the website.

But your WordPress site can be adapted to support gestures with very little effort thanks to a number of javascript-base solutions that can bring touch gesture support to any WordPress website.

I’m going to show you how to implement the following gestures using the Tocca library:

  • Swipe Left – go to next post
  • Swipe Right – go to previous post
  • Double Tap – go to a page of choice (default is the home page)

The swiping does depend on the prev and next tags that WordPress generally adds to the header. If your theme is not outputting this tags then chances are that your theme is not calling the wp_head function or that it has disabled the output of these links.

The solution is wrapped up in a plugin, so first let’s go through how to use the plugin and then we’ll go through how it works.

Setting Up Gestures

Step 1 – Install The Plugin

Download the plugin from GitHub and upload to your WordPress site in Plugins > Add New. Activate the plugin.

Step 2 – Updating The Settings

If you navigate to Settings > Gestures you’ll find 2 settings:

Screengrab of the settings page for the gestures plugin
Just 2 settings, one for the container and one for the double-tap destination

The first option is the container within which the gestures will be detected. If you want a gesture anywhere on the visible page to be actioned then you’ll want to use the id or class of the first major containing element after the body tag (generally #page).

If you only want the gestures in the actual content (excluding the header for example) then you’ll probably want to use something like #content.

Of course, it all depends on how your theme is written so you may want to delve into the HTML or the header.php theme file to find out more.

The second option is the page to display when the user double-taps. This defaults to the site url but can be any url and will depend on your needs.

If you change the options then be sure to click on Save.

Step 3 – Test!

That’s actually all there is to it, so jump into your site and test it. You can test in one of 3 ways:

  1. Desktop: simulate a swipe by holding down the mouse button and dragging left or right; rapid click for a double click.
  2. Simulator (i.e. iOS Simulator): view your site in a mobile simulator and simulate the swipes and taps as describe for desktops
  3. Handheld: obviously the best way to test is with an actual handheld device. If you can get to the site using a handheld then do so and tap and swipe as normal

You should find that swiping left and right navigates you between posts, whilst a double-tap takes you to the page you specified in step 2 (or the home page if you left the options unchanged).

How It Works

As I mentioned, this solution makes use of the Tocca jQuery plugin to capture the gestures and is almost entirely a client-side solution.

The Tocca script is enqueued, along with custom javascript to initialize the Tocca events on the container element that we specify in the Settings > Gestures page. Simple localization takes place to ensure that the container identifier and the double-tap destination are passed down to the initialization script.

The plugin is, therefore, pretty small and uninteresting (it also handles the new Settings > Gestures page) so we’ll just focus on the initialization script.

As I mentioned, the localize_script function is used to pass the settings to the initialization script, with the output looking something like this:

The initialization script then simply adds the Tocca gesture event handling for double-tap (dbltap), swipe left (swipeleft) and swipe right (swipe right) to the container:

As you see, not very complicated at all. The double-tap action is simply to change the URL to the passed destination whilst the swipe actions simply look for the relevant link tag and change the URL to the href.

If there is no prev or next link (such as on the homepage) then no action is taken.

Don’t Make Mobile Users Think!

The rise of mobiles, and particularly tablets, at the expense of desktops means that the lines between between app behavior and website behavior continue to blur.

Users love consistency and shouldn’t really have to change their behavior just because they are in a browser and not in an app.

As this solution shows, it’s entirely possible to let your mobile visitors have their cake and eat it. Without even thinking about it.

]]>
http://premium.wpmudev.org/blog/easily-add-touch-gestures-to-your-wordpress-site/feed/ 2
How To Launch Your WordPress Videos In A Lightbox http://premium.wpmudev.org/blog/how-to-launch-your-wordpress-videos-in-a-lightbox/ http://premium.wpmudev.org/blog/how-to-launch-your-wordpress-videos-in-a-lightbox/#comments Sat, 06 Sep 2014 14:00:00 +0000 http://premium.wpmudev.org/blog/?p=131521 Lightbox is a widely accepted tool for focussing readers’ attention by darkening the page and overlaying a fullsize version of the image.

But if images can benefit from this distraction-free viewing why not other media types? Why not video?

In this Weekend WordPress Project we’ll look at using the WP Video Lightbox plugin to bring all the benefits of Lightbox to your embedded videos.

Screengrab showing a YouTube video in a lightbox using the dark theme
Present your videos in a distraction-free lightbox complete with description

The WP Video Lightbox plugin has been around for a while (Sarah wrote about it here in 2012) but it continues to be maintained and provides an excellent way to put videos front and center.

The plugin uses the prettyPhoto jQuery library to bring Lightbox capabilities to your YouTube and Vimeo videos. It works equally well on both desktop and on tablets and is simple to install and use.

How easy? Well, let’s step through an example.

Install The Plugin

Of course, we can’t do anything until the plugin is installed, so jump into Plugins > Add New and search for WP Video Lightbox. Install and activate.

Adding A YouTube Video To A Post

WP Video Lightbox provides its own shortcodes for including YouTube and Vimeo videos in a post:

  • [video_lightbox_youtube] for embedding a YouTube video
  • [video_lightbox_vimeo5] for embedding a Vimeo video

Both shortcodes accept the same 6 attributes:

  1. video_id (required) – the service’s unique identifier for the video
  2. width (required) – the width of the video playback
  3. height (required) – the height of the video playback
  4. description – this text is displayed in the lightbox’s footer; accepts HTML.
  5. anchor – this text becomes the hyperlinked text that opens the video in a lightbox; accepts HTML.
  6. auto_thumb – replaces the anchor text with a thumbnail image of the video

If the anchor attribute is provided then auto_thumb is ignored; if anchor is not provided then auto_thumb must be set to ’1′.

Here’s some examples using my favorite YouTube video of one of the greatest ever World Cup goals.

Basic usage:

1
2
3
4
5
6
[video_lightbox_youtube 
  video_id="XsZkCFoqSBs&rel=0" 
  width="640" 
  height="480" 
  anchor="Stunning goal from the amazing <i>Denis Bergkamp</i>" 
  description="If only Denis Bergkamp was English..."]

(Note: attributes placed on own line for clarity only – don’t do this when creating a post.)

Adding the &rel=0 to the video_id prevents the display of related videos at the end.

Screengrab of the post content with the text specified in the anchor being used for the lightbox link
The shortcode output when an anchor is specified

Using auto_thumb:

1
2
3
4
5
[video_lightbox_youtube 
  video_id="XsZkCFoqSBs&rel=0" 
  width="640" height="480" 
  auto_thumb="1" 
  description="If only Denis Bergkamp was English..."]
Post output with a video thumbnail as the link to the video lightbox
The shortcode output when auto_thumb is used instead of an anchor

Finetuning The Lightbox Experience

As I mentioned previously, the WP Video Lightbox plugin uses the prettyphoto library and the configuration options for the prettyphoto are all available under Settings > Video Lightbox.

Most are more related to images but there are few that you might want to ponder for your videos:

  • Theme – determines the look and feel of the lightbox. There are 6 themes to choose from.
  • Autoplay – if you really wanted to irritate your visitors you can set this to automatically play the video when the lightbox opens
  • Modal – controls whether the visitor has to click on the close button to close the lightbox (rather than just clicking anywhere outside the lightbox)

Make The Most Of Your Videos

Whether a video is viewed in its entirety is obviously highly dependent on how engaging it is. WP Video Lightbox can’t help you there but it can help remove all the distractions when the video is being played and let the content.

If you regularly feature videos in your posts then it makes a worthy addition.

]]>
http://premium.wpmudev.org/blog/how-to-launch-your-wordpress-videos-in-a-lightbox/feed/ 0
Offer Your Multisite Users Unique Domains With Domain Mapping http://premium.wpmudev.org/blog/offer-your-multisite-users-unique-domains-with-domain-mapping/ http://premium.wpmudev.org/blog/offer-your-multisite-users-unique-domains-with-domain-mapping/#comments Fri, 05 Sep 2014 15:30:00 +0000 http://premium.wpmudev.org/blog/?p=131545 Domain mapping provides a simple way to point multiple domains to your primary hosting account.

For Multisite admins, it’s also useful in that it allows you to map any domain to your network, giving you the option to offer domains to your users.

Mapping domains can seem complex and fiddly if you’re unfamiliar with cPanel and messing around with IP addesses, but it’s actually a straightforward process and doesn’t take long at all.

In this tutorial, I’ll show you how to use the Domain Mapping plugin to map a domain to your Multisite network, so http://network.com/awesome becomes http://www.awesome.com

Map of Melbourne
Map any domain to your Multisite network with the Domain Mapping plugin.

Getting Starting With Domain Mapping

For this tutorial, I’m going to point a domain I have set up with my web host to another site. To do this, I need to point my domain to a dedicated IP address.

Before we get started there are a few things you need:

  • A dedicated IP address. Domains need to be mapped onto a single IP. If you use shared hosting with a dynamic IP address, your IP address will change regularly, meaning there is no single IP address for your domain to be mapped to. Get in touch with your web host to add a dedicated IP address to your account.
  • Access to cPanel
  • A domain to map and access to its settings
  • The Domain Mapping plugin
  • A WordPress Multisite installation

Step 1. Set Up Your Domain

Login to your domain registrar and find the area that lets you update your domain settings. Most web hosts will call this “DNS Manager.”

There you will find a record under A (Host) or A Records (depending on your host) with @ pointing to an IP address. We want to change this IP address. Click edit and insert your dedicated IP address.

Step 2. Park Domain

As my Multisite network is on shared hosting, the next step is to park the domain.

To do this, login to cPanel and scroll down to “Parked Domains.”

Parked domains
Park your domain in cPanel.

Click “Parked Domains” and insert the domain you want to park.

Insert domain to park
Create a new parked domain.

Step 3. Add New Multisite Site

Login to your Multisite network and add a new site.

Add new site
Create a new site in your network.

Give your new site a name, title and add your email address, then click “Add Site.”

Add new site
Name the new site in your Multisite network.

Step 4. Install Domain Mapping Plugin

Download Domain Mapping.

Next, login to your site using via FTP. We’ll be installing the plugin and moving one of the plugin’s file to another location.

  1. Unzip the Domain Mapping plugin and copy it to the public_html/wp-content folder
  2. Copy the sunrise.php file to the /wp-content folder.
  3. Copy wp-config.php from the root folder of your WordPress installation to your desktop and open it in your favorite text editor and add the following line just before the line /* That’s all, stop editing! Happy blogging. */
1
define( 'SUNRISE', 'on' );
Sunrise
Edit your wp-config.php file.

Save the wp-config.php file and copy it back to the root folder.

Step 5. Configure Domain Mapping

Go back to your Multisite dashboard go to Network Admin > Plugins and network activate Domain Mapping.

Next, go to Settings > Domain Mapping.

In the “Mapping options” tab, enter your dedicated IP address in the “Server IP Address” section.

Step 6. Map Domain

Go to the dashboard for the new site you created for your work earlier.

Then go to Tools > Domain Mapping.

Add the domain you want to map.

Map domain to sub-site
Map your domain to your sub-site.

Click “Map Domain.”

7. Check Your Site is Working

Open up a new browser window and check the site you mapped is working.

That’s all you need to do to set up a mapped domain on your network.

In addition to mapping domains, you can integrate Domain Mapping with our Pro Sites plugin to offer your users domain mapping as a paid upgrade.

With this two plugins, you could even offer a paid and fully-managed WordPress hosting service.

]]>
http://premium.wpmudev.org/blog/offer-your-multisite-users-unique-domains-with-domain-mapping/feed/ 1
Slideout Your WordPress Comments Just Like The New York Times http://premium.wpmudev.org/blog/slideout-your-wordpress-comments-just-like-the-new-york-times/ http://premium.wpmudev.org/blog/slideout-your-wordpress-comments-just-like-the-new-york-times/#comments Thu, 04 Sep 2014 12:00:00 +0000 http://premium.wpmudev.org/blog/?p=131795 Sitting comfortably in the top 50 visited US sites, The New York Times probably knows a thing or two about delivering a decent user experience to its millions of visitors.

Their handling of comments is one example. Removing them from the page flow and placing them in a slideout sidebar is certainly not conventional, but it works. Brilliantly. And solves plenty of comment-related issues.

So, let’s engage in the sincerest form of flattery and bring slideout, New York Times-style commenting to your WordPress site.

Screengrab of the slideout comments
Slideout comments are quick and easy to implement and solve plenty of issues

It makes a great deal of pragmatic sense to keep an eye on how major online destinations tackle the issues we all face and work out if and how they might benefit our own sites.

The traditional approach of sticking comments at the bottom of a post has always been a little unsatisfactory. In sufficient quantities, comments can often overwhelm the post, give false signals to new readers about the length of the content and can render any footer content virtually obsolete.

Sites like Medium have tried to solve these problems by adopting annotation-style inline commenting (an approach I’ve looked at previously): a neat solution but one that relies heavily on having the right theme. The New York Times, on the other hand, uses a simpler approach: placing the comments in a slideout sidebar.

This solution is far more tolerant of the underlying theme, achieves a good balance of decluttering the content but keeping the comments accessible and is, technically, much easier to implement. In fact, you might be surprised just how easy.

For those of you that are interested, there’s an explanation of how the solution works but first the 1-2-3 of how to implement slideout comments on your WordPress site.

Slideout Comments In A New York Minute

Adding New York Times style slideout comments to your theme takes just 3 simple steps.

  1. Install the plugin
  2. Adjust the settings
  3. Tweak the styling

Step 1 – Install The Plugin

Download the Slideout Comments zipped file from GitHub, upload into your WordPress site and activate the plugin.

Step 2 – Adjust The Settings (If Necessary)

This is really the only tricky bit and it’s really only tricky if your theme doesn’t follow the WordPress theme element naming conventions.

The default settings for the plugin means that it expects:

  • the comments block will be wrapped in an element with an id of comments (e.g. <div id=”comments”>)
  • an individual comment will be contained in an element with a class of comment (e.g. <li class=”comment”>)

The easiest way to see if your theme uses the conventional naming is simply to navigate to the site and see if the slideout is working.

Two screenshots of a post using the Isola theme with the sidebar open and closed
Slideout comments on the Isola theme, closed (left) and open (right).

Comments And / Or Comment Form Still Appearing Below The Post

If you are still seeing comments or the comment form under your post content then the chances are that your theme is using a different id for the comments block. To check, open your theme’s Comments template (comments.php – you can do this in WordPress via Appearance > Editor) and see what id or class is assigned to the first element.

For example, here’s the template for the Eighties theme:

Screengrab of the comments template for the Eighties theme in the WordPress theme editor
Non-Automattic themes can often wander from convention

As we can see the first element is a DIV with the class of discussion, so that’s what we need to use for Comments container identifier in the plugin’s settings page (Settings > Slideout Comments).

Don’t forget to add the ‘.’ for a class and the ‘#’ for an id!

Screengrab of the slideout comments plugin options
Themes that don’t follow convention need the class / id of the comments block specified

No Number In The Tab

The tab should display the current comment count for the post. It does this by counting how many elements on the page have the class of comment, so if this count is incorrect (most likely always 0) then this means that your theme is using a different class for a comment.

Now, the vast majority of themes will use the WordPress wp_list_comments function to generate the comment list, in which case the comment class will be assigned, so this is a highly unlikely situation. However, if it does arise, go back to the comments.php file and see how the template outputs an individual comment.

There Is No Comments Template

If you don’t find a comments.php file in your theme, then change themes. Okay, a bit drastic but it does mean that your theme is not really following WordPress standards.

Alternatively, the quickest way to work out the correct id or class will be to dive into the page source of a post, look for a comment and then work your way up the hierarchy until you find the comments container.

Update the settings and refresh your site. With a bit of luck you’ve now got a slither of a sidebar on the right-hand side of the viewport and tab near the top with the number of comments. Clicking on the tab should slide the comments in and out.

Step 3 – Tweak The Styling

Due to the myriad of possibilities, the plugin concentrates on the mechanics of the slideout, so when it comes to styling the contents of the comments sidebar you are on your own.

That said, there shouldn’t be the need for too much work as the comments will retain their original styling. It’s just that some styles may not be appropriate now that the comments have moved from the bottom of the page to a sidebar.

For example, with the Isola theme, the only change is to move the tab down to below the top navbar:

1
2
3
.comments-toggle {
top: 50px;
}

The easiest way to test and even deliver your specific styles is via a custom CSS plugin such as Custom CSS (surprise). There’s also a module in Jetpack that does pretty much the same thing if you have that plugin already installed.

Tweak and test until you are happy with the look and then either leave the CSS plugin active to insert the styles into the page or create a child theme with your custom CSS in the styles.css. All you need to keep in mind is that with the plugin the CSS is inserted regardless of the theme you are using.

Do not add the CSS to the existing styles.css. Not only is it bad practise but you will lose the customizations when the theme is next updated.

How It Works – The Nitty Gritty

This solution has been designed to require minimal changes to work across as many themes as possible but focusses on the mechanics of moving the comments area from the bottom of the post page to a slideout sidebar.

The Plugin

The WordPress plugin performs 3 functions:

  1. Adds an options screen (Settings > Slideout Comments) where the identifiers are set. This allows some flexibility for the solution to work with themes that don’t use default naming conventions.
  2. Inserts the basic Slideout Comments CSS and Javascript files into the HTML output
  3. Makes the identifiers set in the options available to the Javascript function using the wp_localize_script function

That 3rd function is where the flexibility across themes comes in. If you haven’t used the wp_localize_script function before then have a read of its Codex entry because it’s a really easy but powerful way of providing server-side data (such as options) to client-side code.

Tabs And Overflows

Whilst it’s easy to reposition the comments block and apply a transition, the default markup is not conducive to adding the tab. To add the tab we need to set the overflow property on the parent to visible but that means that the child content, in this case the comments and the new comment form, won’t scroll.

The CSS also needs to be coded in such a way so that it doesn’t rely on a theme having a particular naming convention.

So, the inserted Javascript uses jQuery to wrap the comments block (identified by the id or class entered in the options page) in a parent and grandparent DIV. The parent is set to overflow-y:scroll to enable the comments to be scrolled in the sidebar and the grandparent is set to overflow:visible to allow the tab to work.

The tab itself is also added by the Javascript function and the comment count calculated by counting the number of elements with the comment class, also set in the options.

Taking this approach means that there’s no need to change the existing markup as all the structural CSS and functionality is applied to the inserted wrappers.

Slideout Sidebars And Transitions

The structural changes are all achieved by applying CSS to the inserted wrappers. The grandparent has its position fixed from the bottom (it looks better to have the sidebar flush with the bottom of the viewport) and the right. You’ll notice that the width and right clauses have been specified as percentages which will provide some measure of responsiveness to changing viewport sizes.

You’ll also notice that the right is negative, this hides the sidebar, but is 1% smaller than the width to give the “peeking out” effect. Make the right and width properties the same value to hide the sidebar completely and have only the tab showing.

A z-index of 10 ensures that the sidebar sits on top of the main body of the page.

The transitions use the CSS3 transition property and are controlled by the toggling of the open class on the grandparent comments-wrapper element. When the open class is added, the right property transitions to 0 (from -50%) over 0.3s. When the open class is removed, the right property transitions back to -50% (from 0) again over 0.3s.

The toggling of the open class is performed by a click event on the tab.

No Transition Support, No Comments, No Action

It will come as no surprise to learn that the CSS3 property is only supported by IE10+. Rather than compromize a really simple solution, I decided to go for a “do nothing” fallback. Before adding the wrappers to the comment content, the Javascript first checks to see if transitions are supported. If they are not, then it bails out and no wrappers are added.

Nothing lost, nothing gained.

Similarly, there’s no point do anything if there is no comment block (this means comments are disabled, not that there are no comments), so a check is also made for the presence of the identifier specified in the options.

Add A Little Of The New York Times To Your WordPress Site

Slideout comments are an elegant solution to some pretty tricky comment-related issues that will not only declutter your post pages but will make your footer relevant again and, perhaps, foster more engagement by making comments far more accessible.

If your theme follows WordPress’ default themes naming conventions then converting your WordPress site can take less than a minute but even the most unconventional theme can be converted with little effort.

Would your site benefit from a little New York Times imitation?

]]>
http://premium.wpmudev.org/blog/slideout-your-wordpress-comments-just-like-the-new-york-times/feed/ 13