WordPress as a CMS: Table of Contents

Making it a bit easier to find the articles.

I decided to put together a quick table of contents for my 7-part series about using WordPress as a CMS. This should make it a bit easier for readers to find and read the related articles in the order in which they were written.

Heres the list:

I refer to this series in quite a few other pieces here.

How to Advertise Special Offers with your WordPress Blog

A surprisingly simple solution.

If you operate a blog-based Web site — or even a Web site that includes a separate blog — there’s a good chance that you can use the built-in category and RSS feed features to distribute special offers to site visitors by e-mail.

I set this up on my WordPress-based Flying M Air Web site the other day and it works like a charm. Let me explain how.

The Goal

Before I explain how to set this up, let me take a few moments to explain why you might want to do it. The best way to do that is to explain what my goal was.

Flying M Air offers helicopter tours, charters, and excursions throughout Arizona. Some of our flights begin and end in Phoenix, which is about 1/2 hour from our base in Wickenburg. The folks who buy Phoenix-based tours and charters cover the cost of our flight to the starting point, but with a penalty to our profit margin.

My idea was to “piggyback” other tours out of Phoenix on existing tours. So, for example, if I knew I had a flight at 1 PM, I could offer similar flights out of Phoenix in 12 noon and 2 pm time slots. These piggybacked tours would be offered at a discount to encourage customers to sign up. This would enable me to serve multiple Phoenix-based customers with one round-trip to the Phoenix area, thus maximizing my revenue for the trip.

What I wanted to do to get the word out was to publish the special offers on the Web site and automatically e-mail these offers to potential customers who were interested in receiving offers. I’m not talking about spam here. I’m talking about a mailing list that people voluntarily subscribe to and could unsubscribe from at any time. Something I wouldn’t have to manually manage. (God knows I have enough work to do.)

How I Did It

Flying M Air's siteI started by creating a “Be Spontaneous!” category on my Flying M Air site. The purpose of the category is to publicize “last-minute” special offers for specific dates and time slots. Because not everyone would know what “Be Spontaneous!” means, I also added a link to the category on the top navigation bar, with a more obvious label: “Special Offers.”

I then created post-dated entries with the special offers I wanted to advertise. Only one offer would appear at a time. I’d have to manually delete the offers after the date (or perhaps leave them there so visitors could see the kinds of offers they missed).

Next, I went to FeedBurner and set up a feed for the special offers. While there, I set up the E-mail Notification feature. You can learn how to do that in my Informit.com article, “Add Email Notification to Your Blog with FeedBurner.”

Finally, I added a subscription form to the sidebar of the site. I also got fancy and added an introduction to the Be Spontaneous! category that explained what it was all about and offered a subscription link.

Mission accomplished. (Really, though.)

Give It a Try

This is how I did this with WordPress, but you can just as easily do it with other blogging software. (Just don’t ask me which ones or how to do it. I’m a WordPress user.) The key ingredients are the separate special offers category and the FeedBurner e-mail subscription feature.

One word of advice: if you’re going to go through the bother of doing this, make sure your special offers really ARE special. Don’t turn this into spam. Not only will you annoy and alienate your subscribers, but you’ll give them the idea that subscribing to Web content always leads to spam.

And that’ll ruin it for the rest of us.

WordPress as a CMS, Part 7

Creating a Title-less Home Page

If you’re just tuning in, this is the seventh installment of my series of articles about using WordPress as a CMS to build an informational Web site. Throughout this series, I’m talking about a specific site I developed: Flying M Air, a helicopter tour and charter company I operate when I’m not writing and tweaking my Web sites.

I decided early on that I wanted my site to have a static home page that provided basic information about my company. Visitors could then use the links along the top of the page to view more information in other static pages or the links in the right column to learn more about specific tours and other services.

The Andreas theme I’d modified included page links along the top of the page. As I mentioned in Part 3 of this series, I created the pages and used the Page Order option to assign numbers to the pages that would determine their order. The theme automatically listed the pages by name as a row of buttons at the bottom of the header, using the following code:

< ?php wp_list_pages('sort_column=menu_order&title_li='); ?>

