In this case the top page on the navigation bar was called Galleries, which is the parent page for sub-pages with galleries for wedding photos, wedding videos etc. He didn’t want a main galleries page, but instead he wanted it to be a kind of folder for categorizing the various galleries he was going to have on other pages in his site.

Since we are using wp_list_pages, we can’t unlink each page on an individual basis since the navigation bar is dynamically formed. So I needed some way to keep using wp_list_pages so that the client can control the navigation bar, but unlink the top Galleries page.

I found the answer on what I think is one of the best forums around of internet and computer experts and people who are eager to help one another: Digital Point.

After a few suggestions from people on the forums, I finally got an answer from the awesome bvraghav.

In the header.php section of the file I embeded a javascript code that looked like this:

<script type="text/javascript">
jQuery(function($) {
    $("li.page-item-283").children("a").attr('href', "javascript:void(0)");
});
</script>

This is how it works:

• The  jquery (a javascript framework) is used to replace the value of href property in the required html node ( <a href=”your-galleries-link”>…. </a> in this case) with “javascript:void(0)”.  Looks like this:  jQuery(function($) {

• The following code selects the li element with: $(“li.page-item-283″). In this case 283 the page number that we want to void the link for (in our case the top Galleries page).

• The next part is the  children function which selects all immediate children with tag a: children(“a”) . This relates the child pages to the gallery pages and keeps their links.
  

• After this I had to change the attribute href to “javascript:void(0)”, which looks like this:  .attr(‘href’, “javascript:void(0)”); This turns the gallery link into void so it won’t direct anywhere.
  

All this comes together to look like the code above.

If you want to make all top level links unlinked, use the following code:

<script type="text/javascript">
jQuery(function($) {    
    $("li.page_item").children("a").attr('href', "javascript:void(0)"); });
</script>

What I’m wondering is if the new WordPress navigation system allows users to include items in navigation bars that don’t actually lead anywhere. Anyone know?

When I first started looking for an Open Source CMS solution, I looked at Joomla, WordPress and some other systems. I quickly settled on WordPress for the following reasons:

• The content management scheme made sense to me. Pages, posts, categories. Posts could go in more than one category. It was clean and elegant.
• Community. Almost any questions I had, there was an answer somewhere out there. If I had a need, I could almost always find a plugin to fill it.
• The Codex. I think I can say that The Codex was my WordPress teacher. It’s such an awesome, community-driven resource.
• Comment moderation. Simple and useful.
• Easily upload media, even then.
• RSS feeds galore. For almost anything you can think of: site wide, categories, tags, all comments, per-post comments, authors, search results,
• Template tags. Genius. Even non-developers can wrap their heads around these commands.
• SEO. Out of the box WordPress is pretty good. With classic plugins like Google Sitemap XML and All in One SEO, you can do a pretty good job of optimizing a site for the search engines.
• The future. Every new version of WordPress added useful features. Some of the best were the addition of tags, one-click upgrade of plugins and core, installation of plugins and themes from the admin (bye-bye FTP!), better comment management in the admin with Reply to, Widgets (at first I didn’t like them!).

It seems timely that yesterday I was part of a panel comparing the three leading Open Source content management systems: Joomla, Drupal and WordPress. In my presentation, I emphasized the elegance of WordPress, and explained how the content management works. The tweets during my presentation indicated that people were pretty excited about what WordPress has to offer. Here are some examples:

Here’s the presentation. Click on Menu > View Fullscreen on the player to view in full screen. All images and underlined text are live links. I’d love to hear your feedback!

I’ve been searching for a no-frills, easy to use ad management solution for WordPress for ages, and never managed to find one. First, I tried Google Ad Manager but I needed 20 tutorials and still didn’t have their system down with all their terminology and complexities. Plus, I needed to make it client-friendly by setting up lots of blank ad spots in case the client got ads in the future so I wouldn’t have to continue to be involved by adding code to their theme files. I timed myself, and setting up the Google Ad Manger for a client took at least 8 hours.

Later, we started looking around for an automated advertising solution for our own site, WPGarage. I looked through other sites that were offering ads, and a bunch of them were using the OIO Publisher system. I tried looking for the plugin in the WP Plugin Directory, but to no avail. I then went to the OIO Publisher site and realized it’s a premium plugin for (gasp) $47. But, what choice did I have? Burnt out from Google Ad Manager and the free WordPress ad manager plugins that always manage to be missing some major feature, we decided to try it out.

And here’s what I learned about the OIO Publisher Ad Manager plugin:

Total setup time: 3 hours.
Basic setup involves setting up ad zones for banner, text, sponsored posts, or custom ads through the admin setup panel and then entering the ads for each zone. Then, you take the output code of each ad that they give you and add it to your theme files.

Admin Setup Panel: It took a little while to get used to the admin panel. For example, where are the statistics hiding? I eventually found the stats under Purchases > Banner Ads > Active. Not so intuitive and it would be nice to have a separate stats section that is easier to access.

Automated: I think one of the best things about the plugin is that you can set it up to act as a sales manager, taking orders from advertisers, and processing their orders. You can see it in action on our site. OIO accepts PayPal, Google Checkout, and a bunch of other payment options.

Here’s a screenshot of the Advertise Page on our site:

Recently, one of our clients wanted to change the slug, or permalink, from “about-2″, back to just plain ol’ “about”.  I tried changing the slug from the “quick edit” mode. I tried to Edit the Permalink from the Post Page. No luck, it kept reverting back to about-2.  After doing a few searches, I noticed that others had experienced this problem as well.

The Solution:

So, I finally found this post on the WordPress support forum which suggested I check the Trash folder. Sure enough, I found a page called “About” hanging out in the Trash. Once I permanently deleted the page from the Trash, I was able to save the permalink successfully.

Widgets

Widgets are only helpful up to a certain point since there isn’t a great plugin  for a WYSIWYG visual editor that I’m aware of. The Rich Text Widget and WYSIWYG Text Widget are buggy and aren’t compatible with 2.9.2.  Rich Widget is ok but requires too many clicks and is not so user friendly.

Custom Fields

Custom fields are only helpful up to a certain point – since once again there is no visual editor. Coding in your own add_meta_box to the functions.php to add customized,  user-friendly custom fields takes a fair amount of time and quite a bit of PHP know-how. Also, explaining to clients the concept of custom fields is not a super joy.

So, what is the solution for expanding WordPress CMS functionality?

Content Blocks

I investigated a few CMS content block plugins, and here’s what I have to say:

1. Page.ly MultiEdit Excited to try out a new plugin that would help with editable content, I installed the MultiEdit plugin with instructions here. MultEdit lets you flip between tabs to edit multiple areas of content! So exciting, but no matter what I did, I couldn’t get the content in each tab to save properly. It only saved the content in the last tab called “Right”. Sigh.

2. Multiple Content Blocks This plugin is insanely easy to use. All you have to do is add one snippet of code <?php the_block (‘newarea’); ?> to a page template and voila! you have another WYSIWYG text editor in the admin area. Whatever you enter into this new content area will show up on the page where the snippet is. Amazing. BUT, I couldn’t figure out how to use this code in the sidebar since the sidebar isn’t a page. Sad.

3. Page blocks I followed the instructions for how to use the plugin like a good girl, but I still couldn’t get it to work the way I wanted with additional editors in the editing page area.

4. Custom field template Bring out the champagne peoples! We have a winner! This plugin is the daddy of all custom field plugins. It lets you add whatever customization you want to the custom field and then add code into your template as if it were a regular custom field.

Here’s how to use it.

1. Install and activate the plugin. Obviously.
2. Go to the new tab in the admin area called Custom Field Template.
3. Modify the example they have. Here’s the one that I created:[ContentAreaName]
   type = textarea
   rows = 4
   cols = 40
   tinyMCE = true
   htmlEditor = true
   mediaButton = true
   This means that the custom field I created has a WYSIWYG TinyMCE text editor, an HTML view, and a media button so that the client can upload an image. There are tons more options explained in the settings page.
4. Add this code to wherever you want in your template files:

<?php if(get_post_meta($post->ID, “ContentAreaName”, true)) { ?>
<?php echo get_post_meta($post->ID, “ContentAreaName”, $single = true); ?>
<?php } ?>

or if you want to add it as a shortcode, use [ContentAreaName]

That’s all for now. If you have another content block CMS tip, please share!

CSS3 is also great for rounded corners and shadows, but unfortunately we still need to keep in mind people using all different versions of Internet Explorer.

1. Download SWFir
2. Upload swfir.js and swfir.swf into a folder called swfir into  your theme directory
3. Include the swfIR JavaScript file in the <head> of your document like this:
<script type="text/javascript" src="swfir.js"></script>
4. Add this to footer.php just before the closing body tag<script type=”text/javascript”>
   // swfIR
   window.onload = function() {
   var sir = new swfir();
   sir.specify(“border-radius”, “15″);
   sir.specify(“src”, “<?php bloginfo(’stylesheet_directory’); ?>/swfir/swfir.swf”);
   sir.swap(“.latest-posts-center img”);
   sir.swap(“.latest-posts-center a img”);
   sir.swap(“img.rounded”);
   </script>

   You may choose from any of these parameters:

   • border-radius
   • border-width
   • border-color
   • shadow-offset
   • shadow-angle
   • shadow-alpha
   • shadow-blur
   • shadow-blur-x
   • shadow-blur-y
   • shadow-strength
   • shadow-color
   • shadow-quality
   • shadow-inner
   • shadow-knockout
   • shadow-hide
   • rotate
   • overflow
   • link
   • elasticity
5. Add this in the loop somewhere Note: this is assuming that your images are not organized by month and day under Settings > Miscellaneous – the box is unchecked.
   Also, you can change the width to whatever you want and it will resize automatically

   <?php if ( get_post_meta($post->ID, ’rounded_img’, true) ) {
   $postimg = get_post_meta($post->ID, ’rounded_img’, $single = true);
   if((stristr($postimg,’http’)===FALSE) && (stristr($postimg,’wp-content’)===FALSE)) {
   $postimg = get_bloginfo(’siteurl’).”/wp-content/uploads/”.$postimg;
   } ?>
   <div>
   <a href=”<?php the_permalink(); ?>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”>
   <img src=”<?php echo $postimg; ?>” alt=”" width=”140″  /></a>
   </div>
   <?php } ?>

6. When you create a post, upload an image and copy the Link URL. Create a custom fields key rounded_img and paste the Link URL in the Value Box.
   

I realize that you can just style the sticky post using the sticky-related classes provided by WordPress:

<div <?php post_class(); ?>> and .sticky class

but I needed to have design elements appear in between the sticky post and the rest of the recent posts, and the recent posts needed to have a completely different design than the sticky. Therefore I decided to go with a 2 loop solution. Once we were using two loops, we had to also make sure that sticky post did not repeat itself and appear in the list of recent posts following it.

Nathan Rice provides a lot of useful information about sticky posts but I couldn’t get the code he posted to work properly. So I went on a hunt to figure it out.

How to display a sticky post

The best solution I found for how to display a WordPress sticky post was a comment by Eduardo on Justin Tadlock’s post Get the Latest Sticky Post. He gave the following code:

<?php
$sticky = get_option( ’sticky_posts’ );
query_posts( array( ‘post__in’ => $sticky, ‘caller_get_posts’ => 1, ‘orderby’ => ID, ’showposts’ => 2 ) );
?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<a href=”<?php the_permalink(); ?>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”>
<?php endwhile;?>

<?php endif; ?>

It worked very nicely.

How to exclude sticky posts from a list of recent posts

I then wanted to show a list of 3 recent posts that excluded the post that had been defined as sticky. After many trials and errors with different solutions posted around the web, I finally found one that worked on the WordPress Support Forum.

<?php $sticky = get_option(’sticky_posts’) ;

$post_to_exclude[] = $sticky[0];

$args=array(
‘caller_get_posts’=>1,
’showposts’=>2,
‘post__not_in’=> $post_to_exclude,
);

query_posts($args); ?>

<h2><a href=”<?php the_permalink() ?>”><?php the_title(); ?></a> </h2>

<?php while (have_posts()) : the_post();  ?>

<?php endwhile;?>

So there you have it: a workable way to have a WordPress sticky post with one style, and a list of recent posts excluding the sticky post with a completely different style below the sticky post.

Old Permalink structure: /%author%/%category%/%postname%/

to:

New Permalink structure: /%author%/%category%/%postname%/%post_id%/

so that they would qualify for Google News. Apparently you need at least 3 digits in your URL in order to qualify for Google News.

I wanted to simply change the Permalink structure by going to Settings>Permalinks in WordPress. However, the problem is that Google sees 2 URLs for the same post which could cause Google to penalize you for duplicate content:

Google would see both the old and new Permalink structure for the same content:

For example, Google would see:

(old) http://example.com/Rebecca/News/MyPost/

and

(new) http://example.com/Rebecca/News/MyPost/222

So we need to make sure the old Permalink structure has a 301 redirect to the new Permalink structure.

Thankfully, after trying many plugins, we finally found and successfully implemented this plugin: Permalink Redirect WordPress Plugin

The directions on the site are very old and quite confusing.

Here’s how to use Permalink Redirect WordPress Plugin

1. Download, Install and activate the plugin
2. Go to Settings>Permalinks and copy down your old permalink structure
3. While you’re in Settings>Permalinks, change the Permalink structure to your new permalink structure
4. Go to Settings>Permalink Redirect and where it says “Old Permalink Structures”, paste in your old permalink structure

That’s it.

The site in question is still in Beta, so I can’t give out the link yet. But here’s a snapshot to give you a better idea of what we were going for.

We also used the plugin User Photo to show each author’s thumbnail, which I have come to love and recommend.

Thanks to Mark Kaplun for this great solution:

Open your Sidebar.php file and add the following:

Please note: this code uses the plugin Limit Posts to create excerpts. But you can substitute that snippet with any type of excerpt code.

<?php $authors = get_users_of_blog(); ?>

<?php
$latest_posts = array();
foreach ( $authors as $author ) {
$user = new WP_User( $author->ID );
if ($user->has_cap(‘level_7′))
continue;
$ps = get_posts(‘numberposts=1&post_type=post&author=’ . $author->ID . ‘&cat=-9,-3′);
foreach ($ps as $p) {
$latest_posts[$p->post_date] = $p;
}
}
krsort($latest_posts);
?>
<?php //query_posts(‘author=’ . $author->ID . ‘&showposts=1&cat=-9,-3′); ?>
<?php
$counter =0;
foreach ($latest_posts as $post) {
$counter++;
if ($counter > 4)
break;
setup_postdata($post);
?>

<?php // while (have_posts()) : the_post(); ?>

<li>
<?php userphoto_the_author_thumbnail(); ?>
<span class=”blogauthor”> <?php the_author_posts_link(); ?> </span>
<div class=”blog”>    <a title=”Permanent Link to <?php the_title(); ?>” href=”<?php the_permalink() ?>” rel=”bookmark”><?php the_title(); ?></a></div>
<br />

<?php  the_content_limit(‘55,read more’); ?> <strong><a title=”Permanent Link to <?php the_title(); ?>” href=”<?php the_permalink() ?>”>Read more</a>   </strong>
</li>
<?php } ?>

<?php // }; ?>

The End. Yay code!

Let’s say we have 2 search forms on our site:

1. General Site-Wide Search
2. Recipe Search – searches subcategories of the Recipe Category

The first thing we need to do is tweak the search.php template to use it as a filter that will recognize if a search is coming from the Site-Wide search form or the Recipe Search form.

1. Open Search.php and delete everything.  Add the following code:

<?php
/* Template Name: Search Results */
$search_refer = $_GET["site_section"];
if ($search_refer == ‘recipe’) { load_template(TEMPLATEPATH . ‘/recipe-search.php’); }
elseif ($search_refer == ’site-search’) { load_template(TEMPLATEPATH . ‘/site-search.php’); }; ?>

2. Open Header.php or wherever the General Site-Wide Search Form is located and add this line:

<input type=”hidden” name=”site_section” value=”site-search” />

The Site-Wide Search form will look something like this:

<form method=”get” id=”searchform” action=”<?php bloginfo(‘home’); ?>/”>
<div id=”search”>
<input type=”text” value=” ” onclick=”this.value=”;” name=”s” id=”s” />
<input type=”hidden” name=”site_section” value=”site-search” />
<input name=”" type=”image” src=”<?php bloginfo(’stylesheet_directory’); ?>/styles/<?php echo “$style_path”; ?>/search.gif” value=”Go” />
</div><!–/search –>
</form>

3. Open Recipes.php or wherever your second search is and insert this line:

<input type=”hidden” name=”site_section” value=”recipe” />

You can change the value “recipe” to whatever suits your needs. Just make sure it matches the value in search.php.

The Recipe Search form for your second search will look something like this. In my case, this second search is meant to search the subcategories of the Recipe category.  See my previous post to learn about hacking the search function to search subcategories.

<form method=”get” id=”rsearchform” action=”<?php bloginfo(‘home’); ?>/”>
<div id=”rsearch”>
<input type=”text” value=”Recipe Search… ” onclick=”this.value=”;” name=”s” id=”rs” />
<?php $categories = get_categories(‘child_of=11′);
$catlist = ”;
foreach ($categories as $cat) {
$catlist.= $cat->cat_ID.’,';
}
$catlist.’11′;
?>
<input type=”hidden” name=”cat” value=”<?php echo “$catlist”?>” />
<input type=”hidden” name=”site_section” value=”recipe” />
<input name=”" type=”image” src=”<?php bloginfo(’stylesheet_directory’); ?>/styles/<?php echo “$style_path”; ?>/search.gif” value=”Go” />
</div><!–/search –>
</form>

4. Customize the Search Results Templates

If you recall, in step 1, we added the following to the search.php page.

if ($search_refer == ‘recipe’) { load_template(TEMPLATEPATH . ‘/recipe-search.php’); }
elseif ($search_refer == ’site-search’) { load_template(TEMPLATEPATH . ‘/site-search.php’); }; ?>

Create recipe-search.php (or whatever you named this template) and customize the layout of the results page to your liking. You can use index.php to start with and customize from there.

Create site-search.php (or whatever you named this template) and customize the layout of the results page to your liking. You can use index.php to start with and customize from there.