ClockInfo.com

I am creating a web site for my church, Flora First Christian Church, and am using WordPress as a CMS (Content Management System). WordPress’s excellent administration interface will make it straightforward for church members to update the content on an ongoing basis.

Here are some things I am doing to make the web site appear less “bloggy” and more like a real web site:

Remove links on the home page that link to itself. It is described in this post.

Remove links to the current page on posts pages (a page should not link to itself).

Remove any mention of “comments” on posts unless comments are open for that topic. Here is an example from single.php:

<?php if (comments_open()) {
comments_template();
} ?>

Use the plugin My Category Order to display the categories and subcategories in the desired order:

In the sidebar I am intermixing pages and categories, as suggested by Lorelle on Wordpress.

Here is a sample from my sidebar.php:

<h2 class=”title”>Categories</h2>
<ul>
<?php
wp_list_pages(’include=6&title_li=’);
wp_list_categories(’orderby=order&hierarchical=1&title_li=’); wp_list_pages(’sort_column=menu_order&include=13,14&title_li=’); ?>
</ul>

This puts page 6 first, followed by the categories as sequenced by the My Category Order plugin, followed by pages 13 and 14 (the numbers are the page’s ID).

My next challenge was harder: Do not display a link to the “Page” that you are currently on. (For example, when you are on the “About” page, do not display a link to the “About” page (”About” may still be in the menu, but in a different color and not as a link).

For the menu of pages across the top of the header, it was easy to remove the link to the current page. The menu link for the current page has a css style of current_page_item. Therefore all that is needed is to add the following lines to style.css:

#header .current_page_item {
display: none;
}

For my sidebar menus of pages and categories, I created a plugin that filters out the link to the current page. It keeps the menu item for the current page, without a link. You may see the code here.

Other plugins I am using:

WP-Sticky: To select a post to always be the first post in a category. I was having a problem with this, only the announcement posts were showing up in my RSS feed. To make the RSS feed be correct, the wp-sticky option “Categories Only” must be set to “Yes”.

Search-pages: Allows pages as well as posts to be included in search ressults

NextGen Gallery: Photo gallery system that includes slideshows. I looked for days at creating slideshows, and finally found this wonderful plugin. Caveat: the slideshow sends full size images over the internet, and the client needs to reduce the images to the display size. This was causing HUGE bandwidth reqirements and slow loading times for viewers, so I had to scale the images before uploading them. This is not a good solution if you want to have a gallery view of the slideshow images.

Different Posts Per Page: Allows different number of posts per page in different categories.

My Category Order: Allows you to set display order of post categories. Note: When upgrading wordPress to a new version, remember to put the provided taxonomy.php file in the wp-includes folder. (Version 2-3-2 of this plugin has a problem in the administration interface - subcategories cannot be ordered)

Bread Crumb Navigation XT: Breadcrumb navigation system.

Filosofo Hide Email Addresses: Hides email addresses within posts and pages from spambots, using JavaScript.

WP-PageNavi: Adds more advanced paging navigation your WordPress blog or web site. I modified it slightly to put the current page number above the previous - next navigation links and to center the navigation links.

Google XML Sitemaps: To generate Google (and other) sitemaps.

Note: Breadcrumb Navigation XT: Dreamweaver MX could not upload the file breadcrumb-navigation-xt-admin.php because the name is too long! I renamed it, uploaded it, and then logged in to the server by SSH to rename the file to the proper name.

Caching

To have images be cached by the user’s browser for a month, yet allow the text to be updated often, I put the following in the .htaccess file:

ExpiresActive On
### Expire everything 1 hour from when accessed
ExpiresDefault “access plus 1 hour”
### Expire style sheet after 1 week
ExpiresByType text/css “access plus 1 week”
### Expire images after one month
ExpiresByType image/jpeg “access plus 1 month”
ExpiresByType image/png “access plus 1 month”
ExpiresByType image/gif “access plus 1 month”
### Expire Javascript after 1 week
ExpiresByType application/x-javascript “access plus 1 week”

The code given previously for a Flickr embedded slideshow does not work in Explorer 6 or 7. Use the following code instead:

<pre><iframe src=”http://www.flickr.com/slideShow/index.gne?user_id=uid&set_id=sid&text=” align=”middle” frameborder=”0″ height=”480″ scrolling=”no” width=”520″></iframe></pre>