Remember, the CSS code in style.css is what determines the appearance of the links on the site.

I created a home page, gave it a title of Home, and assigned a Page Order value of 0. That put it at the beginning of the list, right where a Home page button should appear. My Home page included random images (covered in Part 5 of this series) and text with links.

Now I needed to make that page be the page that appeared automatically when someone went to the default page of the root directory — in other words, www.flyingmair.com. I used the Static Front Page plugin by Denis de Barnardy. Miraz covered this plugin in our WordPress book, so I don’t want to go into a lot of detail about it here. I simply installed and activated the plugin, then confirmed that the Post Slug for the Home page was home. My Home page was the static Home page.

This may have satisfied a lot of people, but not me. The problem was, the page title (Home) appeared at the top of the Home page. I didn’t want it to appear at all. So I had one more thing to do.

Like all other Pages on a WordPress-based site, my Home page was displayed with the page.php file. I opened the file and inserted some conditional code (shown in bold type) around the instruction to display the title near the beginning of The Loop:

< ?php if (is_home()) { ?>< ?php } else { ?>

< ?php the_title(); ?> < ?php edit_post_link('Edit Link','',''); ?>

< ?php } ?>

Here’s how it works.

  • < ?php if (is_home()) { ?> says that if this is the home Page, display what comes next. But that’s followed immediately by < ?php } else { ?>, so nothing is displayed.
  • < ?php } else { ?> says that if this is any other Page, display what comes next. That’s the title as a H2 heading and link, as well as the icon I’m using for displaying an Edit link.
  • < ?php } ?> says to stop acting on the is_home conditional statement; the rest of the content should appear for all Pages.

The result: for any Page except the Home Page, the Page title appears at the top of the page.

I think that just about covers all of the special features I included in Flying M Air’s new WordPress-based Web site. Did I leave something out? Use the Comments link if you think there’s another topic I could cover in this series. Otherwise, I’ll call it quits for now.

But don’t worry; there are plenty of other WordPress-related tips and topics I can share. Keep checking in for more.

And now, can I interest anyone in a helicopter tour?

WordPress as a CMS, Part 6

Adding Print and E-Mail Features

If you’re just tuning in, this is the sixth installment of my series of articles about using WordPress as a CMS to build an informational Web site. Throughout this series, I’m talking about a specific site I developed: Flying M Air, a helicopter tour and charter company I operate when I’m not writing and tweaking my Web sites.

Because Flying M Air’s Web site was designed to be a sort of “online brochure” for my company’s services, I wanted the site’s visitors to be able to print information right from the site’s pages. Unfortunately, printing a WordPress blog page doesn’t seem to come out as pretty as it does on the site. Try it for yourself and see.

Although I could create PDF brochures for every tour and charter, it would be a royal pain in the you-know-what to recreate these documents every time I had a price change. To make matters worse, there was no way to force visitors to download the nicely formatted brochures instead of simply using their browser’s Print command to print what they saw in the browser window.

Clearly, I needed a better solution.

As usual, a plugin already existed to do the job: WP-Print by GaMerZ (AKA, Lester Chan). This plugin enables you to include a Print link or icon within The Loop for each post. When a user clicks the link or icon, the plugin generates a printer friendly page.

WP-Print is pretty easy to use. Just drop the plugin’s print folder into your plugins folder, go into the Plugins Management Administration Panel, and activate the WP-Print plugin.

Print OptionsNext, configure the plugin in the Print Options administration panel (Options > Print). You use the drop-down lists to indicate whether you want the user to be able to print comments, links, and/or images. I turned off images because they looked ugly with the yellow border around them. Click Update Options. You’re almost done.

Open the template file that includes The Loop and insert the following code where you want the Print link to appear:

< ?php if(function_exists('wp_print')) { print_link(); } ?>

If you prefer a print icon like I have, no problem. Use this code instead:

< ?php if(function_exists('wp_print')) { print_link_image(); } ?>

