Using WordPress

How to Use Genesis eNews Extended with Constant Contact

Why You Want the Genesis eNews Widget Extended for Constant Contact

The more I have to work with Constant Contact, the less I like it, but it’s the email service provider of choice for many of my clients.

Unfortunately, its WordPress integration options are a bit unfriendly. The official Constant Contact plugin hasn’t been updated since June 2013. It’s a hugely heavyweight plugin that loads your whole list of contacts into your WordPress admin interface and sucks up a lot of time syncing it. Plus the form designer creates sign-up forms of sufficient hideousness that the only people I know who have it installed gave up and just used a text widget with a subscribe button.

Constant Contact Sign-Up Button on website

Speaking of subscribe buttons, I think there was a time when you could actually embed Constant Contact sign-up forms on your site, but not any longer. You have the option of creating buttons or embedding links. Or you can create QR codes. The basic buttons are exceedingly plain and ugly. This is about as attractive as you can manage to make one, and it required some custom CSS, because the only things you can adjust in the button designer are the colors and shape of the button.

Constant Contact Button Designer

And, as you notice, you’re stuck with that “For email marketing you can trust” tagline at the bottom, which is nonsensical when applied to the client company as opposed to Constant Contact itself. They should have at least included their name with it.

As if this weren’t all annoying enough, Constant Contact makes it difficult to use alternative methods of signing up. They don’t provide a guide to the information you’re going to need to include in a third-party form. And, as I discovered recently when someone complained about the CAPTCHA on the form on a client site, that information has changed in the past year or so, since the time the Constant Contact tutorial was provided in the support forum for the Genesis eNews plugin.

Figuring Out the New Formula for Constant Contact and Genesis eNews Extended

My client sent me the new button code and I had to piece things out from there, based on the information that had been filled out in the existing Genesis eNews Extended widget, which had been filled out in accordance with the tutorial mentioned above. That worked fine–but the sign-up form it led to included a CAPTCHA form that one person had complained bitterly about. When my client queried Constant Contact, they explained that this was the old form; on the new form the CAPTCHA was hidden and humans didn’t have to deal with it. This was obviously to be preferred. (I detest CAPTCHA.)

I certainly didn’t want to regress from the existing eNews Extended widget to a basic Constant Contact button, so I needed to figure out how to update the information in the widget. It was not immediately apparent how to do that. I took a look at the source code for the actual sign-up form, trying to spot hidden fields, but in fact there were numerous hidden fields for each input field, and none of them resembled the hidden fields of the former widget.

Finally I noticed a correspondence between part of the URL in the button code and the existing hidden fields. I speculated that the other variables in the URL might be additional hidden fields, and decided to test this theory by adding each of them to the “hidden fields” box of the widget, following the same formula:

<input type="hidden" name="p" value="oi">

The process was a bit finicky, but it worked. I tried it later on a second website, where I had been unhappy with the way the admittedly lightweight CC widget displayed, and it worked there, too. It’s actually a bit easier if you copy just the link and not the button code.

Step-by-Step Guide to Setting Up Genesis eNews Extended for Constant Contact

1. Go to Constant Contact and copy the “Share Sign-Up Form” link

Constant Contact Share Sign-Up Form

If you don’t have direct access to the Constant Contact account (I didn’t in the case of the first client), copy the link from whatever code the client sends you, or ask the client to send you this link.

The full link for this particular form looks like this:

2. Paste this URL into a text editor

Using a text editor will save you hassle vs. using something like Word. If the URL is not hyperlinked it will be easier to copy different sections.

3. Copy the first part of the URL into the ACTION box of the Genesis eNews Extended Widget

Note also that your E-Mail Field should have “ea” in it, to transfer the content across. I haven’t yet figured out what to put in the First Name and Last Name fields. I’ll work on that. But those fields appear on the CC form later anyway.

Genesis eNews Form Action field for Constant Contact

 4. Break down each of the remaining elements of the URL into hidden fields, as follows:

<input type="hidden" name="llr" value="mykivsmab">
<input type="hidden" name="p" value="oi">
<input type="hidden" name="m" value="1113022802700">
<input type="hidden" name="sit" value="4zd479xhb">
<input type="hidden" name="f" value="e189675b-6db2-4f5e-a1a5-bf39db3d4399">

5. Enter these in the “Hidden Fields” box in the Genesis eNews Extended Widget.

Hidden fields entry for Constant Contact in Genesis eNews Extended widget

6. Save the widget.

Here are two different Genesis eNews Extended widgets connected to Constant Contact on two different themes:

Genesis eNews Extended widget for Genesis eNews Extended widget for

