The problem was success. The paddle was gmail. The solution was Help Scout.

Check out the video and/or read on for how it panned out… there’s a special offer at the end.

The Problem – Awesomeness

We’ve taken great strides in the last year: fantastic new design, powerful new plugins, a vast amount of updates, exceptional support and customer service from a rapidly growing team of support staff, designers and developers… and, as always, great value.

In 2012, the number of our users effectively doubled, and we currently have over 150,000 members! Our team has necessarily expanded with the demand, going from a mere handful to over 30 staff members worldwide.

As we’ve grown, so have our needs. And not without growing pains we may add. But the single largest thorn in our side was handling the increasing load of pre-sales and billing inquiries. It snuck up on us kinda suddenly.

A couple of years ago we had only one or two folks handling these items. We depended on gmail, and as fantastic as it is, this didn’t scale at all. Imagine having 7 or 8 people within a single email account. Mayhem would be an understatement.

• We had no way to track whether or not folks were getting the answers they needed – much less how many each of our staff were handling so we could gauge when more were needed.
• We had to deal with duplicate responses from our staff, and there was no real accountability when things went wrong and mistakes were made.
• Tracking emails and then doing follow ups were a real chore, and increasingly difficult as we took on more staff.

When Nothing Else is Up to the Task

So we were growing and getting more attention and having more inquiries and needing more staff. This is a really good problem to have, but how were we supposed to address it?

Support desks are popular. Hosting companies use them; software companies do as well. So it made perfect sense to us to look into these, and we certainly did. We looked into several, and found that Kayako, UserVoice, and Zendesk help platforms really rock.

However, after putting these full-on helpdesk platforms to the test, we found that each has their strong points, but all were way too complex and overwhelming for our particular needs. Plus, we didn’t want to spend time and money training staff on using the thing.

We needed something that we could start using from the get-go. We needed a smooth workflow but with something to track our statistics, our customers emails, and ensure we don’t ever miss those crucial pre-sales questions. We needed something like gmail… but on steroids!

Help Scout – Tailor-Made for Our Needs

When we found Help Scout, we were almost resigned to having to learn our way around one of the heavier players, and train staff how to use it too. But all that changed in an instant. Well, in a few minutes anyway… the time it took us to set things up.

Help Scout provides an interface that is so intuitive anyone who has ever received an email before can immediately understand and use it. It’s designed specifically to handle customer email inquiries in the most efficient way possible. And any number of support staff can be assigned accounts in Help Scout.

To help keep things nice and organized, any member of the staff can assign emails to any other member (very handy when someone has already replied, or specific tasks are delegated), and any staff member can view all their active emails just by clicking a menu item. No more endless searching!

Email conversations can be archived when responded to or kept active, organized with custom tags, forwarded, and even moved to other inboxes too.

Duplicate responses from staff are a thing of the past too. On any open conversation, staff members can instantly see who else is currently viewing the same email. Plus, all previous conversations from the same address are listed in the sidebar and can be reviewed in a popup window.

Awesome Reporting

Ever tried to get decent statistics and reports in gmail? Ack! Help Scout solves that with powerful built-in analytics and reporting features. All we need to do now is simply select a date range and check the inboxes we want to include in the report. Click Update and bam! Multiple real-time reports, including daily stats that can be viewed with a simple mouseover.

Accountability and awesome stats for multiple users is a snap too. We can now see at a glance who is handling what, how much, and how fast. We can also see who might need help, and who is just knocking ‘em out of the park! Knowing if and when more staff is needed, or can be assigned to other tasks, is child’s play. Want to reward staff for performance? Check out the Awesomeness Index… too cool.

Addon Coolness

Help Scout even has a bunch of cool apps that can be integrated to make working that email queue as efficient, and as much fun, as you could hope for.

• Group Chat & IM with Campfire or HipChat
• CRM addons for Highrise & Capsule
• Satisfaction ratings using Hively or Nicereply
• Live chat with Olark or Snap Engage
• Integrate and track phone calls from over 20 voicemail providers
• Filter out of office and auto replies.

We’re currently doing a test run of the Grasshopper addon which sends voicemail to the inbox along with the audio recording and an automatic text transcription. How cool is that, you ask? Pretty awesome, we say!

They also have a growing collection of guides, e-books, and webinars to help even the most novice of support staff get up to speed. And, if you’re a “dig-in-and-get-your-hands-dirty” developer type, there’s a fully documented API to extend and hook into Help Scout’s features.

The Transition

Moving our email support from gmail to Help Scout wasn’t without its own issues. Getting used to a new system and new settings brought up a few challenges of its own. Some were trivial, like how to deal with autoresponders autoresponding to each other and filling up the main inbox with a bunch of junk.

Some issues we experienced were out of everyone’s control. Like when Amazon Web Services crashed and took down half the web. At that time, we were still forwarding email from gmail to Help Scout. Naturally, some got lost. And, naturally, customers weren’t happy.

But through all that, Help Scout’s own fantastic support staff were there for us. They dug their heels in and didn’t quit until all our issues were resolved.

Now, Here’s the Deal!

We are so impressed with Help Scout that we want to share the joy with our members and readers. So we arranged an awesome deal for ya!

Normally Help Scout offers a 15-day free trial. But if you’re reading this (lucky you), you can get the full package free for 3 months. You read that right: 3 months free trial on their paid plan. That includes all the goodies & unlimited users.

When the 3 month trial expires, you can choose to continue with the paid plan (starting at $15/user/month) or downgrade to their free plan (up to 3 users).

To get this awesome deal, you must sign up on this page:
https://www.helpscout.net/p/wpmudev/

Related posts:

1. Collaboration E-mails Plugin for WordPress MU Peter’s Collaboration E-mails for WordPress MU is a plugin to...
2. Asana + WPMU DEV = A match made in heaven Asana really is a truly epic modern way of getting...
3. WPMU DEV – now with more LIVE Hiya friends, quick announcement! We’re working hard behind the scenes...

In this 4th part of the series on “How to Customize Responsive WordPress Themes”, we’re going to take a closer look at media queries, and see how they work their magic in responsive WordPress themes. And don’t worry; it’s really not as complicated as you might think. On the contrary, as powerful and flexible as media queries may be, they’re actually very simple.

