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

Let’s say you need two slideshows on your site. The larger slideshow, Jupiter, is 500×200 and the smaller slideshow, Mercury, is 300×150.

The height and width options on the slides settings page determine two things, the dimensions of the slideshow itself, and the maximum dimensions of the individual slides. Smaller slides can be used, but any slides that are larger than these dimensions will be cropped, so the height and width in the slides settings should match the largest slideshow on your site.

Start with the largest slideshow

Start by setting up the largest slideshow in the standard way. In the slides settings, set the Slide Height to “200″ and the Slide Width to “500″. Then create a slideshow called “Jupiter”, make your slides with images that are 500×200, and add them to the Jupiter slideshow.

Here is an example shortcode to load the largest slideshow with the name Jupiter:

[meteor_slideshow slideshow="jupiter"]

Note that you don’t need to use metadata to set the dimensions of the largest slideshow because it should match the dimensions on the settings page.

Then setup the smaller slideshow

Now for the smaller slideshow, create a slideshow called “Mercury”. Make the slides for this slideshow with images that are 300×150 and add them to the Mercury slideshow.

Because you have used smaller slide images which were prepped to fit 300×150, all you need to do is override the default slideshow height and width using metadata to shrink this specific slideshow to the proper dimensions.

Here is an example shortcode to load the smaller slideshow with the name Mercury:

[meteor_slideshow slideshow="mercury" metadata="height: 150, width: 300"]

When using metadata, only values which are strings should use single quotes, other types, such as the integers in the above example, should be used without single quotes.

Styling specific slideshows with CSS

By default the slideshows will be full width block level elements. Maybe you would like to wrap some text around the smaller slideshow though.

When you specify a slideshow, a unique ID is created for it based on the slideshow’s slug. So the Mercury slideshow ID would be “meteor-slideshowmercury”. With this ID you can target just that slideshow with certain CSS rules:

#meteor-slideshowmercury {
	float: left;
	margin: 0 20px 20px 0;
}

Keep it simple

But don’t forget, less is more! A slideshow is a great way to get a visitor’s attention, but when you add multiple slideshows or other animated elements to the same page you are dividing the user’s attention and diluting that page’s potential.

So try to keep it simple by spreading these elements out to different pages to reduce the clutter and increase the quality of your website.

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 Slides reached a couple of big milestones this week. My plugin broke 50 ratings while holding onto a five-star rating. It has also now been downloaded over 25,000 times, that’s a lot of slideshows!

To celebrate Kristine and I baked some gold star cookies with the kids—alright, they baked the cookies and I ate them.

Thank you everyone who has tried and rated my plugin, marked it as working, or left a comment. I really appreciate all of the feedback!

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.

But there is an issue with using multiple slideshows of different sizes. Not all of the different elements in the slideshow are resizing dynamically when the dimensions are changed in the metadata. This issue is most noticeable when using navigation.

I have a development version of Meteor Slides 1.3.2 in trunk that fixes this problem and I could use some help testing it. The CSS and HTML markup of the slideshow have had some significant changes. These changes simplify the slideshow and should make it easier to customize in the future, but they could cause problems with existing customizations.

If you are using multiple slideshows and resizing any of them using metadata, please try the development version and let me know in the comments if this fixes the problem.

I’d also like to hear from users who aren’t having this problem that have tested version 1.3.2 to make sure that it doesn’t cause any new problems!

If you are using a custom stylesheet, please use caution, you might want want to test this on a copy of your site before making it live in case you need to make any changes to your stylesheet.

There have been a few projects where I have needed to customize the template for the slideshow, so this version adds support for a custom slideshow template. I added some documentation for using a custom template which shows how to add titles or captions to the slides, and there is also now a page in the documentation on custom stylesheets.

Be on the lookout for more Meteor Slides screencasts and documentation in the near future!

Meteor Slides 1.3.1

• Fixed post thumbnail registration conflicts.
• Added support for custom slideshow loop.
• Fixed navigation for multiple slideshows.
• Improved support for transparent images.
• Fixed slideshow layout issues.
• Updated French translation by Thierry Michalowski

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.