Neither of these is a miracle of original design, but both fit better with the themes of their respective sites than the default Constant Contact button is, and allows for a more customized message.

But give me MailChimp any day.


How Long Does It Take to Get Good at WordPress?

MediaBistro class website header

During the final discussion section of my most recent MediaBistro WordPress class (October-November 2012), one of my students unintentionally asked me a trick question: “How long did it take you to get good at WordPress?”

My first thought, honestly, was “Wait–am I good at WordPress?” Then I realized that she probably didn’t mean Andrew Nacin good, and might even mean “How long did it take not to be a hopeless n00b?” So I asked her to define “good.”

“Enough to be happy with a site you created and others said it looked good.”

Okay, now here’s the difficult part.

First, those are actually two different standards. You and your clients will almost inevitably occupy different positions on the perfectionism spectrum. They might be satisfied well before you are, or you may encounter that blessedly rare client who is never satisfied. In general, I tend to want to build Cadillac websites even when clients are only asking (and paying) for Chevies, but I have had a few thoroughly nit-picking clients. (Clients, and of course the people who use their websites, are the main “others” whose opinion of the sites matters.)

Second, the first time I ever built a site with WordPress, I was happy just to have built it. The year was 2005 and WordPress was only on version 1.5. Prior to this version of WordPress, there were no pages, only posts. Themes with different templates for different types of content (index, single posts, categories, pages, etc.) had just been introduced.

It was not possible to build the kind of site that you can build with WordPress today. WordPress was still a blogging tool, not a proper content management system. To build even the predecessor of the kind of site that my student was talking about, the kind of site she wanted for herself, I actually had to wait for a few years.

It was 2007 when I first started to build actual websites with WordPress. That was the year that WordPress started out on its rapid growth curve: 2.1, 2.2, 2.3. Then WordPress 2.5 burst onto the scene in 2008, and things really started to get interesting. It was around then that I started moving away from building HTML sites.

I didn’t actually start breathing and sleeping WordPress until 2009, after joining (and then getting recruited to organize) the East Bay WordPress Meetup, but it really wasn’t a question of how long did it take to master WordPress theme design, but how long did it take WordPress to become a tool for building sophisticated websites.

If you start out knowing some CSS and HTML (and at the beginning I knew more HTML than CSS, having begun my web adventures in the very early days before CSS was even thought of, never mind PHP), it’s not hard to customize themes, and the invention of child themes combined with custom CSS plugins (I do find that aspect of Jetpack very handy, particularly for testing) saves you from having to reinvent the wheel.

If you don’t know anything about any of those things at all, and you want a custom site rather than an existing theme with a bit of tweaking, you’re going to have to spend a good number of months devoting yourself to learning some basic skills as well as the time you need to master the WordPress-specific material. If you devote several hours to it each day, you’ll get to be good at it quickly. If it’s only an hour here and there separated by weeks, you’re likely to struggle.

But at least you no longer have to wait for WordPress to catch up with your aspirations.

A Very Strange Problem

A week or so ago now (time gets away from me in the most appalling fashion) I was about to post something on my personal blog when I encountered an unexpected problem. I got an “Error establishing database connection” message. Say what?

This frequently means there’s something wrong in your wp-config.php file, or maybe your .htaccess file. The problem is, that site, and this one, are part of a WordPress Multisite installation, and there was nothing wrong with most of the other sites, including the top-level site, Rhymes with Sketch. And sub-sites in a Multisite installation don’t have their own wp-config.php or .htaccess files.

Like any sensible person, I asked Mika Epstein (better known as Ipstenu) and Ron and Andrea Rennick for advice. Ron told me to check the database tables for the affected site, so off I went into phpMyAdmin to take a look.

I couldn’t even see the tables in question. I got a big red error message saying that they were damaged and I would have to repair them. But there was nothing within phpMyAdmin that would let me repair them.

Feeling slightly panicked, I turned to Google. (By this time it was late enough in California and far past the Rennicks’ bedtime in Canada.) I learned that I needed to log into cPanel and go to the MySQL management page. The solution to my problem lay in something I’d never paid any attention to before:

MySQL database check and repair tool

When I checked the database, I found all kinds of errors, not just in the tables for the personal blog, but for one of the other sites. Clicking the “Repair DB” button fixed everything, though.

I did look at my error log, and found that there were memory problems and, well, enough other things to make it a very large log file. In my general state of overwhelm I deleted the log file rather than studying it, so I’m not sure quite what went wrong to trigger the problem.

Since it was a very strange problem, however, and not one I’d heard about before, I thought I should write something about it in case anyone else had this issue, either with Multisite or single installations.