Before we continue, note that although media queries can be used in languages other than CSS, such as JavaScript, this article only concerns their use in your style-sheets. Also, while there are several types of devices that can be specified using the @media rule, we’ll only be looking at the screen media type here to keep things simple (for more on media types, see http://www.w3.org/TR/CSS21/media.html).

A simple example

A media query is an expression that will instruct a specific type of device to display your content in a particular manner depending on conditions that you define.

A media query has a logical construction, or syntax, that must specify the type of media concerned, and can include one or more features that apply to that media type. Let’s take a look at a simple example:

@media screen and (min-width: 768px) and (max-width: 979px) { ... }

• The query opens with: @media. That’s a pretty obvious notification to devices saying “Hang on media thingy, check if these conditions apply to you“.
• It then specifies the device type that is concerned by the query; in this case: screen. So, any device that does not display content on a screen will ignore the query and continue on its merry way.
• The logical keyword and indicates that the condition immediately following it must also apply.
• We then see 2 conditions in this rule: (min-width: 768px) and (max-width: 979px). That identifies devices with a viewport size anywhere between 768 and 979 pixels.
• Finally, there are those brackets: { … }. They will contain the style rules that must be applied if the conditions specified by the media query are met.

Putting it all together, this simple query states that any device with a screen whose viewport size is between 768 and 979 pixels must respect all the styles contained in the curly brackets. Devices with a screen width that is less than 768px or greater than 979px will ignore this query. Any device that doesn’t directly display content on a screen will also ignore it (print or projection devices for example).

Adding your media-specific styles

Now let’s take a closer look at those curly brackets that enclose the media-specific styles. They are identical to the brackets you normally use when writing your style rules, and they must wrap all the style rules that apply to the media query. Just write your style rules as you normally do inside those extra brackets. Here’s an example of a simple style-sheet with a default margin value applied to a div container, and a lesser value that would apply only to screen devices with a viewport width of 767px or less.

/* Default styles */
div#main { margin:40px; padding:20px; }

/* Phones to tablets 767px and below */
@media screen and (max-width: 767px) {
div#main { margin:20px; }
}

Note that is not necessary to define everything in your media queries. Media queries respect the cascade principles of CSS. That means that any default style rules that are not explicitly overridden by a media query will also apply to device types targeted by that particular media query. In the above example, the padding has not been explicitly defined in the media query. Device types targeted by that media query will, therefore, inherit the value defined in the default styles.

The above example demonstrates the use of the logical keyword and. There are 3 other logic elements that can also be used in your media queries.

• A comma represents a logical OR
• The keyword not can be used to negate the result of the query
• The keyword only can be useful to hide stuff from older browsers

See examples 6, 8 and 9 on this page at W3.org for more.

Adapting a design to all screen sizes

Great! So we’ve now created a style-sheet and have included a media query that will apply different styles to smaller screens. But we know that there are more screen sizes than the ones we just created styles for. So what if we wanted to create a design that would adapt to all screen sizes?

You can have several media queries in the same style-sheet to define specific style rules for different conditions. If we want to define some style rules for all screen devices, from cellphones to large wall-mounted monitors, we could include all those queries in our style-sheet like in the example below.

/* Default styles */
div#main { margin:40px; padding:20px; }

/* Large display 1200px and above */
@media screen and (min-width: 1200px) {
div#main { margin:50px; }
}

/* Portrait tablets 768px and above */
@media screen and (min-width: 768px) and (max-width: 979px) {
div#main { margin:30px; }
}

/* Phones to tablets 767px and below */
@media screen and (max-width: 767px) {
div#main { margin:20px; }
}

/* Phones 480px and below */
@media screen and (max-width: 480px) {
div#main { margin:10px; }
}

In the above example, you can see that there is no specific media query for screen devices with a viewport width that is between 980 and 1199px. That’s because we are considering that size range as our default size. All style-rules that are not contained in media queries will be our default styles, and will apply to all screen devices that fall into that size range.

When you have a relatively simple WordPress theme with a relatively simple design (like Twenty-Twelve for example), you can get away with adding all your media queries in the same style-sheet. But what about when you’ve got a boat-load of styling to do for each media type, or want to organize things in different style-sheets?

Using multiple style-sheets

Happy days! Media queries can also be used to specify individual style-sheets that must be used only for specific media types and/or conditions. So you can have one style-sheet for your default styles, and another for your responsive stuff. Once you’ve created your style-sheets, there are 2 ways that you can call them (use only one or the other, not both, or things will likely get screwy on your site).

You can call your responsive style-sheet conditionally from within your default style-sheet using the @import rule. You simply need to append the media query conditions to a normal @import rule. So instead of this (which would load the responsive style-sheet regardless of the device):

@import url(responsive.css);

…you can use this (which only loads the responsive style-sheet if either of the 2 conditions are met):

@import url(responsive.css) screen and (max-width: 979px), screen and (min-width: 1200px) ;

The 2nd example above demonstrates the use of the comma as a logical OR. So the responsive style-sheet will only be loaded for screen widths less than 980px, OR greater than 1200px.

However, according to Google, there is a drawback to calling additional style-sheets from within the default one using the @import rule: page load time. The browser must first download, parse and execute the default style-sheet before it even realizes that it must also load the responsive one. There is an alternative, and faster way.

Load your style-sheets in parallel in your theme’s header.php file using <link> tags. You’ve surely noticed how a style-sheet can be loaded from the header in a WordPress theme; something like this:

<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); >" />

You can specify different style-sheets, like your responsive one, that should load only under specific conditions using a media query directly in the link. Here’s what that might look like using the same conditions specified in the previous example (this assumes that the responsive style-sheet is in the root of the theme):

<link rel="stylesheet" type="text/css" media="screen and (max-width: 979px), screen and (min-width: 1200px)" href="><?php echo get_template_directory_uri(); ?>/responsive.css">

Wrapping things up

We’ve seen how easy it actually is to write a media query, and how to use them in a style-sheet. We’ve also seen how to call external style-sheets using media queries. The next article in this series will cover a few things to look out for when creating your styles for various media types or conditions.

In the meantime, get out your Twenty-Twelve child-theme (you did make one, didn’t you?) and play around a bit with the responsive styles beginning on line 1351. You may also want to review Part 2 and Part 3 of this series while you’re at it :)

Additional resources to check out

• Screen sizes referred to in this article are borrowed from Bootstrap Scaffolding
• Use as few style-sheets as necessary as recommended by Google Best Practices.
• Avoid the @import rule and link your style-sheets in the header for faster load times as recommended by Google.
• The complete specs on media types and media queries from W3.org.

Related posts:

1. How to Customize Responsive WordPress Themes – Part 2 Style-sheet organization: where stuff is… or should be, and why....
2. How to Customize Responsive WordPress Themes – Part 1 Learn what to do, and what not to do, when...
3. How to Customize Responsive WordPress Themes – Part 3 CSS properties to watch out for... and why....

Ensuring that your site looks good, loads fast and is easy to navigate is great. It becomes essential when users view it on the smaller screens of their mobile devices. Using a responsive WordPress theme is one way to ensure that your content adapts to those screens.

However, sometimes media stubbornly refuses to resize itself properly to fit those smaller screens. If media on your site is not resizing properly when viewing on smaller screens, you’re gonna love these responsive WordPress plugins!

Each is available free from the WordPress plugin repository, and some have premium versions with additional features. Check ‘em out and have a play with a few of them. You’re sure to find something that will fit the bill for you. If you know of other responsive WordPress plugins that are not listed here, by all means, include a link to them in the comments. Have fun!

Easy Rotator – Download | Docs & Demos

• Dozens of flexible templates included
• Create sliders of recent or featured posts
• Make any slider responsive or fixed-width
• Social icon addon also available
• Built-in touchscreen / mobile support
• Premium version with video and audio support