A word here about the Print icon that comes with WP-Print. It assumes you have a white background. I don’t. So I had to create my own little print icon. (I did the same for the e-mail icon, which I discuss later.) If you have to go this route, make it roughly the same size and give it the same name as the Print icon that comes with WP-Print and stick it in plugins/print/images/ to replace the existing icon.

If your theme uses The Loop in more than one place, you need to insert this code wherever you want the Print link or button to appear. For example, in my theme (Andreas), I had to insert it in index.php, archive.php, and single.php. I could have stuck it in page.php, too, but I didn’t need to, for reasons I’ll discuss in another installment of this series. In my aneclecticmind.com site, which uses the Exquisite theme, I just had to stick it in the post.php file, which is called by all other files that need to display posts. A much nicer solution, if you ask me.

While I was adding plugins and code, I figured I may as well add an e-mail feature. GaMerZ has one of those, too: WP-Email. This plugin enables you to put an E-mail link or button in The Loop for each post. Clicking the link or button displays a form the visitor can use to e-mail the post’s contents to someone else — or himself.

As you might expect, the plugin installs the same way. Put the email folder in the plugins folder and activate the plugin in the Plugin Management administration panel.

Configure the plugin in the E-Mail Options window (E-mail > E-Mail Options). I won’t show them here because they’re too big to display on this page, but they’re pretty self-explanitory. You can get more information in the documentation. Just make sure you select PHP for the Method Used To Send E-Mail if you’re not using an SMTP server.

Of course, when I installed it, I skipped the configuration step, which caused me to do a whole bunch of other work…more on that in a moment.

Now open the template file that includes The Loop and insert the following code where you want the E-mail link to appear:

< ?php if(function_exists('wp-email')) { e-mail_link(); } ?>

If you prefer a e-mail icon like I have, no problem. Use this code instead:

< ?php if(function_exists('wp-email')) { email_link_image(); } ?>

Remember, I modified the e-mail icon so it would have that silly yellow background that appears on my site.

E-Mail FormNow here’s where I screwed up — and only because I didn’t follow the instructions. I went onto the site and clicked the E-mail button for a post. A form like the one shown here appeared. The only problem was, there was no image in the Image Verification area. Why? Because the version of PHP I was using didn’t support captcha.

If I’d followed the instructions, I would have seen that that feature could be disabled. But I didn’t see the configuration options at all. So I did things the hard way. I upgraded PHP. And let me tell you, it was a scary thing to do. I actually lost all my blogs for about 10 minutes. Then I figured out how to get them back and everything is working fine. As an added bonus, I can now use the captcha feature in Spam Karma, which has cut my comment moderation work down to zilch.

Of course, I soon realized that I could only send one message every few minutes, which made testing tough. I found the configuration options and after slapping myself on the side of the head, adjusted the settings to give the new feature a good testing.

The moral of this story is RTFM — read the FABULOUS manual. (Gotta keep this site PG rated.)

While I’m discussing The Loop (kind of), I want to mention that I disabled the display of comments (and even comments links) in the Loop. I did this by commenting out the php comments_popup_link tag. I could have deleted it, but I was worried that I might need it someday and not be able to enter it back correctly. I already disabled comments and trackbacks in all posts and pages by setting defaults (as we discuss in our WordPress book).

Why did I do this? Remember, this blog is being used as a CMS. Although I could have left posts open for comments, I didn’t want to deal with Comment spam or have site visitors ask questions using the Comments feature. Visitors on the site are able to contact me using a contact form — that’s something we cover in our book so I won’t be discussing it in detail in this series.

In the next installment of this series, I’ll tell you about the site’s static Home page and the trick I used to get it to appear without a heading. Tune in next week!

WordPress as a CMS, Part 5

Adding random images.

If you’re just tuning in, this is the fifth installment of my series of articles about using WordPress as a CMS to build an informational Web site. Throughout this series, I’m talking about a specific site I developed: Flying M Air, a helicopter tour and charter company I operate when I’m not writing and tweaking my Web sites.