What the heck is a lucky URL?

The folks over at AppSumo are having a contest, the prize for which is lifetime free hosting from WP Engine. I’ve had clients use WP Engine, and it seems to be pretty good. What distinguishes them from other managed WordPress hosting companies is the fact that you can actually get to your database.

I don’t have the same warm fuzzy feelings about WP Engine that I do about, but would certainly recommend them to the right clients, and I wouldn’t turn down free hosting, though I somehow suspect they are not offering multisite hosting in this contest, so I couldn’t use it for my own sites.

Anyway, as part of the contest I am supposed to share my “lucky URL,” so I guess this is the place to do it:

Setting Up DNS and Email on has changed more than its hosting panel lately: they have a new policy on e-mail, which is to say, they no longer provide email service to their clients. This makes things considerably more confusing for the non-technical, so I’m providing a tutorial for my MediaBistro students and anyone else interested on how to get things set up. Read Full Post »

How to Import Joomla Content Using the WP Importer Plugin

For my sins (I learned this phrase from my dissertation advisor back when I was in graduate school), I am on the board of the Bay Area Consultants Network. Actually, I love BACN and have missed possibly 5 meetings since I started going in July 2003; if you are a consultant, coach, or other solo professional in the San Francisco Bay Area, I recommend you check them out.

Anyway, we are in the process of converting our existing Joomla! website to WordPress, as who wouldn’t. This is partly to make it easier for people other than me to add and update content, and partly because I am the board geek and I think WordPress suits BACN’s needs better. The problem with the site right now isn’t so much Joomla as the fact that it’s very hard for people to find what they’re looking for. (Well, that and terrible SEO, which has something to do with the type of content we usually post and something to do with the not-at-all-search-engine-friendly-URLs.)

BACN Home Page January 2012 (Joomla! 1.5)

BACN Home Page January 2012 (Joomla! 1.5)

Joomla! 1.5 article manager

Then go into your WordPress install to your SoftWarp | WP Importer settings. (You will need an activation key, which you get by submitting your e-mail address. This did not work from my LAMP server. Apparently the program requires cURL. I set it up on a dev server here on WP Webhost instead.)

The problem for someone developing a new site is that we have content going back to 2002, and importing from Joomla! to WordPress is not common enough for the WordPress foundation to build its own importer. I had tested the Joomla 1.5 Importer a while back, and it worked fine, though it was a bit slow as it required you to import one category at a time. That plugin has only been tested up to WordPress 3.0.5, however, and not updated since January 2011. (Yes, it has taken us a long time to get going on this project. Non-profit. Volunteer. Committee. Need I say more?)

So I did a little searching to see whether there was anything more recent and came across a plugin called WP Importer from SoftWarp. This plugin is not in the WordPress Plugin Repository, I presume for the very good reason that it’s marketed with decidedly black hat overtones. (The copy and samples are hilarious, though.)

The plugin’s documentation assumes that you’re importing a CSV file, and also that you’re using it in conjunction with another of the developer’s plugins, so using it to import Joomla! databases took a bit of figuring out. Since I can’t be the only person on the planet who will ever need to do this, I figured I would document the process here.

First, go into phpMyAdmin and open your Joomla! databases. If you are used to WordPress databases, you will be amazed at how many tables there are in a Joomla! database. Possibly because these tables don’t remotely match up, you can’t use the WP Importer plugin to import a complete Joomla database. Instead, you need to locate the database with the content in it.

mos_content, the database table containing Joomla! 1.0 content

mos_content, the database table containing Joomla! 1.0 content

In Joomla! 1.0, this table is called mos_content. In Joomla! 1.5, it’s called jos_content. (I haven’t worked with more recent versions of Joomla!, so I don’t know whether they’ve changed the name, but I bet it’s still nnn_content.)

Export this table as an SQL file and save it to your computer.

Exporting the Joomla! 1.5 jos_content table as an SQL file

Exporting the Joomla! 1.5 jos_content table as an SQL file

Log into your WordPress installation and go to SoftWarp | WP Importer. If you have not done so already, you will need to activate the plugin. The plugin is free, but you need to provide a valid e-mail address to receive the activation key. This did not work on my LAMP server; something to do with the need for cURL, which is also required to make the plugin work. I set up a dev install here at WPWebhost instead, and it worked fine.

First you import the table. In this case, you need to select SQL as the format of the file.

Import table with WP Importer plugin

Step 1: Import Table