This is hands down the best slider plugin I’ve ever seen, and I’ll be writing a post all about it soon! The UI of this plugin is powered by Adobe Air (if it’s not already installed on your computer, the plugin will launch the install wizard for you). You can even create sliders within sliders by categorizing the images you add; tabs are added at the top of your slider so users can switch views instantly!

SlideDeck 2 – Download | Docs & Demos

• Multiple content types in the same slider
• Add images, videos, plain text or HTML, even maps
• Add multiple sliders to pages & posts
• Create dynamically updating sliders
• Free and premium versions

Now fully responsive, Slidedeck 2 enables you to add dynamically updating content to your sliders from over a dozen sources like YouTube, Twitter & Google, even RSS feeds. With 9 different slider themes and several dozen options for each, you have unparalleled customization potential. It also includes a widget, so you can add sliders to your sidebar (remember to set a custom width), or any other widget-ready area of your site.

Meteor Slides – Download | Docs & Demos

• Unlimited slideshows
• Unlimited slides
• Multiple slideshows on the same page
• Display with widget, shortcode or templatetag
• Customize individual slideshows
• Multiple language files included
• Touch support for mobile

This is one of my favorites. Once you’ve set up the general settings, you can easily override them for individual slideshows by specifying whatever metadata you need. You can customize and display multiple slideshows using shortcodes or widgets, or in any theme template. Each slideshow is automatically attributed a unique ID, so styling with CSS is a breeze too.

Soliloquy Lite – Download

• Uses custom post types
• Unlimited number of image sliders
• Drag-and-drop image uploading, sorting and saving
• Completely SEO optimized
• Responsive (with touch enabled swiping)
• Shortcode and template tags
• Media uploader button to easily insert your image slider into your posts/pages from the WYSIWYG editor.

With this freebie, you can create an infinite number of responsive image sliders with an infinite number of images in each slider with a few clicks of your mouse. Multiple sliders on the same page is not a problem either. There is also a premium version available that gets you access to a few cool addons.

WOW Slider – Download | Docs & Demo

• Multiple themes included
• Desktop wizard
• Publish to WordPress or save on your computer
• Touch-swipe support
• Compatible with all browsers and devices
• Add logo or watermark to slides
• Comes in 25 languages

This one takes a novel approach to building sliders. You create your sliders on your computer, then upload them to your WordPress install. Once uploaded, simply add a unique shortcode wherever you want a slider to display. It comes with a few uniquely cool transition effects too; check ‘em out in the demos.

Captain Slider – Download | Docs

• Plenty of Settings like animation, speed, etc.
• Multiple Sliders
• Slider Sorter: Order your slides using drag & drop AJAX.
• Responsive
• Video Slides
• Captions
• Slide Links

Plus, you have the option of including sliders with template tags or shortcodes. According to the plugin developer, this is probably the best free jQuery slider/slideshow plugin for WordPress. If it does the job you need done, then you be the judge!

Cyclone Slider 2 – Download | Demos & Docs

• Uses jQuery Cycle plugin with 25+ transitions
• Easy-to-use interface with drag and drop functionality
• Multiple slideshows
• Individual slideshow settings
• Shortcode
• Customizable templates

Along with a drag-and-drop interface, this plugin leverages the built-in features of WordPress: it uses custom post types for the slideshow, custom fields to store settings, and the media uploader for the images. You can also create your own custom slider templates, and add them to a folder in your theme so they don’t disappear when you update the plugin.

Easy Gallery Slider – Download

• Automatically display slider for every post and/or page
• Slides are created from images attached to the post/page it is displayed on (WordPress Gallery)
• Responsive slider performs the same on every platform (desktop or mobile)
• Fade or slide effects
• Navigation with buttons, “dots”, keyboard, scroll-wheel, automatic timer
• Show titles and descriptions with an overlay
• Link individual slides to any URL
• Show a “zoom” button to integrate with a Lightbox plugin
• Many options available through an easy to use admin interface

Responsive Slider – Download | Demo

• Easy and simple deployment – just put the shortcode wherever you want and enjoy the result
• Custom post type “Slides” for creating and storing slides
• Each slide can be linked to any url
• You control the order of the slides
• Seamless integration with any WordPress theme

If all you need is a single responsive slider, this plugin is about as simple as it gets. Just add your slides and drop the shortcode anywhere you want it. Done.

Responsive Video – Download

• YouTube and Vimeo only
• Shortcode for posts, pages
• Recognizes all custom post types
• Add multiple instances of widget
• Custom title & description for any video

This plugin allows you to easily attach a single video to any post, page or custom post type with a shortcode. Or add multiple instances of the Video Widget to any sidebar(s). Both display types are fully responsive and fast loading. There is one drawback with this plugin: videos do not display in category archives. If this is important to you, it may not be your best choice.

Responsive Video Embeds – Download | Demo

• Multisite compatible
• YouTube
• Vimeo
• DailyMotion
• Blip.tv
• Viddler
• hulu.com
• Revision 3
• Funny or Die
• WordPress.tv
• Scribd

This plugin does only one thing: it automatically resizes WordPress auto-embeds, including video and other iframes, in a responsive fashion. Simple.

Advanced Responsive Video Embedder – Download | Demo

• Super-simple settings page
• Embed videos with simple shortcodes
• Responsive embeds
• Max-width if you like
• 4 Different modes how to embed Videos
• Colorbox integration for thumb mode
• Make embeds float with align=right/left

This plugin currently supports embeds from the following sites: YouTube, Google Video, Metacafe, Liveleak, Myspace, Blip, CollegeHumor, Videojug, Veoh, Break, Dailymotion, Movieweb, Myvideo, Vimeo, Gametrailers, Viddler, Snotr.

Fluid Video Embeds – Download | Demo

• YouTube and Vimeo only
• Videos display at full-width
• Original aspect ratio maintained (no black bars)
• Caches video meta for fast loading
• Shortcode

This uber-simple plugin has no settings page. It simply overrides the max-width for embeds in “Settings” > “Media”. One of the neatest things about it is that it fetches meta via YouTube and Vimeo APIs to ensure that videos maintain their original aspect ratio, with no black bars. And you can use the shortcode, with a bit of CSS savvy, to display selected videos in a nice grid if you like.

MarcTV Video Embed – Download

• YouTube and Vimeo
• Initially loads an image and “Play” icon
• Loads video player only after user interaction
• Set video start time
• Specify custom video title
• Google analytics events

This plugin adds “YouTube” and “Vimeo” events to Google analytics, so you can easily track user interaction on your site. It’s also the fastest one I’ve tested: it only loads the video’s default image and a play icon. The video is only loaded once it’s clicked. You can also set any video to start at a specific time, so your users can skip those annoying ads!

Video Overlayer – Download

• Brand your video content with a custom image
• Supports YouTube, Vimeo, Viddler and Screenr
• Easily enable support for other embed suppliers

A bit different than other plugins in this roundup, this one enables you to overlay an image on every video. You can use the included images, or upload your own to brand your content. The result is that not only do they become responsive, your site is much faster because the video only loads when it’s clicked.

