Update: It looks like WordCamp Omaha didn’t happen this year either, better luck next year…

By default slide posts use the same capabilities as blog posts and only admins can change the slide settings. So admins, editors, and authors can create new slides, and contributors can create slide post drafts. This is straightforward, but not exactly ideal.

Most of the time I only want the admin and editor to create and edit slides. And what if you want to give an editor access to the settings? This is where Members comes in handy.

Customizing roles with Members

When you activate the Members plugin it creates the custom capabilities for the slides post type. None of the roles have these custom capabilities, so the slides menu disappears for all the roles.

Now you can go to Users -> Roles and edit the roles you want to add the slides capabilities to. Typically I will add all the capabilities to the admin role, and add all the capabilities aside from meteorslides_manage_options to the editor role. With this setup, both the admin and editor can manage slides, but only the admin can manage the slideshow settings.

Changing the Members Settings

One thing to note, the Members plugin has several features that are activated separately. Two of these are active when you install the plugin, the Role Manager and Content Permissions. Content Permissions adds an extra metabox to the slide, post, and page editors, so if you aren’t planning to use that, I would suggest going to Settings -> Members and deactivating the Content Permissions feature.

Other awesome things you can do with Members

I install Members on every site I build so that I can create a streamlined experience for the end user. None of the default roles are ever quite right for the client. I want them to be able to edit all the content on their site including slides, forms, and widgets, but I don’t want to make them an admin and give them access to the WordPress settings or the ability to install new themes and plugins.

So to create the perfect role for the client, I make them an editor and customize the capabilities of this role to include just what the user needs to manage their site.

One example is removing the links menu. This feature is almost never used, so I avoid a lot of confusion by just removing the manage_links capability, which completely hides the Links menu from that role. An example of something I always add is the edit_theme_options capability. This allows editors to manage theme options, menus, and widgets, but won’t let them switch themes or install new ones.

If you aren’t already using Members, go try it out and be sure to leave a good rating for this awesome plugin!

Meteor Slides has been busy since version 1.3.3 was released. The number of downloads doubled to over 40,000 with nearly 80 ratings and many generous donors have also helped to keep my coffee cup full, thanks!

I recently created a GitHub repository for Meteor Slides; drop by if you’d like to fork, pull, watch, or otherwise fiddle with my plugin.

A new slideshow skin

The most noticeable change in version 1.4 is a new skin for the slideshow. The new navigation arrows and paged buttons improve the visibility on a wider range of backgrounds and just freshen things up a bit. See it in action on the plugin homepage.

These updates should enhance the navigation’s usability without being too drastic of a change visually. But no one has to switch the design of the slideshow on their site. I have packaged up the original design as a slideshow skin called Retrograde that you can drop into the theme to use the original design.

Keep an eye out for more slideshow skins, I have a few on the drawing board that I will release soon.

Members plugin support

You might be able to tell from my plugin, but I don’t like to add functionality to themes when there is an awesome plugin that could be used instead. The same goes for adding functionality to plugins!

Allowing users to control which roles have access to Meteor Slides has been on my GitHub issues list for a while now. This could be built into my plugin, but that adds complexity that most users don’t need and deviates pretty far from the plugin’s purpose. And there is already an awesome plugin for managing users and roles called Members.

Justin Tadlock’s Members plugin is one of the few plugins I use on nearly every site I build. With Members it is simple to customize a role for a client that has just the capabilities they need to create a better user experience.

I knew I wanted to extend those custom roles to include Meteor Slides capabilities as well. My first attempts at supporting Members didn’t work out, but thanks to Justin’s book, Professional WordPress Plugin Development, which he co-wrote with Brad Williams and Ozh Richard, I was able to get it working great!

Adding support for the Members plugin is the most noticeable improvement, but there are a lot more behind the scenes. I added uninstall functionality for plugin options, moved the admin functions to a separate file, re-organized the plugin, and really improved the code overall. If you want to write awesome WordPress plugins, this is the book to get!

Custom slideshow script

I have extended Meteor Slide’s support for custom stylesheets and templates to include slideshow scripts as well. This should rarely be needed, but is handy if you need to heavily customize the paged navigation. Check out the documentation on custom slideshow scripts to learn more.