Once the table has been imported (which may take a while depending on the number of entries), you will be automatically transferred to the next screen. Here you get to drag the different database field tokens into the correct positions. This involves a little bit of guesswork if you don’t know Joomla! databases intimately, but it’s not that hard to figure out. The main thing to know in this case was that [[introtext]] had actually been used as the main body of the post on this site, with [[fulltext]] for additions on some pages, so both of those belonged in the “Post Body” field.

WP Importer post config screen

Mapping database field tags on the post config screen

For some reason, which Joomla! experts will probably know, no section or category name info was saved in this table, only the category ID numbers, which weren’t very helpful to me, so I just let everything come in as “Uncategorized” and updated it later.

Joomla! content imported as WordPress posts

Joomla! content imported as WordPress posts, manually categorized

WP Importer imports all content as posts. Eventually, most of  these items will be converted to custom post types based on the categories I assigned them, but I’m still building those out.

This doesn’t remove all the labor from the import process, but it’s certainly easier than copying and pasting, and it ought to work on any flavor of Joomla! database—and probably databases from any other content management system, as long as you can isolate the table with  the content in it.

How to Mobilize Your Genesis Theme in Less Than an Hour

I love the Genesis Theme Framework (not an affiliate link) by StudioPress. Sometimes I love to hate it, because I have to figure out how to do something in Genesis that I already know how to do in, say Twenty Eleven or any other “standard” WordPress theme, but it’s worth figuring out the idiosyncrasies. Using any framework means less labor for a designer: the creators of the framework are responsible for keeping it up to speed with WordPress updates and features. Genesis itself has some lovely built-in features, like SEO titles and per page/per post layout options. And there are all those nice child themes bundled up in the developer package to mine for elements of a new theme.

There’s just one little problem with the way that Genesis creates its home page layouts: widgets. A Genesis magazine layout is made up entirely of dynamic content, with the different areas populated by the Genesis Featured Page and Genesis Featured Post widgets. They are marvelously flexible things (and there’s even a Genesis Featured Widget Amplified plugin that displays custom post types and custom taxonomies), and once you’ve mastered adding widgetized areas to a home.php file, you can save yourself hours of coding custom loops by using them.

Here’s an example, using the Lifestyle Theme, from the client site that inspired me to write this post:

CBI Screenshot 11-3-2011

From the back end, the main content area looks like:

CBI Home Widgets

The sidebar and the footer are also full of widgets.

The Lifestyle theme is easy to set up and rearrange, and even more flexible thanks to the Dynamic Widgets plugin. Widgets are a great feature of WordPress and using them to build home page designs makes Genesis more user-friendly.

But it turns out that widgets don’t play nicely with mobile plugins, and therefore mobile plugins don’t like Genesis.

I hadn’t realized this at first, because I myself am a dumbphone user. I’d asked the client to check on the appearance of the site on a mobile device, but it turns out my main contact there didn’t have a smartphone either, so she had to ask a third person, and the response wasn’t entirely clear. Another visitor to the site actually asked “Why do I see a calendar?” Only when I borrowed my husband’s iPhone did I understand what this person had seen, and only after a lot of hunting around did I realize why.

This is what WP Mobile Detector was showing to those with iPhones (and iPads: it wasn’t making a distinction):


This is not the site’s home page: it’s the blog index. This was confusing enough for me to find; I can completely understand why the typically non-technical member of Congregation Beth Israel Connecticut might think it was an event calendar. (There is one of those on the site, but this is not it.)

I went looking at other mobile plugins. StudioPress mentions the Wapple Architect Mobile Plugin for WordPress on their FAQ page, but while that at least displays the regular site to iPads (which really don’t need any special design concessions), it still couldn’t recognize the home page content, though I was able to customize the menu. (It supposedly displays a sidebar and lets you choose widgets, but that feature did not work properly.)

I also looked at MobStac WordPress Mobile, which did both the best and worst jobs of displaying content comprehensively, since it completely ignored the category exclusion rules set up to keep the events listings and newsletters off the main blog page. And I tried WPtouch, but to configure that properly you need to spend a lot of time creating custom icons, and it still wouldn’t create the  home page I needed. I took a look at OnSwipe, but that says  in its FAQ that it doesn’t display widgets, so that wasn’t going to be of any use to me. I even started looking at premium plugins like PluginBuddy’s Mobile, but wasn’t convinced—and not authorized by the client to spend money, either.

Trolling around in the StudioPress support forums was not terribly satisfactory. There were a couple of recommendations (from the same person) for the pro version of WPtouch. And then, finally, a link to a tutorial from Smashing Magazine called “How to Use CSS3 Media Queries to Create a Mobile Version of Your Website.”