Simple Responsive Images – Download

• Create responsive breakpoints for all images on your site
• Affects every image generated with wp_get_attachment_image
• Optionally specify a div ID or class to target

Unlike most of the plugins included here, this one does not generate sliders. Instead, it applies your custom breakpoints to all images on your WordPress site (you define the viewport widths and associated images sizes you want). All images will display according to the viewport size of the device being used to view your content. However, this plugin may not affect images that have already been uploaded; you may need to upload them again for the responsive attributes to be applied.

Related posts:

1. DevPress Releases Free Responsive Slider Plugin for WordPress If you need a simple, free slider plugin, check out...
2. Instantly Add Responsive Video Embeds to WordPress Want to make your videos automatically resize for different devices?...
3. 10 Responsive WordPress Plugins to Complement Your Theme So, you’ve finally made the plunge to get a responsive...

Style rules to look out for… and why.

This is the 3rd part of the series on “How to Customize Responsive WordPress Themes“. In this article, we’ll be taking a look at some style rules that you can use “risk free” when customizing responsive WordPress themes, as well as some that should maybe be avoided, and what you can do instead.

Before we begin though, I think it’s important to note the distinction between responsive and fluid layouts. In a fluid layout, the contents of a webpage will simply stretch or contract width-wise depending on the width of the viewport (browser window) and the minimum/maximum width settings in the style-sheet.

A responsive layout goes a few magnificent steps further: page elements can be re-sized, displaced elsewhere on a page, eliminated from view or replaced with other elements. Display rules can be defined so that any of those wonderful things happen according to the size and/or orientation of the viewport, or even the type and/or capabilities of the device being used. Very cool.

To begin, let’s set ourselves a few simple guidelines:

• Anything to do with what page elements look like can be used pretty much ad nauseum.
• Style properties that affect dimension, position or behavior of containers should be used with care.
• Properties that attribute fixed values should only be used under very specific conditions.

Sounds simple enough, right? Good. Now, let’s open up those guidelines and see what’s inside. Note that all CSS properties mentioned below link to pages at w3schools.com where they have fun “Try it yourself” editors so you can fiddle around with stuff.

“No risk” style properties

There’s actually a whole boatload of style rules that you can use willy-nilly throughout your responsive style-sheet, with zero worries of breaking your layout. Basically, any style rule that affects only the appearance of the contents is a safe bet.

For example, anything to do with setting the colors or backgrounds of elements can be used with impunity. Eg – background, color, border-color, opacity.

All text, font and generated content properties can also be attributed or modified with no effect on the page layout. Just be sure to preview stuff at different viewport sizes to be sure it’s still readable!

Other properties that only affect the contents (and not containers) that can be used with no worries include:

• Overflow
• Flexible box properties
• Lists (obviously)

Caution: potential wonkiness here

We can now see that contents can be styled pretty liberally, even in responsive WordPress themes. Where we can easily get ourselves into trouble is when we start styling the containers or the HTML elements (tags) our content sits inside. Some of the most commonly used elements include:

• body (the main page container)
• div (divides a page into sections)
• p (ooh… paragraphs)
• span (used mainly to attribute different styles to sections of text within paragraphs)
• button (clickable stuff)
• article & aside (often used in WordPress themes to identify the main content area & sidebars)
• ul & ol (containers for ordinary lists & numbered lists)
• li (items within lists)
• table (umm… tables)

Where the trouble can start is when we attribute fixed widths to things, and then forget to adapt those widths to different size viewports. Or neglect to account for elements that are floated within other floated elements. If you want to learn more about floating elements, MaxDesign.com has an excellent tutorial.

Additional issues can arise if display or position properties are incorrectly defined.

Finally, there are a couple of very cool CSS3 effects that can be potentially troublesome when customizing responsive WordPress themes, or modifying static ones. Note that these effects are not yet supported in Internet Explorer.

Animation – Enables you to set animation properties on an HTML element that will automatically play each time that element is viewed in a webpage.

Transition – Quite similar to the animation effect, transition enables you to set animation properties on an HTML element to trigger when a user hovers their mouse pointer over the element. The transition property is becoming more and more popular with WordPress theme designers to offer more interactivity in themes. Example uses include menus, other navigational elements, call-to-action buttons, expandable content areas, content highlighting or dimming, etc.

Calculator, ruler and forward-thinking required here

As mentioned above, when you are customizing a responsive WordPress theme, or adapting a static one, it is very important to watch out for fixed pixel values, wherever they may occur. Your first thought may be that fixed widths applied to container elements are particularly problematic. While they can create issues, you will likely spend much more time on border, padding and margin values. Watch out especially for those sneaky negative margins!

There are alternatives to fixed-pixel values for various elements in your theme. These are %, em and rem. There’s an simple yet informative article here to help you understand the difference between em and rem (also follow the links in that article to other useful ones).

One final caveat I really want to include here at the end: you may be tempted to use certain CSS properties or plugin shortcodes to arrange your content in columns. While this can be very desirable in fixed-width layouts, even fluid ones, it can wreak havoc in a responsive layout. In my opinion, CSS3 columns should be avoided at all costs in responsive WordPress themes. Imagine setting a 3-or-4-column display that looks really nice on your laptop. Now check it out on your iPhone… yikes!

In the next 2 articles of this series on customizing responsive WordPress themes, we’ll be taking a closer look at media queries. That’s when the magic happens. It’s gonna be fun!

As always, I hope you found this article helpful and, if you have any comments or additional insight, please don’t hesitate to post below. Thanks for reading!

Related posts:

1. How to Customize Responsive WordPress Themes – Part 1 Learn what to do, and what not to do, when...
2. How to Customize Responsive WordPress Themes – Part 2 Style-sheet organization: where stuff is… or should be, and why....
3. Graph Paper Press Jumps Into Responsive WordPress Themes Graph Paper Press has a new look! Check out their...

Introducing Sidebar & Widget Manager for WordPress

Hot diggety folks! There’s a powerful new player in the arena of WordPress sidebar plugins. The Sidebar & Widget Manager for WordPress gives you several cool ways to manage the display of your sidebars and widgets:

• Widgetize any page to create the page layout of your dreams.
• Create as many custom sidebars as you want.
• Insert any custom sidebar in any page or post content with shortcodes.
• Replace existing theme sidebars with your custom ones.
• Decide where to display your sidebars (pages, posts, archives, categories, taxonomies, etc.)
• Granular control for the display of individual widgets too! (Enable this in the plugin options.)

Demos here. More info here and here. Purchase here for $15.

Widgetize a page

Once you’ve installed and activated the plugin (with zero configuration!), you’ll see a new metabox appear beneath the content editor when creating or editing a page. There, you can insert whichever sidebars you want, in any layout you can imagine.

Here’s an example of the kind of page layout you can create with this plugin. Imagine building a magazine-style page layout like this, and setting it as your homepage. Your WordPress site will get a whole new life!

Create custom sidebars