More translations

Meteor Slides is now available in fifteen languages thanks to the kindness of these translators!

Hebrew: Translation by Ariel Klikstein
Japanese: Translation by COCOM
Polish: Translation by Marcin Pronobis
Portuguese: Translation by Hugo Baeta
Russian: Translation by Boris Homiakov
Updated Swedish: Translation by Simon Wämmerfors

In 2009 I drove down for Chicago’s first WordCamp. I had a great time at WordCamp, but it was a long hectic drive by myself. Not going to make that drive again, but I also don’t want to be one of those people on Twitter complaining about delayed flights and TSA jackboots so I’m going to take the train instead.

I’m packing a nice thick book and hoping for a stress-free trip, don’t let me down Amtrak!

Looking forward to meeting a bunch of people I only know from Twitter or their blogs, new people who I haven’t bumped into online yet, and maybe even some people who use Meteor Slides.

Meteor Slide 1.3.2 has some updated functionality for WordPress 3.1, improves support for slideshows of different sizes, and now includes contextual help for all of the slideshow admin pages.

This plugin recently reached 17,000 downloads, and after 40 ratings, Meteor Slides is still holding onto five stars! Thanks everyone who has tried my plugin, rated it, and especially those who have been kind enough to donate. Seen a few cool implementations of Meteor Slides lately and I’d love to see more if you want to share a link.

Meteor Slides 1.3.2

Meteor Slides 1.3.2 improves support for multiple slideshows and adds updates for WordPress 3.1 compatability. Any custom stylesheets or templates will need to be updated for use with this release.

• Improved support for multiple slideshows of different sizes
• Fixed transparent PNG bug
• Updated functions for WordPress 3.1 compatibility
• Updated screenshots for WordPress 3.1
• Updated jQuery Cycle to 2.94
• Updated jQuery Metadata to 2.1
• Added message filters for slides
• Added contextual help
• Added Chinese translation by Yu Haoran

Updating Custom Stylesheets and Templates

To fully support multiple slideshows of different sizes I had to make some changes to simplify the markup of the slideshow. This will not affect most users of Meteor Slides, but if you are using a custom stylesheet or slideshow template you will want to replace these with a fresh copy from 1.3.2 and update your changes.

Sorry for any inconvenience, but these changes should improve the flexibility and reliability of the slideshow. If you have any problems or questions please let me know.

Note: I had a generic function in 1.3.2 that was causing a conflict, Meteor Slides 1.3.3 resolves this issue.

On many WordPress powered sites, the primary focus is static pages rather than blog posts. I have built some sites that only use pages and don’t even have a blog. For these types of sites that are using WordPress “as a CMS” rather than a blogging platform, the theme file that generates the pages becomes that much more important.

Using this same page template file on each page could make a site very homogeneous and be a headache to customize. But it is easy to create your own page templates and apply them to specific pages on a site.

Template Hierarchy

To better understand how page templates work, it’s a good idea to take a look at the template hierarchy of a WordPress theme.The template diagram might seem a bit daunting, but we’re only interested in the bottom branch which is the page hierarchy.

A page is displayed using one the following templates in this order:

1. custom template – Manually selected for the Page.
2. page-{slug}.php – If page slug is robots, page-robots.php is used.
3. page-{id}.php – If page ID is 1, page-1.php is used.
4. page.php - If a more specific page isn’t found.
5. index.php – If page.php is missing.

If you needed a template for just one page and didn’t want it available as an option for other pages, page-{id}.php might be a sneaky way to do that. But I’d avoid page-{slug}.php, it’s too easy for users to change the slug and break something. For this tutorial, we’ll be sticking with custom templates.

Sample Child Theme

This tutorial uses the default Twenty Ten theme. All of the custom page templates and other changes to the theme have been packaged as a child theme for Twenty Ten.

Download the Twenty Ten child theme to get the complete code for this tutorial.

Adding Templates

Creating a page template is very simple. To start with you need to copy your theme’s page.php file.

Don’t forget about the template hierarchy when naming this copy. Naming it page-robots.php means it will automatically be used on a page with the slug “robots”. Avoid these issues by using an underscore instead and name your file page_robots.php or something along those lines.