Now, CBI was not paying me to design a mobile theme, which is why I didn’t just develop one in the first place. (That, and I’m fairly new to responsive design: see the previous post.) They’re a non-profit on a tight budget, and if a free mobile plugin had worked, it would have been good enough for their purposes. Based on my experience with other sites, I assumed (very, very dangerous thing to do), that a mobile plugin  would work for them. It wouldn’t, and I’d promised them a mobile-ready site.

Besides, the instructions seemed so simple. I suggest you read the entire article, but here’s the short form for converting your old stylesheet for mobile devices.

  1. Save a copy of your style.css file as small-device.css. Remember to rename the file within the comments.
  2. Open the file in a text editor. Search for the word “float.” If it applies to a div, replace “left” or “right” with “none.”
  3. Look for a “width” property on those divs. Set it to “auto.”
  4. Set the base font size to 100% and convert the remaining font sizes to ems or %. You will probably want to increase font sizes, particularly in menus and search box. You could skip this step and still have something more usable than the plugins are giving you, though.
  5. Upload the small-device.css file to your child theme directory (in my case this was wp-content/themes/lifestyle)
  6. Open your functions.php file and add the following lines at the end:
     * Add mobile stylesheet
    function mobile_styles() { ?>
    	<link href="<?php bloginfo('stylesheet_directory');?>/small-device.css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" rel="stylesheet" type="text/css"/>
    <?php }

Doing this took me about an hour, including reading the tutorial and figuring out how to put the stylesheet link into the functions.php file. (That info comes from a StudioPress tutorial on adding a print stylesheet.) I spent another hour or so today mucking about with the menu and the header and the fonts. The site has a fairly long menu, and I didn’t like the way it looked stacked. I’m not completely happy with my current solution of dividing it into three columns, since the drop-down menus now also divide up that way, but I think it’s an improvement. I created a new, taller subnav background image and increased the menu font size and line height to make it easier to use. I also set the description display to “none” in order to have the site name displayed more readably. (I had tried to use a different header image, but couldn’t figure out how to override the custom header choice in the theme options.)

The result is not pixel-perfect, but every single element of the original home page is there and working, from the image slider to the featured video.

CBI Mobile 1

You can visit on any device with a screen 480 pixels or smaller to check it out for yourself.

Those of you who have more experience than I do with responsive design can doubtless make suggestions for improvement.

Meanwhile, anyone using a Genesis theme can quickly create a mobile-friendly version of the site. Given that, I would expect StudioPress to be able to release a spiffier version of this small-device.css file for each child theme, quite easily, at the next update, if not to start making all the new themes responsive out of the box. Unlike me, their designers know their themes, and their framework, backwards and forwards, and wouldn’t have to spend as much time tinkering while adjusting things.

The Obvious Argument in Favor of Responsive Design

Compared to designing a whole new mobile site, installing a mobile WordPress plugin is simple, and it did a good enough job for most sites and most phones…in 2008. Actually, for basic blogs, the standard mobile themes that come with plugins like WP Mobile Detector or Wapple Architect still do a perfectly good job, though they tend to lack branding elements. The popular WPTouch gives you something that looks like an iPhone app if you have the patience to configure it, and OnSwipe (formerly PadPressed) generates a tablet-oriented interface, though in fact an iPad displays most websites just fine as they are.

Using a plugin was (and is) appealing mainly because it’s easy and most of the mobile plugins are free. The experience you give your mobile visitors may not be ideal, but at least your site is accessible to the increasing numbers of people using their phones—or rather, those handheld computers that happen to also make cellular calls—to surf the Web. Naturally, however, anyone who could get a mobile site that looked like the desktop site without having to pay extra for it would want to do so.

That’s where responsive design comes in. With a little CSS magic, you (or your theme designer) can create a website that rearranges its columns and resizes its images to suit any screen its being viewed on. (The design “responds” to the device viewing  it.) The first theme I remember seeing that could do this was the Yoko theme. Then WordPress 3.2 came out and with it the new responsive default theme, Twenty Eleven. Shortly thereafter I attended Sara Cannon’s session on responsive design at WordCamp SF 2011.

In principle, responsive design seemed pretty straightforward, but I didn’t figure I’d be ready to go from listening to one lecture to creating a theme from scratch. There was no need for that, though, thanks to the magic of child themes: I could just create a child theme of Twenty Eleven and have the responsiveness taken care of, and that’s what I did, very shortly thereafter. Since I was simultaneously working on a project for a client where I was using a mobile plugin, I had an immediate opportunity to take some comparison screenshots.

CBI Screenshot 11-3-2011

Blog-iPhone CBI Page iPhone

