WPGarage.com

WordPress as CMS: 4 content block plugins with WYSIWYG editors

We are constantly trying to find easier and better ways to create manageable blocks of content for clients.

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!

Posted in WordPress as CMS | Tags: CMS, content blocks, custom fields, wordpress | 5 Comments »

Add SWFir to WordPress for nice rounded corners, shadows and other effects

While collaborating with our colleagues at Red Door on a project, we came across SWFir,  an amazing way to add some nice subtle effects to WordPress site images. SWFir automatically adds a flash layer on top of images that can round the corners, add a shadow, rotate, or add a border.  I found the directions on their site a little skimpy for WordPress users so I thought I’d share how to integrate SWFir for WordPress users.

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.
   

Posted in Design | Tags: Flash, image replacement, javascript, rounded corners, shadow, swfir, wordpress | No Comments »

Display sticky post and exclude it from recent posts list in WordPress

We were working on a WordPress site that needed to display a sticky post at the top of the blog page with one style, and then below it a list of the most recent posts with a completely different style.

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.

Posted in Code Snippets | Tags: exclude, recent posts, sticky posts, wordpress | 2 Comments »

How to Change Permalink Structure in WordPress without Duplicate Content

Recently we had a client who wanted to change their Permalink structure from

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.

Posted in Plugins | Tags: duplicate content, Google News, permalinks, Redirect, wordpress | 9 Comments »

How to list the 4 latest posts with only one post per author in WordPress

Recently, one site we were working on needed a sidebar that would show the 4 most recent posts on the site. But here’s the catch: they wanted only one post per author. And, each author had to have the role of “author” as opposed to contributor or admin.

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!

Posted in Code Snippets | Tags: author, list, recent posts, sidebar, thumbnails, wordpress | 4 Comments »

How to Customize Multiple Search Result Pages in Wordpress

In the previous post, we discussed how to hack the search function in Wordpress to have an additional search form that would search  subcategories. Now that you have 2 or more search forms on your site, you might need to customize the search results. Thanks to this solution, I learned how to create multiple search result pages.

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.

Posted in Code Snippets, WordPress as CMS | Tags: customize, multiple, Pages, results, search, wordpress | 1 Comment »

New WordPress mailing list for asking and answering WordPress development questions

Where can you go if you have questions about developing and managing a WordPress site? Well, we all know about the WordPress Forums, which can be a useful resource for getting experts and WordPress staff to answer your questions.

However, not everybody is a fan of the forum format – including me. You have to remember to check back (yes, I know there are RSS feeds, but I don’t even go into my RSS reader on a daily basis anymore), and only people who keep an eye on new topics see your questions.

My experience is that mailing lists work great since everybody on the list sees the emails, and good conversations can ensue. Also, users are encouraged to answer questions because it gives them the opportunity to showcase their expertise.

Apparently, there are quite a lot of people who prefer mailing lists, and over the last year or so the WP-Pro mailing list has been getting quite a lot of posts about how to do certain things with WordPress. That would be great if the purpose of the list was for community support – but it’s not! The WP-Pro list is for people who are searching for WordPress service providers to work with, i.e. if you want to pay someone to fix/build/advise your WordPress project, that’s the place to go. If you want to know what the best WordPress SEO plugin is…well, the only place to turn to was the forum.

WP Garage Mailing List – An Online/Email WordPress Community

Not any more! I have set up a mailing list/email group called WP Garage (well, I couldn’t think of another name!), for just these types of questions – if you are looking for plugins, code hacks, tips or just plain ol’ WordPress advice, this new list is for you! The goal is to provide an open and accepting place for WordPress users of all levels to ask and answer WordPress related questions. In the beginning, I will be moderating the posts to make sure no garbage gets through, but if I see that things are pretty clean I’ll ease up on the moderation.

So please come join us, either by clicking on this link or by entering your email address in the field below:

Subscribe to WP Garage Mailing List

Posted in Tips | Tags: community, wordpress | 4 Comments »

How to Hack the Wordpress Search Function: Search Categories and Child Categories

Recently, we had a client who wanted a special recipe search. There were 2 ways to extend the search functionality – manually or dynamically.

1. Search One or More Categories Manually

If we want to search one category, we could have used this solution which lets you manually add category numbers to the search function:

[Replace value="5" with your category number.]

<form method=”get” id=”searchform” action=”<?php bloginfo(‘home’); ?>/”>
<div>
<input type=”text” value=”<?php echo wp_specialchars($s, 1); ?>” name=”s” id=”s” />
<input type=”hidden” name=”cat” value=”5″ />
<input type=”submit” id=”searchsubmit” value=”Search” />
</div>
</form>

2. Search Subcategories Dynamically

However, we wanted to dynamically search only the subcategories of the Recipe Category. The reason being that if you’re already in the Recipes section of the site, seeing a recipe labeled as Recipes is not helpful. However, seeing a recipe labeled as Dessert (mmm..) and Breakfast is helpful. So, each recipe that the client adds will be in a subcategory of recipes (ex. Dessert), but they won’t have to check off the checkbox next to the Recipes category itself.

Anyway, I’ve been looking for this solution for a long time and now, thanks to Ilan Cohen, I present it to you.