Don’t want to use the existing sidebars that came with your theme? Create and add your own! In the “Add Sidebar” section in your wp-admin, you can create as many custom sidebars as you want. Custom sidebars can be set to display the widgets in a vertical arrangement (default WordPress behavior) or horizontally. There, you can also set any custom sidebar to replace an existing theme sidebar. Any custom sidebar you activate will be instantly available in your Appearance > Widgets area for you to add widgets.

As you can see in the above screenshot, you can also set your custom sidebars to display only for certain types of content. Plus, and this is really cool, the plugin automatically recognizes all the custom taxonomies that are available. For example, if you have MarketPress from WPMUdev.org installed, the plugin will recognize the custom post type (product) as well as all the associated taxonomies. This means you can set custom sidebars to display related products on individual product pages, or display featured products on product category archives, or any other arrangement you can think of.

Using shortcodes

A shortcode is generated for each custom sidebar you create. Using the shortcode, you can insert a custom sidebar in the content of any page or post. Yes, widgets in posts! With a little CSS savvy, you can style the sidebar content by wrapping the shortcode in a div container so the content wraps around it. The example screenshot below shows a custom sidebar inserted in a post with the following simple code:

<div class="alignleft">
[otw_is sidebar=otw-sidebar-1]
</div>

Replace an existing sidebar

Already have a number of sidebars included in your theme but want more control over how they display too? Nothing could be easier with this plugin. When you create or edit a custom sidebar, you can set it to replace any theme sidebar, and set the conditions too. This means you can now customize the sidebar content and widget appearance in any widgetized area of any theme, even the footer.

Display only on selected content

As mentioned above, each custom sidebar can be set to display only for the content types you select. It can be a bit tricky if you’re zeroing in on a very specific content type, because you need to consider things like templates, template hierarchy, categories, etc. But with a little experimentation, you can get things just right. The plugin supports all the following content types:

• Pages
• Page templates
• Posts
• Categories
• Tags
• Archives
• Custom post types
• Taxonomies
• Post type archives
• WordPress service pages – home, front, 404, search, etc.

Visibility settings for every widget too!

If you enable this feature in the plugin options (it’s the only option), you’ll see a new “Set Visibility” button on each widget you drag to your sidebars. Clicking that button will open a modal window where you can select where that particular widget should display. The settings are identical to the ones above but, with this feature, you also have granular control over every widget.

Note that each section of the modal will only show the 15 most recent entries in the content type you select. But a useful feature with this option is the ability to filter out everything you don’t need. Very handy indeed if you have hundreds of pages or thousands of posts!

Want to see for yourself?

How to widgetize a page

How to replace a sidebar

How to set widget visibility

Where to get this fabulous item, you ask?

Purchase the plugin from CodeCanyon.net for a measly $15

More info here and here.

Plus lots of demos here.

Related posts:

1. 10 Free Plugins to Add Custom Content to Your WordPress Sidebar Need more control over your WordPress sidebar content? These plugins...
2. Select Sidebar on a Post-by-Post Basis Using Custom Fields If you’ve every wanted to use different sidebars for different...
3. This WordPress Sidebar Plugin Stickies Your Sidebar When Scrolling Keep your sidebar content on-screen even when scrolling to the...

Style-sheet organization: where stuff is… or should be, and why.

In this 2nd part of the series on “How to Customize Responsive WordPress Themes”, we’re gonna take a look at the differences between the style-sheets for regular WordPress themes and responsive ones. We’ll also see how they should be structured, and why some theme designers put responsive styles in separate files.

If you’re new to CSS, you may want to bone up before diving into this series. See the end of this article for a few great resources to get you started.

“Classic” non-responsive WordPress theme style-sheets

In a well-structured style-sheet for any WordPress theme, one of the first things you may notice is the presence of an opening section called “reset”. This is a set of base styles that, even if there is nothing else in the style-sheet, should render the theme content equally in all browsers. We won’t get into exploring whether this is required or not, as even the “experts” are of divided opinion. Suffice it to say that the consensus is that it’s a question of craft and personal choice of tools according to the needs of the project.

There are several variations of reset styles (see here for the 5 most popular). WordPress themes, in general, tend to use the reset script by Eric Meyers. Here’s a screenshot of what that basic code looks like:

As you can see, it’s minimal and uncluttered, it gets the job done, and it’s up to date. After the “reset” section, you’ll see hundreds or possibly thousands of lines of (hopefully) familiar CSS. Whole sections would be clearly labeled using commented-out headings like this example: /* Main menu styles */.

Then… well, that’s about it for “classic” themes. First “reset” styles, then the theme styles; not very complicated are they? Now it gets fun…

Responsive WordPress theme style-sheets

Responsive theme style-sheets can look completely different at first glance; they can even seem oddly blank. You will encounter some style rules that may be a bit unfamiliar: things like rem for instance (rem stands for root em; see here and here for more on that). You may see @import rules at the very top (required by themes that may have several different style-sheets for different purposes). And then there are the all-important media-queries.

Let’s start by looking at how Twenty-Twelve is set up, then explore something a bit different. Don’t have Twenty-Twelve yet? You can download it here.

Twenty-Twelve is a responsive WordPress theme designed by the folks at WordPress and is intended to be the upcoming default theme. Open up the style.css file in your favorite text editor now. You’ll notice a difference right off the bat: there are notes at the top of the file referring to the rem values used throughout the style-sheet. (Did you read up on rem by following the links above? Good.)

Those values are essential in a responsive theme as they allow the theme to maintain a consistent appearance across all devices. The notes are followed by the familiar reset styles (slightly extended). Then comes about 1200 lines of plain ol’ CSS. So far, so good.

At line 1351, you’ll spot something new and exciting, and maybe a bit confusing: media queries. Media queries perform the actual wizardry that makes responsiveness possible. If you’re not familiar with what they are and what they do, you can Google around to arm yourself with your own expertise. Then use it to challenge my presumptions when we get around to exploring them in much greater detail in parts 4 & 5 of this series!

And now for something completely different…

So far, we’ve seen how the style-sheet for a non-responsive WordPress theme is set up, as well as an example of a basic responsive one. However, many responsive themes will have more than one style-sheet. Take a look at this sample file structure:

In the main theme folder, we see the familiar style.css file, then a file called responsive. There’s also a folder labeled stylesheets with 2 more of them inside. That’s 4 style-sheets in all!

When several style-sheets are used in a responsive WordPress theme, they must be called in the theme’s header.php file. Here’s what that could look like:

We can see there is the standard call to the style.css file. Then 3 more to include the responsive, base and layout style-sheets. There are 2 simple reasons for the multiple style-sheets as in this example:

1. Sometimes, it’s just easier to keep things organized by putting the responsive styles in separate files.
2. This particular theme example was built on a grid framework that already had the base and layout files in it; so why complicate things by removing them? (We’ll look more into grids and other frameworks in the last part of this series.)

Conclusion

We can see that style-sheet structure in responsive WordPress themes is really not that complicated once you’ve taken a good look. For designers, it can be a question of personal preference, or simply keeping the file structure of the base framework being used.