where uid is your Flickr user id number and sid is the id number of the set of photos you wish to display.

Thanks to this source for this information.

A Picassa slideshow can be embedded in a WordPress blog with no problems. The visual editor seems to work fine. All I did was to take the slideshow code provided by Picasa and insert it into the post using the code view.

This is a test:

Use the following code:

<pre><object type=”text/html” data=”http://www.flickr.com/slideShow/index.gne?user_id=uid@N03&set_id=sid” height=”500″ width=”500″> </object></pre>

where uid is your Flickr user id number and sid is the id number of the set of photos you wish to display. Using the <pre> and </pre> tags prevents WordPress from re-writing your code, as suggested in this post.

Thanks to the following resources:

Flickr vs. Picasa web albums

Embedding a Flickr slideshow

Finding your Flickr user id

Flickr image uploader for iPhoto

Note: there may still be problems with this method. I tried to add a second slide show to this post, and now WordPress’s visual editor is messing up. The visual editor dies if you switch from visual to code view and then back to visual. But you can then “Save” or “Save and Continue Editing” and then edit the post again.

This embedded YouTube player has a playlist of some of my favorite recordings of this song.

Here is how to embed a YouTube video in your WordPress blog or website. Copy the embed code for the video from the YouTube page. Switch to the “Code” mode of the WordPress editor and paste in the You Tube code. Then (and this is the trick that was so elusive) put an HTML <pre> tag before the YouTube code and put a </pre> after the YouTube code. The <pre> and </pre> tags keep WordPress from messing up the code. (Note: this may also work for embedding Flickr slideshows, but I have not tried it yet.)

Here is a sample video, I love this song and it is appropriate to the season (Mary Did You Know, performed by Mark Lowry):

Thanks to this post for the idea of using the <pre> and </pre> tags.

Previously suggested solutions to posting YouTube videos include:

• Turning off the visual editor when editing a post containing a video. This works, but is cumbersome. It is described several places, including this post.
• Using a code of the following type: [youtube=http://www.youtube.com/watch?v=P0WIJw8JVeU]. This did not work for me. It is described in this post.

One of the fundamental usability guidelines is: never have a link that points to the current page - this confuses the user. (See Jakob Neilsen’s The Ten Most Violated Homepage Design Guidelines, guideline no. 10.) The WordPress blogs and websites that I have seen (including this blog!) violate this guideline in several ways. It would be nice if a future version of WordPress would give these functions an option to not link to the current page or category. In the meantime, I have written a plugin that strips the link to the current page. It is used on the web site for my church which is under development.

Here is the code for the plugin, I named the file rm_cur_menu_link.php. It is installed in the wp-content/plugins directory, then it may be activated in the plugin administration screen. This plugin will rermove self links in menus that are generated by the wp_list_pages() and wp_list_categories() functions.

<?php
/*
Plugin Name: Remove Current Menu Link
Plugin URI: Does not exist yet
Description: Removes link to the current item from a menu generated by wp_list_pages and wp_list_categories. This makes a Wordpress website or blog comply with the usability guidelines that a web page should not have a link to itself.
Version: 1.0
Author: Bill Stoddard
Author URI: http://clockinfo.com/
*/

/* Copyright 2007 Bill Stoddard (email : bill@billsclockworks.com)

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
*/

/**************************************

Hooks and configuration

***************************************/
add_filter(’wp_list_pages’,'list_pages_filter’);
add_action(’wp_list_categories’, ‘list_categories_filter’);

function list_pages_filter($content) {
/* for some reason it would not work with [:blank:]* after the m in current_page_item */
return eregi_replace(’(current_page_item “><a [^<]*href=[”|\’]?([^ “\’]*)[”|\’]?[^>]*>([^<]*)</a>)’,'current_page_item”>\\3′, $content);
}

function list_categories_filter($content) {
return eregi_replace(’(current-cat[:blank:]*”><a [^<]*href=[”|\’]?([^ “\’]*)[”|\’]?[^>]*>([^<]*)</a>)’,'”>\\3′, $content);
}

?>

I still consider this plugin to be experimental, although it works fine in my application (WordPress version 2.3.1), so I have not released it as a downloadable plugin yet. You can see it in action on the Flora First Christian Church website.

I thank silisoftware.com and xce.de for their helpful comments on the eregi_replace manual page.