The examples above come from a Genesis site using the Lifestyle (blue) child theme, rendered with the WP Mobile Detector plugin. The mobile theme color happens to be close to the blue of the desktop theme, but the display doesn’t look much like the site, and instead of showing the home page content, the mobile site defaults to the blog page.

Tellus WP Site 10-3-11

Tellus menu-iPhone Tellus screen 2

These are screenshots of a site created as a child theme of Twenty Eleven. I should probably have spent some time tinkering with the way the menu behaved in the iPhone layout, but otherwise, you can see that the header image and site colors are preserved, the text is a good readable size, and the search box is usable. (The sidebar appears below the main content column in the iPhone layout, and also in the iPad layout, which otherwise looks more like the desktop version.)

We’ll have more on the function problems with the mobile plugin and the Genesis site in the next post, but for now it’s enough to say that the visual difference between the two sites is obvious. Also, of course, you get to run one less plugin.

There are trade-offs with responsive design that might make you consider creating a completely separate stylesheet for smaller screens. For one thing, the on-the-fly resizing of images means that the site eats up just as much bandwidth (those expensive data plans!) as the desktop site would. For another, designing elements to stretch and stack means that you can’t engage in pixel-perfect positioning of your elements. That’s going to make certain really dramatic designs impossible.

In many cases, however, the trade-offs will be worth it, and new responsive themes for WordPress (both free and premium) appear every day.

Video Tutorial: Adding a (Dynamic) Widget

The text widget is one of the worst-named and most overlooked features in WordPress. It’s not just for text, but for images and HTML code or JavaScript. (Advanced text widgets even let you include PHP.) Easily add e-mail sign-up forms, linked images, and anything else to your WordPress sidebar just by pasting the code into a text widget.

This 7-minute video walks you through how to add a text widget containing HTML code to your WordPress site, how to move widgets from one widgetized area to another, and through a quick overview of the options provided with the Dynamic Widgets plugin.

Dynamic Widgets lets you decide which pages, posts, categories, etc. you want to show your widget on–including date ranges, in case it’s a widget showing a special offer. You can customize the look of your sidebar, footer, and other widgetized areas without having to create special template files the way you did in the old days.

Adding a Photo Gallery to a WordPress Post or Page

I have a client who’s on a world tour, and he wanted some help with uploading photo galleries to his blog, which  is using the Coraline theme. Inserting a gallery isn’t quite as intuitive as inserting a photo, so I decided to create some instructions for him. Since I thought they might be useful to more people, I’ve posted them here.

Screenshots of the WordPress dashboard are of the 3.2 beta, not my client’s live site.

Gallery Basics

Inserting one photo at a time when writing a WordPress post is pretty straightforward, but what if you want to add a whole collection of photos? Suppose you’re taking a trip around the world and you’ve set up your blog to chronicle your travels, and in each post you want to include a dozen shots of the city you visited that day?

The good news is that WordPress has gallery features built in, so you don’t even need a plugin to add a basic photo gallery to a post or page.

The bad news is that it requires more steps than adding a single photo. In fact, if you’re not used to WordPress, the latest features to help you display galleries might just make things more confusing for you. (The WordPress development team knows it needs to work on media, but hasn’t had a chance to tackle that yet. Improvements are in the pipeline.)

Meanwhile, WordPress galleries aren’t really that difficult once you get used to them, and there are some great plugins and themes to allow you to add some spectacular effects. Here are the steps to insert a no-frills photo gallery without adding any plugins.

1. Open the edit screen for the post or page where you want to insert the gallery. You can create a new post, or add the gallery to an existing post.

2. Position your cursor where you want the gallery to appear. Moving galleries after you insert them is more trouble than putting them in the right place to start with.

3. Click the Insert Image button at the top left of the post/page editing area, shown in Figure 1.

Figure 1: The four icons at the top of the editing window let you insert images, video, audio, and media, but for self-hosted WordPress installations, there are better ways to add everything but images.

4. Click the From Computer tab to upload the images for your gallery.


Figure 2: This method of creating galleries only works with images you upload from your computer and attach to this post. See the Gallery Shortcodes section for a way to create galleries using other images in your Media Library. The built-in gallery feature in WordPress does not work with images hosted elsewhere on the Web.

5. Select and upload multiple images at once. Click Open when you’ve finished selecting images.


Figure 3: Windows users can select non-consecutive images by holding down the CTRL key while clicking the icons; Mac users can do the same with the CMD key. To select consecutive images, hold down the SHIFT key.

