Mac OS X Book Excerpt Online

Posted on August 28, 2006 by Maria Langer

Book sample chapter now online.

Informit.com puts another chapter on its site.

I just stopped by the Informit.com Web site to check their listings for my work. (They list all of my in print books for Peachpit Press, as well as articles I’ve written for them and excerpts from my books.) I found that they’d put another excerpt from my Mac OS X 10.4 book on their site: “File Management in Mac OS X 1.4 Tiger.”

If you don’t have the book and want to check out this sample chapter, please do. Frankly, I think it’s easier to read in the book, without the links and tiny pictures. Maybe this excerpt will convince you to buy a copy; if so, you can get it at a discount by clicking a link on their site.

Listing Recent WordPress Posts

Posted on August 23, 2006 by Maria Langer

Two ways to get the job done.

One of the features I included in my personal WordPress-based site (www.aneclecticmind.com) is a listing of the 20 most recent posts. You can find this list in the sidebar of the Home page.

I created this list with the following code in the sidebar.php template file:

<?php wp_get_archives('type=postbypost&limit=20'); ?>

The type parameter tells WordPress to show individual posts. The limit parameter tells WordPress how many posts to display. You can set this number to anything you like.

I wanted to include this same feature on wickenburg-az.com, a site I maintain with information about the town I live in, Wickenburg, AZ. Unfortunately, that site makes full use of the Event Calendar plugin to display a list of upcoming events in the sidebar. Although the plugin is configured so events to not display on the Home page, it’s impossible to prevent recent event titles from being included when using the wp_get_archives tag — there’s no exclude parameter. And since clicking one of those titles would display a very boring two-line description of the event, I didn’t want those titles included in the list of recent posts.

What’s the solution? Well, I already had the Customizable Post Listings plugin installed on wickenburg-az.com. This plugin offers flexible ways to list posts in the sidebar. All I had to do was figure out the parameters to include all categories except the one set aside for Event Calendar.

I fiddled around with it a bit and came up with this:

<?php c2c_get_recent_posts (15,"<li>%post_URL%</li>",'1 2 3 4 5 6 7 8 9 10 12 13 14 15 16 17 18 19 20 21 22 23 24','date','DESC'); ?>

The numbers in the code is a space-separated list of all the categories I wanted to include. I was lazy and just listed all category numbers between the first value (1) and the last (24) even though other values in between are skipped in my category list. Notice that 11 is missing. That’s the category number for the Upcoming Events category used by Event Calendar.

The result was the list I wanted. You can see it in the sidebar of the Home page at wickenburg-az.com.

WordPress as a CMS, Part 7

Posted on August 21, 2006 by Maria Langer

Creating a Title-less Home Page

Articles in this Series:
• Part 1: I Discover that WordPress Makes an Excellent Content Management System
• Part 2: Finding and Modifying Just the Right Theme
• Part 3: Planning the Site’s Organization and Creating the Pages
• Part 4: Adding Category-Specific Post Links to the Sidebar
• Part 5: Adding Random Images
• Part 6: Adding Print and E-Mail Features
• 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:

<strong><?php if (is_home()) { ?><?php } else { ?></strong><h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a> <?php edit_post_link('<img src="'.get_bloginfo(template_directory).'/images/pencil.png" alt="Edit Link" />','<span class="editlink">','</span>'); ?></h2><strong><?php } ?></strong>

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

Posted on August 14, 2006 by Maria Langer

Comment

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.

Next, 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 Form Now 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!

WWDC Keynote

Posted on August 9, 2006 by Maria Langer

Comment

Keep up to date with what’s coming up.

Have you seen Steve Jobs’ WWDC keynote address? If not, follow this link: Apple – QuickTime – WWDC 2006

WordPress as a CMS, Part 5

Posted on August 7, 2006 by Maria Langer

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:

<img src="<?php echo c2c_random_file('/wp-content/images/helicopterinflight/'); ?>" class="right" alt="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:

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

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!

Maria's Guides

Support and additional material related to how-to guides by Maria Langer.

Monthly Archives: August 2006