To make this new file into a template, open it in your favorite text editor and add a PHP comment to it:

<?php
/*
Template Name: Robots Template
*/
?>

This should be at the very top of the file on line #1, above the <?php get_header(); ?> line.

Using Templates

After adding that code and saving the file, lets try to add the template to a page to make sure it works.

Create or edit a page and select the “Robots Template” in the Page Attributes panel. Now view the page and lets see if the template is being applied.

How do we do that when the only change to the template was the comment we added?

Twenty Ten has a template tag called body_class which adds all kinds of handy classes to the body tag. If the theme you are using doesn’t have this tag, I highly recommend adding it.

View the source code of your page and check out the body classes:

<body class="page page-id-51 page-template page-template-pagerobots-php logged-in">

A class has been added for that specific page template, this alone enables you to target pages that are using this template with custom CSS.

Page Templates

Default Template

This is the page.php template that is used by default on all pages. With Twenty Ten theme, as with most themes, it has the page contents in one column and the default sidebar in the other column.

One Column Template

This is the only custom page template that comes with 2010. It removes the sidebar and centers the content column. This template never seemed very useful to me, it adds white space, but it doesn’t expand the remaining column to make room for more content.

Wide Template

A wide or full template is a bit more useful. It can be used to add content that doesn’t fit on the default page like large images or a table of data.

Creating the wide template

Make a copy of the page_robots.php file and call it something descriptive like page_wide.php. Open this file up and give it a new template name.

To remove the sidebar, delete this line: <?php get_sidebar(); ?>

Nothing more needs to be changed in the template; save it, add it to a page, and view that page. The sidebar is gone, but the content column is still too skinny. Take a peek at the source code of that page and find the body class for the page template:

<body class="page page-id-5 page-template page-template-pagewide-php logged-in">

Now we just need to add a CSS rule to make the column full width. Open your theme’s style.css file and add this rule:

.page-template-pagewide-php #content {
	margin: 0 auto;
	width: 940px;
}

Go back to your test site and refresh the page, the one column should now be full width.

Map Template

One useful thing about page templates is that all the content doesn’t have to be added via the page editor, it can also be hard-coded right into the page template.

You might do this with content you don’t want the users to edit. Or to add content that can be easily broken by the page editor like image maps, Flash embeds, or JavaScript.

We can make a copy of the page_wide.php template and add one line to it to create the map template:

<iframe width="940" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Minneapolis,+MN&sll=44.942174,-93.099359&sspn=0.021537,0.03901&ie=UTF8&hq=&hnear=Minneapolis,+Hennepin,+Minnesota&ll=44.979857,-93.263969&spn=0.084998,0.30899&z=12&iwloc=A&output=embed"></iframe>

Check out the page_map.php. file in the sample child theme to see how this template is built.

About Template

Another common use of page templates it to add a different sidebar to certain pages.

This template adds a new sidebar for the About page. You’ll need to register this new sidebar, this is very simple to do, check out the functions.php file in the child theme which code to register two new sidebar.

In the child theme you will also find a sidebar file called sidebar-about.php. There is a hyphen rather than an underscore in the file name.

Custom sidebar files are never loaded automatically, the text after the hyphen is used to include the sidebar in the page_about.php file: <?php get_sidebar('about'); ?>

After registering a new sidebar and including it in a page template, you are able to add different widgets to the pages using that template.

Home Template

All the elements of these different page templates can be used to create a custom homepage that puts a unique face on a website.

Check out the page_home.php file with a unique sidebar for the home page. Using a page template also makes it easy to add an image banner, Flash element, or a slideshow to the homepage.

The home template in this example is setup to load a slideshow if my plugin Meteor Slides is installed.

With a bit of CSS it is also easy to switch the columns around, or change the dimensions for certain templates.

Adding these CSS rules will give the homepage a wider sidebar than the rest of the site to set it apart a bit and provide room for slightly more content in that area:

.page-template-pagehome-php #content {
	margin: 0 321px 0 20px;
}

.page-template-pagehome-php #container {
	margin: 0 -300px 0 0;
}

.page-template-pagehome-php #primary {
	width: 300px;
}

Beyond Page Templates