Tip: If you really are traveling around the world, uploading photos from your camera in an Internet café anywhere but Japan or South Korea can be pretty time-consuming. These days, even point-and-shoot cameras boast resolutions of 12 megapixels or more. That’s a 4000 x 3000 pixel image: each JPG file will be 2.5 MB. A set of them will take forever to upload over patchy hotel wi-fi or the satellite connection in that Mexican café.

If you don’t plan to print the photos when you get home, go into your camera settings and set your photo size and quality below the maximum. An image size of 1600 or even 1200 pixels on the longest edge is plenty for a website.

6. After WordPress has finished “crunching” the files, click the Save All Changes button at the bottom of the list of images.


Figure 4: When creating a gallery, it’s important to click “Save all changes” rather than “Insert into post,” even if you upload images one at a time. This command tells WordPress to activate the gallery feature.

For bonus points, after you click “Save all changes”, click “Show” next to each image and fill in each image’s title, alternate text, caption, and description. Then Save all changes again. Giving the images titles that mean something to you helps the search engines find you and it helps screen readers for the visually impaired. And it will help you, too, when you’re going through your media library trying to find a particular photo.


Figure 5: The image title pops up on the screen when you hover your mouse pointer over the image; the ALT text is the description visually impaired people hear. The caption appears below the gallery thumbnail.

7. After you click “Save all changes”, the Gallery tab appears at the top of the Add an Image dialog box. From now on, whenever you click the Add an Image button for that post, you’ll see the Gallery tab between From URL and Media Library.


Figure 6: The Gallery tab only appears in posts that have had galleries inserted. The number in parentheses after the word “Gallery” shows how many images are in the gallery.

8. Choose your Gallery Settings from the options below the list of images in the gallery. This is where you decide what order to put the pictures in and how many columns your gallery should have.

If your gallery is going to appear on a page with a sidebar and you use the standard 150 x 150 pixel thumbnail size, you won’t be able to fit more than three images across. But if you use a full-width page for your galleries, or a smaller thumbnail size, you can have five or six columns of photos.

Note: to change the size of your image thumbnails, go to Settings –> Media. Changing the settings there will affect all new images you upload. To change the sizes of images that are already in your Media Library, install the AJAX Thumbnail Rebuild plugin:

In addition to the built-in options to sort the images by Menu Order, Date/Time, Title, and Random, you can manually order your images by numbering them in the boxes in the Actions column (see Figure 6) and clicking “Save all changes” again.

The final option is whether to link the thumbnails to the original image file or to the attachment page. If you’ve filled in an image description or want people to be able to submit comments on a particular image, then it’s best to link to the attachment page. Lightbox and slideshow plugins tend to override this option, but some will display the descriptions from the attachment page.

9. When you’re happy with your settings, click the Insert gallery button.


Figure 7: This time, click “Insert Gallery” instead of “Save all changes.”

Once you click the button, a gallery placeholder appears in your post editor window. If you’re using the visual editor, the gallery placeholder looks like this:


Figure 8: You can edit your gallery settings by clicking on this placeholder, or delete the gallery entirely. Just select one of the icons that pops up in the top left corner of the placeholder. The mini gallery icon will take you back to the insert gallery options; the red circle with a line through it will delete the gallery.

If you’re using the HTML editor, the gallery placeholder looks like this:


Figure 9: What you’re looking at is called a gallery shortcode. (A “shortcode” is a command in square brackets that substitutes for HTML or PHP.) If you need to move your gallery around in your post, the easiest way is to switch to the HTML editor and cut and paste that shortcode.

10. If your theme supports post formats, toggle the “Gallery” radio button on. That way your gallery can take advantage of any special design features your theme has for galleries.


Figure 10: If you see a box like this with a list of post formats, select the one that says “gallery” to help WordPress display your gallery better. If you don’t see a box like this, then either your theme doesn’t support post formats or you are using an outdated version of WordPress and need to upgrade.

Note: WordPress introduced post formats in 2011 with WordPress 3.1. They’re designed to help display certain kinds of content in special ways, much the way Tumblr does.

Older themes may not support post formats, or may support them in a different way. The Coraline theme from Automattic supports Gallery and Aside post formats, but you have to designate categories in the theme options in order to use them. If you’re inserting a gallery in the Coraline theme, be sure to choose the right category.


Figure 11: To activate the gallery post format in the Coraline theme, you have to assign a category to it. Before you can assign the category, you need to go to Posts –> Categories and create it.


Figure 12: Once you’ve set up the gallery category, remember to select it when creating your post.

If your theme doesn’t support post formats, don’t worry. The gallery itself will display just fine. The main difference will be in the way the post excerpt appears on the blog index page.