When you get into customizing a responsive WordPress theme, it’s important to understand that structure, and where to find the stuff you want to modify. When your theme is based on an unfamiliar framework, that can get a little tricky. So, if you have selected a theme you want to modify, take some time to inspect and familiarize yourself with its style-sheet file structure.

Related posts:

1. How to Customize Responsive WordPress Themes – Part 1 Learn what to do, and what not to do, when...
2. 10 Free Responsive WordPress Themes Responsive design has been buzzing on the internet since Ethan...
3. 16 Beautiful and Free Responsive WordPress Themes Installing a responsive theme is one of the easiest ways...

How to Customize Responsive WordPress Themes is a new series of articles I’ll be posting at the rate of one every few days. This article is an introduction to the series, which I’ll be updating with links and additional info as subsequent articles go live.

Responsive WordPress themes have taken the design community by storm since their first appearance. For good reason too. With all the awesome advances in mobile communications, and the proliferation of mobile devices, folks are now accessing the web a whole lot more often from their phones than from their computers.

It used to be that if you had a website, and wanted to make it accessible to people on mobile devices, you had to either create a dedicated mobile site, or a bunch of dedicated apps. Although the 1st method can now be relegated to the history books, the 2nd may still have its uses.

The whole idea of responsiveness in WordPress themes is to ensure that your web pages serve up lightning fast to any device, from the smallest hand-held to wall-mounted big-screens. Don’t freak out; we’re not gonna get into actually designing a responsive WordPress theme in this series of articles. That’s way beyond me too. We will be taking a real close look inside one or two of them though.

I’ve always been a dig-in-and-get-your-hands-dirty kind of guy. Even as a kid, I used to love tearing things apart to see what made them tick. I still do, to an extent. One of my goals for 2012 was to learn more about responsive WordPress themes, and what makes them tick. So, over the course of the next few weeks, that’s exactly what I will be doing: digging deeper into responsive WordPress themes, and sharing knowledge and discoveries with you.

The series of topics I propose to share will be in a (hopefully) logical structure; from the basics to the more detailed and involved (this is open to debate and suggestions BTW). What makes a good responsive WordPress theme? How are they made? How can they be customized? Those are some of the questions that I hope this series of articles will help answer.

There is one important caveat that needs to be noted before we even begin our fun & games.

The average Joe (or Jane) really couldn’t care less how much time and effort you invest in creating an awesome website.

What they care about is finding the information they need, quickly and easily, without having to think about how to find it, much less have to wait for the darn pages to load. So, no matter what you do, no matter how hard you work at it, no matter how long it takes or how much it costs you; keep it simple :)

What you can expect from this series

Part 2 – Style-sheet organization: where stuff is… or should be, and why.

What differences are there between the style-sheets for regular WordPress themes and responsive ones? How should they be structured? Is one way any better than another? Get answers to these questions in this overview.

Part 3 – Style rules to look out for… and why.

What you should watch for when customizing your responsive WordPress themes. Some style rules should simply not be allowed in your style-sheets. Kick ‘em out!

Part 4 – Media queries 1: how they work.

Media queries are all the rage nowadays. Their flexibility is what makes responsive themes possible.

Part 5 – Media queries 2: when to use them and why.

Some basic guidelines to follow when using media queries.

Part 6 – How to make images and videos responsive.

One of the challenges when customizing the media output or functionality not inherent to the theme (plugins) is ensuring its responsiveness.

Part 7 – Introduction to SASS/LESS CSS pre-processors

SASS & LESS provide you with tools to make your style-sheets oh-so-much-easier to manage. Let’s take a quick look at how they do that, and how to use them in WordPress. (Caution: NOT for CSS newbies!)

Part 8 – How to make a static theme responsive.

Got a really nice theme already and don’t want to chuck it? Let’s see if we can make it responsive too!

Part 9 – Building your own responsive WordPress theme? Think mobile first.

Mobile first means designing a fast, lightweight theme for small devices, then expanding on that base design for larger screens. Includes recommendations from some experts, as well as links to tutorials and foundational elements like grid boiler-plates & base style-sheets.

If you want to get your hands dirty too by applying what you’ll discover over the next few weeks, start now by creating a child-theme of Twenty-Twelve. That’s the responsive WordPress theme we’ll be tearing apart throughout this series. If you’re not sure how to do that, see this page in the WordPress codex.

I hope this series will develop into a collaborative effort. So please don’t be shy, share your thoughts, your expertise, your suggestions, and your own discoveries in the comments below.

Photo credit: Flickr.com

Related posts:

1. 10 Free Responsive WordPress Themes Responsive design has been buzzing on the internet since Ethan...
2. Graph Paper Press Jumps Into Responsive WordPress Themes Graph Paper Press has a new look! Check out their...
3. Introducing AlienWP: A Source for Free and Beautiful Responsive WordPress Themes Responsive WordPress themes have been popping up everywhere during the...

“No code required, works right out of the box.”

I’ve been working with WordPress for for a few years now, and I’ve heard or read that phrase many times when chatting with folks, or reading various articles, forum posts, or promotional materials for plugins and themes. “No code required” is a rather frequent buzz-phrase.

And it is true; you don’t need any coding skills. Whether you’re running a simple blog, a small business site, or even a network of sites, you can get by just fine. The array of built-in features and customization options that come with most plugins and themes nowadays enable you to create some pretty awesome stuff.

So, what’s the catch? Well, there is no catch, really. There is, however, a box. You know the one, it’s in the second half of the buzz-phrase above.

What theme designers and plugin developers might not tell you is that box is often required for their stuff to work the way they intended it to.

Chucking the box

Although working with WordPress to build a site or network with zero coding skills is entirely feasible, you are limited by the features and options built into the theme and plugins you use. But what happens when you need or want some functionality that your plugins don’t provide? Or stuff doesn’t look so hot with your theme? Or you’d prefer some theme feature show up somewhere else? Or… ?

Well, if you have zero coding skills, you basically have 3 options:

1. Live with things the way they are, and keep on dreaming.
   • This option is easy and requires no effort. It does tend to generate a pervasive state of disappointment and frustration though.
2. Hire a/some developer(s) to create the awesome stuff you want ($$$).
   • Depending on the extent of customization you want done, this can quickly bring your PayPal balance to the same level as your coding skills: zero.
3. Learn how to create the stuff you want yourself.
   • Effort required: variable. Return on investment: nirvana. Well, maybe not nirvana, but satisfaction and pride in a job well-done are likely (as well as a website that works the way you want it to).

So what do you need to learn so you can customize stuff the way you want it?

Minimum coding skills recommended to work with WordPress

When you start getting into customizing things around your WordPress site, you’ll quickly discover that there are 3 basic types of code that come into play rather quickly.

• HTML (HyperText Markup Language)
• CSS (Cascading Style Sheets)
• PHP (Hypertext Pre-Processor)

There are other code languages used throughout pretty much every WordPress theme and plugin (JavaScript, jQuery, etc.) but for the great majority of everyday customizations, you really don’t need to get into those. If you get a handle on the basics, you’ll be amazed at the awesome things you can accomplish on your site or blog.