[Replace the number 5 with the parent category.]

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

The code searches through all the child categories of Category 5 (Recipes). Then, you’ll see we added an additional “5″ in this line: $catlist.’5′; just in case the client puts a recipe in the Recipes category, and not one of its subcategories.

Posted in Code Snippets, WordPress as CMS | Tags: category, child category, dynamic, function, parent category, search, subcategory, wordpress | 4 Comments »

How to create a Simple Directory in Wordpress using Grandparent, Parent, and Child Pages

I wanted to create a simple directory of non-profit organizations. To do so,  I wanted to use pages for the directory, rather than posts so that I could separate the static directory listings from the dynamic blog posts. I didn’t want to have to exclude tons of categories from feedburner and the main loop.

So, I started exploring the whole family in Wordpress – grandparents, parents, and children. Translation for those not yet used to seeing Wordpress analagous to the family in My Big Fat Greek Wedding: Pages, sub-pages, and sub-sub pages

Simple Directory Setup

• Directory Page (grandparent): Displays list of Non-Profit Organization Categories (ex. social, environment, health, etc.)
• Category Page (parent): Show title and excerpt of each Organization within a category (ex. Environment Organizations)
• Single Organization Page (child/current): Show content about a single organization(ex. SaveTheEarth – made up org for this example)

Here’s how to do it

1. Create a Page Called Directory. This will be the Directory Page (grandparent)
2. Find the Page ID. Let’s say the Page ID = 5. Depending on how you want to display the category info, you can
3. Manually add the name of each category, a short description and a link
4. Open up page.php so we can setup The Category Page (Parent Page). We want to show title and excerpts of each organization for each category.
5. Add this code to page.php – Checks if we’re on a sub page / child page of the Directory (Page ID =10) and if so, list the pages in alphabetical order with excerpts. For the excerpt, I’m using the plugin Limit Posts since it didn’t work with The Excerpt Reloaded.<?php
   $current = $post->ID;
   $parent = $post->post_parent;
   $grandparent_get = get_post($parent);
   $grandparent = $grandparent_get->post_parent;
   ?>

   <?php if ( $post->post_parent==”10″   ){ ?>
   <?php $pageChildren = $wpdb->get_results(“SELECT *    FROM $wpdb->posts WHERE post_parent = “.$post->ID.”    AND post_type = ‘page’ ORDER BY post_title ASC”, ‘OBJECT’);    ?>

   <h2 class=”titles”><a href=”<? php echo get_permalink($pageChild->ID);  ?>”> <? php echo $pageChild->post_title;  ?></a></h2>

   <?php the_content_limit(280, “”); ?><div class=”readmore”><a href=”<?php echo get_permalink($pageChild->ID); ?>” rel=”bookmark” title=”Permanent Link to <? php echo $pageChild->post_title;   ?>”>Read More &raquo;</a></div>

   (make sure to delete the space between <? and php -  I had to to do that so it wouldn’t execute in this post)

6. Single Organization Page (Child Page) On page.php, after the code you added in step 5, add this code that will check to see if we’re on the grandchild page. This will be the actual organization’s page. In our example, the SaveTheEarth Page. This is very helpful information in case you want to add a different style or add special items in the sidebar, etc.
   <?php if ( $pageChildren ) : foreach ( $pageChildren as $pageChild ) : setup_postdata( $pageChild ); ?>

7. Set up how the rest of the pages on your site will look:

On page.php, after the code in step 6, add this code which instructs every other page in the site to act normally and display the content

<?php endforeach; ?>
<?php else : ?>

<?php the_content(); ?>
<?php  endif; ?>

You can see the full page.php code here

You can see the directory in action here

I figured this out using the following helpful posts:

* http://wordpress.org/support/topic/186206
* http://wpguru.co.za/page/display-title-excerpt-of-child-page

Posted in Code Snippets | Tags: child, directory, grandparent, Pages, parent, wordpress | 10 Comments »

Canonical URLs to help Wordpress duplicate content issue

Fancy words aside, a canonical URL is Google’s way of identifying a “preferred” URL for your posts to avoid duplicate content. Duplicate content is generally defined as “separate web pages with substantially the same content, which may attract a penalty from search engines.”

Wordpress is often criticized for having duplicate content since new posts appear on many pages including category pages, archive pages, feeds, and trackbacks.  While this helps visitors find the content they are looking for, it confuses search engines, forcing them to “choose” which URL to serve in search results.

And so… Google (Yahoo and Microsoft too)  recently came out with a new link tag to help with the duplicate content issue which can be added to the <head> section of the duplicate content URLs.

<link rel=”canonical” href=”http://www.example.com/product.php?item=swedish-fish” />

But honestly, who can be bothered to go into the <head> for every post. Luckily, there are 2 Wordpress plugins that are here to help:

Yoast adds rel=”canonical” links to your blogs <head> section

SEO No duplicate – This simple plugin helps you easily tell the search engine bots the preferred version of a page by specifying the canonical properly within your head tag.

For more information, read the official announcement from Google.

Posted in News & Views | Tags: canonical urls, duplicate content, Google, wordpress | 10 Comments »