These are just a few of the many different ways that custom page templates can be used. Once you dig in and start using page templates, don’t forget that you can expand on that to create custom files for authors, categories, or other templates in the hierarchy.

Features in this version include support for multiple slideshows and metadata. The template tag, shortcode, and widget all support both of these features. I’m especially interested to see how the shortcode and widget work with different themes and plugins. There are also several other small changes, such as expanded navigation options.

Download the beta of Meteor Slides 1.3 and give it a try!

I updated the beta to fix a bug with using metadata to resize a slideshow.

I am currently writing updated documentation and recording some new screencasts for these new features. I’m hoping to release Meteor Slides 1.3 before the end of the month, of course a babysitter and some espresso could speed things up!

Multiple Slideshows

Multiple slideshows are enabled using a custom taxonomy called “Slideshows”, you can create slideshows and add slides to them just as you would use categories.

You can use the standard template tag or shortcode, which will load slides in any slideshow. But by adding a slideshow parameter, you can load a specific slideshow.

Here is the format of the template tag:

<?php if(function_exists('meteor_slideshow')) { meteor_slideshow("slideshow", "metadata"); } ?>

The value of the slideshow parameter should be the slideshow’s slug. So to load a slideshow called “Robots” with no metadata, your tag should look like this:

<?php if(function_exists('meteor_slideshow')) { meteor_slideshow("robots", ""); } ?>

The widget works the same way, just add the slideshow’s tag to the “Slideshow” field. The shortcode is formatted slightly differently, but uses the same values:

[meteor_slideshow slideshow="slideshow" metadata="metadata"]

A shortcode for a a slideshow called “Robots” with no metadata would look like this:

[meteor_slideshow slideshow="robots"]

Adding Metadata

The slideshow is powered by the jQuery Cycle plugin, which supports another jQuery plugin called Metadata. The jQuery cycle plugin has a ton of options, and Meteor Slides only includes the essentials on the settings page.

With Metadata, you can add classes to the slideshow, and these are dynamically applied as commands to the slideshow. This means that power users can tap into all the features of jQuery Cycle without hacking the plugin, and do some neat stuff, like making the slides random. This also allows you to override the global slideshow settings and use different settings on specific slideshows.

Here is an example of a slideshow template tag that just changes the transition to zoom:

<?php if(function_exists('meteor_slideshow')) { meteor_slideshow("", "fx: 'zoom'"); } ?>

This tag loads the Robots slideshow and uses the zoom effect:

<?php if(function_exists('meteor_slideshow')) { meteor_slideshow("robots", "fx: 'zoom'"); } ?>

Again, same values in the widget and shortcode, different formatting for the shortcode:

[meteor_slideshow metadata="fx: 'zoom'"]

Here is a shortcode example for the Robots slideshow with the zoom effect and random slides:

[meteor_slideshow slideshow="robots" metadata="fx: 'zoom', random: 1"]

Here is a shortcode example that uses metadata to resize a slideshow, the slideshow should have the same aspect ratio as the original for the best results:

[meteor_slideshow metadata="height: 135, width: 419"]

The metadata feature should greatly expand the flexibility of Meteor Slides, let me know if you come up with any cool tricks using metadata!

Translate Meteor Slides

Some text has been added in this version and the current translations need to be updated, and of course new translations are always welcome! You can download the PO or text file and email me your translation.

Please report any conflicts or bugs in the comments below or in the WordPress.org support forums.

Ask Me About WordPress

I will be speaking at WordCamp Minneapolis – St. Paul on Saturday, November 13th, 2010.

This will be my first time speaking at a WordCamp, my session is on creating custom page templates. I’ll be covering some of the most common uses that I run into such as adding templates for a single column, alternate sidebar, or special content.

If you’re in the area, I highly recommend coming to WordCamp, they are great events for learning more about WordPress and meeting other users. If you’re in another time zone, there’s probably a WordCamp near you, or check out WordCampTV.

I will also be volunteering at the help desk, answering questions about WordPress and helping people with their sites. Cory at iThemes was kind enough to send some WPShirts for the help desk crew, so we should be easy to spot. Stop by and ask me about WordPress!

