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?

First, I tried this tutorial: How To Make a WordPress Events List and calendar plugins, but the tutorial wasn’t comprehensive enough and the plugins were too complex to start messing with.

The solution

I found this wonderful date field plugin which lets  you sort posts by the date entered in the custom fields.  Here’s what I did:

1. Upload the plugin and activate it

2. Opened the lettersarchive.php page template I created and added a query. The query checks for posts in the Letters category that have a date filled in and the orders it from oldest to newest.

<?php query_posts(‘category_name=letters&meta_key=date_value&orderby=meta_value&order=DESC’); ?>

3. I replaced a typical date function within the loop <?php the_time(‘j M Y’); ?> with

<?php echo date(“l jS \of F Y”, get_post_meta($post->ID, ‘date_value’, true));?>

4. I created a new post,  assigned it to the Letters category, and selected a date from the date picker box that now appears below the editing box in the post area.

I noticed that the Date Field plugin only lets you select a date up to 5 years ago  so I had to hack the plugin file on line 125 to  reflect selecting dates from 80 years ago.

for($currentyear = date(‘Y’) – 80; $currentyear <= date(Y) +5;$currentyear +=1)

Here’s a screenshot of the archive from The Forgotten Letters site.

I found a solution for simply listing the pages in 2 columns, but it did not suggest how to modify the code to include custom fields.

So, thanks to our coding hero Mark Kaplun who supplied the below code, although he admits it’s a “dirty hack”. The sort_column is so that MyPageOrder would work properly for this listing.

<?php
$args = array(
‘post_type’ => ‘page’,
‘numberposts’ => 40,
‘sort_column’ => ‘menu_order’,
‘child_of’ => 84 // any parent
);
$attachments = get_pages($args);
//print_r(“attachements:” . $attachements);
echo ‘<div style=”float: left; margin: 0 10px 0 0;”>’;
?>

<?php
for ($i =0; $i<count($attachments)/2; $i++) {
$post = $attachments[$i];
//    foreach ($attachments as $post)  { ?>

<a href=”<?php echo get_permalink($post->ID) ?>” rel=”bookmark”><?php echo $post->post_title; ?></a>
<?php if(get_post_meta($post->ID, “NameofCustomField”, true)) { ?>
<?php
echo get_post_meta($post->ID, “NameofCustomField”, true);
}
?>
<?php } ?>
</div>
<?php
echo ‘<div style=”float: left; margin: 0 10px 0 0;”>’;
for (; $i<count($attachments); $i++) {
$post = $attachments[$i];
//    foreach ($attachments as $post)  { ?>

<a href=”<?php echo get_permalink($post->ID) ?>” rel=”bookmark”><?php echo $post->post_title; ?></a>
<?php if(get_post_meta($post->ID, “PracticeArea”, true)) { ?>
<?php
echo get_post_meta($post->ID, “PracticeArea”, true);
}
?>
<?php } ?>
</div>

This was something new to us, and after doing some research we discovered that WordPress only allows users to upload certain types of files, and any files that are not part of that list cannot be uploaded through the admin. Here’s the list of accepted WordPress files types.

It turns out that the list of accepted file types is found in wp-includes/functions.php. Since we don’t want to modify WordPress core files, we need a solution like a plugin in order to get around this limitation.

Chris Meller has a solution that involves adding some code to your functions.php file in your theme directory. He also explains how to remove file types from the list of allowed files types.

For more info on how to do this, see this post on his blog: Modifying Allowed Upload Types in WordPress.

Thanks to Mark Kaplun for helping us find this solution.

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.

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.

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.

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