I didn’t expect my site to have a lot of pages, but I did have a lot of pictures I wanted to show. One of the things I learned long ago is that every Web page needs a good mix of text and images. Not too much of either one. But rather than pick and choose a limited number of photos to illustrate my aircraft and destinations, I decided to use a more complex solution: set up the site so images would appear randomly on the pages in predetermined places.

I searched for a plugin that would help me do the job. The first one I found was the Random Image Plugin. This plugin randomly selects an image attached to a post using WordPress’s built-in upload feature and displays that image. This is not what I wanted to do.

I then found the Random File plugin by Scott Reilly. This plugin enables you to place a random file from within a specific folder in a theme’s template file or, with the help of a plugin like Exec-PHP, within a post or page itself. That’s exactly what I wanted to do.

I created the images in two basic sizes: small, for the left sidebar, and medium, for within posts and pages. The small images already existed in a predefined size in my old Web site on its sidebar. All I had to do was modify them to use them in the new site.

Come Fly with Me!The modifications weren’t difficult, but required some use of Photoshop. Since my brochure used a snapshot-like image format, with a white photo border and drop shadow, presented on a 3° angle (in either direction) I wanted the same format on my site. The angle and drop shadow required that the entire image be placed on a background the same color as my site’s page background: yellow. You can see an example here.

I created a few Photoshop actions that automated the lengthy process of resizing the image (for medium images), placing them on a background, creating the drop shadow, and tilting the whole thing one way or the other. I did this with all the images I wanted to use and saved them as JPEGs in topical folders on my Web server, within an images folder in the wp-content folder. For example, one folder had images of the helicopter in flight, another had the interior, another had destinations for day trips. You get the idea.

I installed and activated the plugin. It’s very straightforward, with only one file to upload to the server and no configuration required.

I also installed and activated the Exec-PHP plugin. We discuss this plugin in our WordPress book, so I won’t go into detail about it here.

Now I was ready to add the random images. For each page of content, I decided where I wanted the image to go and what kind of image I wanted to display. For example, on the Home Page I wanted to display a photo of the helicopter in flight. I had a folder with a few of those images in there, so all I had to do was insert the code that would display a random image from that folder:

Flying M Air's Helicopter in Flight

Keep in mind that I put this code in the body of the Page — not in the template file used to display the page. That’s why I needed Exec-PHP. You can’t include PHP in a post or Page without something like Exec-PHP to help out. (There are other plugins that do the same thing, but this happens to be the one I chose. With luck a reader of this article will point out some alternatives.)

Note the class="right" component of the tag. This uses CSS to position the image. For this to work, you must have right defined in your style.css file. This was predefined in the version of Andreas I used to base my site on, so I was all set. Otherwise, I could have done it the old fashioned way, with code like class="right" align="right" hspace="5". But the CSS approach is better, as Miraz could explain better than I could.

I did this throughout the Pages and posts on my site, wherever I wanted a random image. If I wanted the same image to appear every time in a specific spot, I just used a plain old img link to specify the image I wanted to appear.

Getting the smaller images in the sidebar was a bit tricker, but the Random Image plugin’s excellent documentation gave me the information I needed. The goal was to display a bunch of random images. If I just used the same code several times in a row, there was a chance that an image would be repeated in the column. I didn’t want that. So I used this code in the leftsidebar.php file:

< ?php $files = array(); for ($i=1;$i<=7;$i++) {
$file = c2c_random_file('/wp-content/themes/andreas/images/small/', 'jpg png gif', 'url', $files);
echo 'Random image #' . $i . '';
$files[] = $file;
}
?>

There are two configuration options to note here:

  • The number 7 in the code is the number of images to display. I keep playing with this number, so it might show a different number of images if you visit the site. My goal was to have the column of images approximately the same length as the navigation sidebar so they’d balance out the page.
  • The path to the folder of images to display tells Random Image where to find the images. In this case, I put the images in a folder in the theme folder. But I could have put them anywhere, including in the images folder with my other images.

To make this work in the sidebar, it’s important that all the images are the same size. Otherwise it’ll look weird. Of course, you might want it to look weird. I didn’t.

In the next installment of this series, I’ll tell you about the Print and E-mail features I added to help site visitors share information with others. See you next week!