Without an editor style, content in the visual editor has minimal styling and generally does not match how the content looks when it is published on the site. By adding an editor style to a WordPress theme, you can get the content you are managing in the backend to visually match the content on the frontend, creating a more WYSIWYG experience for the end user.

Adding this feature to a new or existing WordPress theme is very simple. For this tutorial, I’ll use iNove, a popular theme from the theme directory that I’m using for a current project and need to update.

As you can see, version 1.4.6 of iNove doesn’t have support for an editor style. To add this feature, open iNove’s functions.php file in your favorite text editor. At the top of that file, on the third line, add this line of code:

add_editor_style('style.css');

Save that file and reload your post in the visual editor, you should see iNove’s stylesheet load in editor, like this:

The stylesheet is now being loaded in the backend, but it looks a bit funky! This is because the content that you are editing is in an iframe, and that iframe is using the theme’s background’s style. We actually want that iframe to use the main column’s background style.

Luckily, the body of this iframe’s content has a handy class on it called mceContentBody, we can use that to add a rule to iNove’s stylesheet which fixes this issue.

Open up iNove’s style.css file and copy this bit of code from it:

body {
	background:#BEC3C6 url(img/bg.jpg) repeat-x;
	color:#555;
	font-family:Verdana,"BitStream vera Sans",Tahoma,Helvetica,Sans-serif;
	font-size:12px;
}

Now paste this at the top of the stylesheet as the first rule, right below the comments and edit it like this to change the background color and set the width, just in the visual editor:

body.mceContentBody  {
	background:#ffffff;
	color:#555;
	font-family:Verdana,"BitStream vera Sans",Tahoma,Helvetica,Sans-serif;
	font-size:12px;
	width: 605px;
}

Not sure what the background color and width of your theme’s main column are? Crack open Firebug and take a peek:

Save the edited stylesheet file and refresh the post editor. With any luck, you should see a well styled version of your content that just about matches the published version.

Of course, there are a few issues with this feature, depending on your theme. If your stylesheet styles the headline tags directly like this h1, they will be styled in the visual editor, but if they are styling more specifically like this #content h1, that won’t be styled because the theme has a division with the content ID, but the editor does not. So a few tweaks to the theme may be necessary.

Another issue that I ran into is that link styles are overwritten by the WordPress backend styles in some browsers. This can be a problem if your theme uses any specially styled buttons, but it can be solved by adding !important; to those rules.

This is the easiest way to add an existing theme’s stylesheet to the visual editor, but it does load a lot of extra CSS code that is unneeded in the backend. For new themes you might want to consider splitting your stylesheet into two files, one for the theme’s design, and one for the style of the content so that only those rules that are needed are loaded in the visual editor.

Meteor Slides recently broke 5000 downloads on WordPress.org and got its eleventh 5 star rating, thanks everyone for trying out my plugin and leaving a rating or feedback. And I want to give a special thank you to the users who have been kind enough to support this plugin with a donation.

I just released Meteor Slides 1.2.3, which includes paged slide navigation. The paged buttons goes together with the left/right navigation and neither will be added to your slideshow unless you enable navigation in the settings.

You can see how the paged navigation works on my homepage. The buttons can be easily modified or even hidden completely with CSS if you would prefer a different design.

Support for multiple slideshows coming soon!

Quite a few users have requested multiple slideshow functionality, and I am pleased to announce that Meteor Slides 1.3 will included this feature.

I have an alpha version of 1.3 put together with multiple slideshows working and I am hoping to release it by the end of September. This will be a pretty big update with a lot of little changes to make multiple slideshows easy to use, so I would like to get a few beta testers involved before I release it as an update if anyone is interested.

Also, if anyone would like to sponsor this next release of Meteor Slides, please let me know.

Meteor Slides in your language?

If you would like to translate Meteor Slides, you can download the PO or text file and email me your translation.

Meteor Slides 1.2.3

Centered slides, fixed navigation bugs, and added slideshow navigation buttons.

Centered Slides:

Slide images that have a smaller width than the slide dimensions will now be centered.

Navigation Bugs:

A few of the transitions caused the slides to drop or become cropped when the navigation was enabled. The navigation should now work fully with all transitions.

Slideshow Navigation:

The slideshow navigation now includes paged buttons which highlight the current slide, and allow direct navigation to any slide in the show.