11. And now for the last crucial step: publish the post or page.


Figure 13: Click Publish (or Update) to share your gallery with your readers.

Your gallery appears as a grid of neatly arranged thumbnails in the single post display.


Figure 14: Three-column gallery of 150 x 150 pixel thumbnails in the Coraline theme, designed in 2010.

WordPress galleries appear much the same from theme to theme, unless the designer has included special CSS (styling instructions) for galleries. A gallery inserted into a post in Coraline (Figure 14, above) looks much like a gallery inserted into a post in Twenty Eleven (Figure 15, below). Well—except for the fact that the photos have different subjects.


Figure 15: Another three-column gallery of 150 x 150 pixel thumbnail images, this time in the Twenty Eleven theme designed for WordPress 3.2 in—you guessed it—2011.

And, in fact, a WordPress gallery looks just the same in a theme designed long before post formats were even imagined. The basic gallery display has been the same since 2005. Fancying it up has been the job of plugin designers and sometimes theme designers.

Gallery Post Formats Change the Post, Not the Gallery

If WordPress galleries themselves look the same in themes that support the gallery post format and those that don’t, what does the gallery post format actually do?

First, it gives the designer the opportunity to make the rest of the post look different from other kinds of posts—making it a full-width post where a standard post has a sidebar, for instance, or giving it a particular background color.

Second, it changes the way the post appears in the blog index (the home page). The themes used for the screenshots above both show post excerpts in the blog index. For a standard post, the excerpt is just a few lines of unformatted text. That’s not very helpful for a gallery, so a gallery post excerpt is set up to work a little differently. Even when a theme doesn’t show thumbnail images with excerpts of standard posts, gallery posts use thumbnails for excerpts, then tell you how many images are in the gallery.


Figure 16: Coraline puts a box (like the caption box) around the thumbnail image it uses in its post excerpt, and includes a link to “more galleries.”


Figure 17: The Twenty Eleven excerpt has a label above it saying “Gallery.” There’s no box around the thumbnail and no link to other galleries. These differences are style choices made by the theme designers.

If galleries are important to you, check out the way a theme handles the gallery post format in the demo before you decide to use it. Sure, you can hack the theme or install a plugin to change it, but the better it works in the first place, the better off you are.

For the Experts: Gallery Shortcodes

In earlier versions of WordPress, the only way to insert a gallery was with the shortcode


Used by itself (you can type it into either the visual editor or the HTML editor), the “gallery” shortcode will display a gallery of all images attached to that post or page.

But you can do more, because shortcodes come with options. In fact, the “gallery”shortcode comes with more options than you have when you insert a gallery through the file upload screen. The options associated with the “gallery” shortcode are:

  • columns: number of columns in the gallery.
  • id: ID of the post whose images you want to display. It does not have to be the post you’re putting the gallery into. You can find the post ID by hovering over the post title in the All Posts list and looking down into the lower left corner. You’ll see a small popup that says something like

    except there will be a number after the “post=” instead of the word “ID”. That’s the post ID number.

  • size: the image size to use for the thumbnail grid: thumbnail, medium, large, or full. The default is “thumbnail.”
  • orderby: the criterion for ordering images. The choices are menu_order, date, title, ID, and RAND.
  • order: ASC (ascending) or DESC (descending).
  • link: determines whether the thumbnails link to full-size images (file) or attachment pages (attachment).
  • include: tells the gallery to include specific attachment (image) IDs. You find these by going into the WordPress Media Library and hovering over the image title. A popup appears in the lower left corner of the browser, the same way it did to show you the post ID.
  • exclude: tells the gallery to exclude specific attachment (image) IDs. You can use either the “include” or the “exclude” option in one shortcode, but not both.

So if you wanted to insert a gallery that used a single column of large images, ordered by ID, and including attachments 17, 18, 19, 25, 26, 27, 34, 35, 36 (from three different posts), the shortcode would look like this:

[gallery columns="1" size="large" orderby="ID" order="ASC" link="attachment" include="17, 18, 19, 25, 26, 27, 34, 35, 36"]

And then there are the really geeky options that probably won’t be of interest to anyone but theme designers:

  • itemtag: the type of (X)HTML tag used to enclose each item in the gallery. The default is “dl”, which is “definition list.”
  • icontag: the tag used to enclose each thumbnail image. The default is “dt”, or “definition term.”
  • captiontag: the tag used to enclose the caption for each thumbnail. The default is “dd” or “definition definition.”

A designer might want to change these if definition lists are going to be important in the theme, but ordinary people can safely ignore them.

(All this shortcode info comes from the WordPress Codex.)