At the end of this article, you’ll find links to some excellent tutorial sites. But for now, to help get you started on your own learning curve, let’s take a quick look at each of those 3 code languages, and see what they’re used for. While I would consider the first 2 essential learning, the 3rd (PHP) is optional. Keep reading to find out why.

HTML (HyperText Markup Language)

HTML is the easiest coding language to learn (oh, happy days) and, as you are just starting out as a newbie-coder, you can also consider it the most important one. Why? Because that’s the language that actually displays the content on web pages. To state it simply: HTML is just a collection of identifying tags used to wrap content in containers so it displays on-screen in a particular manner.

You’re probably already familiar with HTML if you’ve ever taken a look at the HTML view in your post editor. Go ahead and look at one of your posts in HTML. Notice all the funky brackets before and after your content? That’s really all there is to it.

HTML tells the browser what is being displayed on-screen. For example, to tell the browser to display content in paragraphs, each paragraph must be preceded by an opening <p> tag, and followed by a closing </p> tag. The backslash in the closing tag is what tells the browser to “close this”. Here’s a simplified illustration of what a typical WordPress page layout might look like, with the basic HTML needed to produce it:

OK, that’s fine. But the HTML is all in a column, yet the sidebar is off to the right. How do you do that? Ah, that’s where your 2nd language comes into play: CSS. (Yup, you’re gonna be multilingual!)

CSS (Cascading Style Sheets)

We’ve seen that HTML is used to tell the browser what type of content to display on the screen. CSS is the language used to tell the browser how to display that content.

As an example, let’s take a look at the sidebar from the illustration above. In the HTML, the code for the sidebar is written beneath the content. Yet in the actual layout that displays on the screen, it shows up to the right of the content. Here’s how that happens:


#wrapper { float:left; margin:auto; width:960px; }
#content { float:left; margin:20px; width:600px; }
#sidebar { float:left; margin:20px; width:280px; }


Here’s a quick run-down of the 3 style rules above:

• Float: is a style rule that tells the browser how to align an element with respect to its parent container. So float:left; tells the browser to align the HTML element with the left side of its parent. If 2 or more elements within the same container are floated, they will line up side-by-side if their dimensions allow it.
• Margin: is simply the thickness of the blank space that surrounds the element. Notice the margin:auto; applied to the wrapper container; auto is an especially useful value for our main container as it effectively centers the wrapper container on screen no matter the size of the browser window.
• Width: is pretty self-explanatory.

To get the sidebar on the right-hand side of the content, the sum of the widths and margins of both content and sidebar must be less than or equal to the width of the wrapper.

• Content: 20px + 600px + 20px = 640px
• Sidebar: 20px + 280px + 20px = 320px
• Wrapper: 960px… Bingo!

So, if you’re going to customize anything at all in the look and feel of your WordPress site, you’ll need to know which HTML container elements to target with your custom CSS style rules. For more examples, see this post. See also Tip #1 in this post to learn how to find which HTML elements you need to target.

PHP (HyperText Pre-Processor)

I know, it should be HPP instead of PHP, but here’s why it’s not. Now that that’s out of the way, let’s see why you might want to dabble a bit in PHP.

HTML & CSS are necessary to tell the browser what type of content to display, and how to display it. PHP works completely behind the scenes to dynamically fetch that content according to conditions and variables that are defined in functions.

PHP can be used to fetch content from a variety of sources, including other websites, RSS feeds, etc. But, when working with WordPress, it’s main use is in querying your database. Functions can be written to fetch and display different information depending on virtually any conditions you can think of.

So, contrary to the HTML & CSS sections above, I’m not going to waste anybody’s time by giving examples of actual code here. Instead, I’m going to stop writing, and give you those links I promised earlier so you can move forward. :)

The sources listed below are the best and simplest I know of (and I visit them regularly when I’m puzzling something out). If you know of other resources that may be useful for folks just starting to hone their coding skills, please leave a comment below with a link. Thanks for reading!

Some great places to learn HTML, CSS and PHP

• HTML Dog By far, one of the best HTML & CSS tutorial sites around.
• HTML.net There to help you learn HTML, CSS, PHP & JS in plain English… and 10 other languages too!
• w3schools They have a neat “Try it yourself” editor that allows you to experiment with stuff as you’re learning.

Photo credit: Flickr.com

Related posts:

1. How to Design a WordPress Theme With No Coding Skills Whatsoever Itchin' to design a WordPress theme but lacking the CSS...
2. Expand Your Skills with Codecademy’s Free HTML and CSS Courses Want to get a few extra skills under your belt...
3. A Great Way to Learn PHP Coding at Lunch Are you a lunch reader? Here's a great way to...

WordPress plugins just for fun?

Sure! We’re not always all serious and focused on “let’s get the job done”! Why should WordPress be any different? There are loads of fun WordPress plugins to be found in the plugin repository; likely even more by searching Google.

Every once in a while, I come across a little gem that can be puzzling, just loads of fun or sometimes downright mind-boggling. This article proposes 12 such plugins created so you can add that fun factor to your site or blog.

Go ahead and grab any one, or all of them. Watch out though, if you have comment moderation turned on, you may be in for a flood of email in the days ahead!

If you know of any other crazy, mind-boggling or just plain fun WordPress plugins, please add them to the comments below. Thanks!

Barrel Roll – Download

You may or may not have noticed the cool little effect that Google added to their search page a while back: you can make the whole page rotate 360° simply by entering the text “barrel roll” (without quotes) in the search field. Well, this little plugin enables you to add that little trick to your WordPress site just for the fun of it.

Simply activate the plugin on your site and, when your users enter “barrel roll” in any text field… wheeee! It works just fine in comments, and BuddyPress updates too.

Mind Reader – Download

This one is really weird, in a fun and mind-boggling sense :) I first came across a puzzler like this at 1-800-Got-Junk. I got stuck on that page for several long minutes trying to figure out how it works… and got nowhere.

Now, there’s a WordPress plugin that re-creates that puzzler on your site or blog to freak out your users! Here’s how it works:

Asteroids Widget – Download

For those of you who are nostalgic for the days of classic arcade games, there’s Asteroids for your WordPress site. However, this WordPress plugin puts a really fun twist on the game: instead of driving a little spaceship around the screen and shooting asteroids that fly by, users can shoot and destroy stuff on your pages! That’s right, your users can literally destroy elements on any page: paragraphs, titles, avatars, ads, etc. There’s even a point counter at the bottom of the page! Don’t worry, everything comes back to normal after a page change or refresh.

Once the plugin is activated, simply add the Asteroids widget to your sidebar (it has a bunch of display options), or use the shortcode in any post or page to create a “Play” button.

CAPTCHA Garb – Download

If you’re tired of the plain old text CAPTCHAs, you may want to give Captcha Garb a try; it’s a fun alternative! Adding a twist to the idea of image captchas, the images are actually little puzzles that a post commenter must solve. The images are split into 4 pieces that can be dragged and dropped to solve the puzzle. The 58 captcha images included are loaded randomly, and you can even upload your own too.

MyPuzzle Sliding – Download

MyPuzzle Jigsaw – Download

These are 2 fun little time-wasters for your users. Like the names suggest, they enable you to add sliding or jigsaw puzzles to your WordPress posts or pages. The neat thing is you can use your own images. For example, imagine using your users avatars as puzzles on their author pages. Now there’s a novel way to help your members get to know each other a bit better!

DoppelMe Avatars – Download

This plugin can be a somewhat silly, yet fun addition to your BuddyPress arsenal. Then again, if you’re running a very lighthearted site, or really want to allow your users to remain as anonymous as can be, it may be ideal for you. It enables your users to create, on-the-fly, DoppelMe avatars right from their BuddyPress profile. It’s a brand-new plugin and has only one drawback as it is now: it completely overrides all other avatar options. If enabled, users cannot upload their own, or use Gravatars. I’ve requested additional features in their support forum at http://partner.doppelme.com/, so we’ll have to wait and see.

Hello Darth – Download

This one is for all you Star Wars aficionados, fans & geeks out there. We all know about the “Hello Dolly” plugin that comes gift-wrapped with every installation of WordPress, right? You know the one: it displays random quotes from Hello Dolly by Louis Armstrong in your admin area. Well, this is pretty much the same thing, with one big awesome difference in awesomeness: ya get quotes from Darth Vader hisself! How awesome is that, you ask? It’s pretty darned awesome, I say!

He’s Dead, Jim – Download

Make It So – Download

Well, I couldn’t leave out these goodies for trekkies, now could I? Like Hello Dolly and Hello Darth above, these 2 display famous random quotes in your WordPress admin. But this time, those quotes are from Star Trek (the original series) and Next Generation, respectively. “I’m a doctor, not a bricklayer, dammit!”.

Vertical Rater – Download

This is another brand-new plugin that offers a unique alternative to rating stuff with rows of stars, thumbs, etc. It displays ratings in a vertical fashion using either a thermometer (great for rating members/authors on a dating site!), stars (yep, there they are), balls (?) and more in an upcoming premium version (yes, there’s that too).

Reverberation – Download

This plugin gives you a cool and easy way to share your favorite new music with your users. With a simple shortcode generator in the visual editor of any page or post, you can insert a player with titles from any ReverbNation artist. The player is compact and fast, and you can create shortcodes to play singles or playlists. You can even display a Google map with the locations and schedule of upcoming shows. Now, how cool is that?

Photo credit: Flickr.com

Related posts:

1. 10 Free Plugins to Add Custom Content to Your WordPress Sidebar Need more control over your WordPress sidebar content? These plugins...
2. WordPress Plugins: Can You Have Too Many? Some simple tips to help reduce the load on your...
3. 9 jQuery WordPress Menu Plugins + Bonus Tutorial for the Adventurous Enhance your user experience with these dynamic jQuery-powered navigation systems....

Your WordPress Theme Menus where you want them!

You’ve surely come across a WordPress theme and said to yourself, “Oh this is a beautiful theme, but I wish the menu wasn’t right there!” Well, WordPress theme menus don’t have to be only where the theme designers put them.

Today we’re gonna look at a few ways you can re-position the main navigation in pretty much any WordPress theme. You’re not limited to only the main nav, as you can also use these methods to re-position any other WordPress theme menu in themes that have more than one.

Oh, and the methods in this tutorial do not require any php code edits whatsoever. Everything can be accomplished with a little CSS magic in the theme’s style-sheet. Below are a few screenshots from the WordPress default “Twenty-Eleven” (2011) theme showing the end results of the methods we’ll be exploring today.

Each exercise in this tutorial references the main nav ID from the 2011 theme. Don’t worry though, to adapt these methods to your theme, simply change the ID (#access) to the actual ID of your theme’s navigation container and you’re good to go! Ready? Let’s get started.

Find the ID of the nav container

The first thing you need to do, and this applies to each method described below, is to identify the ID of the container of the nav element you want to change in your theme. If you don’t know what that ID is, you can easily find it using your browser’s developer tools (see the “Identify the main nav container” section of this post for some tips). Got the ID? Good.

1) Re-positioning the main nav in the theme

Let’s start with a simple exercise: re-positioning WordPress theme menus up or down in a theme. This is actually one of the simplest edits you can make, and it can have a truly dramatic impact on the appearance and usability of your site. All you need to do is add the following snippet to your theme’s style-sheet.

body #access {
position:absolute;
top:150px;
}

The magic happens with position:absolute;. That rule effectively pops the container free from the restraints of the theme, allowing you to re-position it up or down simply by adjusting the value of top:150px;. A word of caution is in order here though: 2011 is a responsive theme. Like all responsive themes, the use of fixed-pixel values doesn’t always give the best results. Experiment a bit with different pixel values at different screen sizes and/or different devices. Or try different properties such as em or % or rem to get the results you want.

2) Stick to the top or bottom of the screen

This is another simple edit you can do to make one of your WordPress theme menus stick persistently to the top or the bottom of the screen as you scroll. This time the magic is done with position:fixed; as in the CSS snippets below.

Use the following to stick to top of screen. Adjust the top setting if needed (included here in case you have the WordPress toolbar activated). Also, if you stick a menu to the top of the screen, you may want to add a margin to the top of your theme to make room for it (the 1st part of the following snippet… adjust to fit).

body {
margin-top:25px;
}
body #access {
position:fixed;
top:25px;
left:0;
width:100%;

Use the following to stick a menu to the bottom of the screen. You’ll likely need to also add some style rules to get sub-menus to drop up instead of down (see the next part for that).

body #access {
position:fixed;
bottom:0;
left:0;
width:100%;

3) Make sub-menus drop-up instead of down

If you need your sub-menus to drop up instead of down (e.g.: a menu stuck to the bottom of the screen), add the following to your style-sheet. The 2nd part of the below snippet ensures that fly-out sub-sub menus align properly with their parent menu items.

#access ul li:hover ul {
bottom:100%;
top:auto;
}
#access ul ul li:hover ul {
bottom:0;
}

4) Stick to the side of the screen

Finally, here’s an easy way to ensure that one of your WordPress theme menus stays persistently on the side of the screen as you scroll. Here, we’re popping the menu out of the theme, and making all menu items children of a single main item that serves as a menu header (see the screenshot below for how to set up your menu for this).

body #access {
position:fixed;
left:0;
top:230px;
width:193px;
}
body #access ul ul {
display:inline;
}
body #access ul ul ul {
display:none;
}

As always, I hope you enjoyed this and find use for it. If you need help with any part of this tutorial, please leave a comment (with a link if possible) and I’ll try to help you over any humps :)

Related posts:

1. How to add Navigation Menus to your WordPress Theme Learn to quickly add navigation menu support to any WordPress...
2. Beginner’s Guide to WordPress Menus Learn to easily control your site's navigation menus....
3. How to Highlight the Current Page when Using WordPress Navigation Menus WordPress 3.0 brought us a shiny new navigation system with...