WordPress Templates Cookbook

Overview

Documentation on how to set up various common features in WordPress.

Inserting a custom content template in a page

• Within the top-level WordPress template (e.g. page.php)

<?php get_template_part( 'modules-sidebar-donate-link' ); ?>

• The string passed as the argument to get_template_part() corresponds to a WordPress template in the themes directory. So 'modules-sidebar-donate-link' means there should be a template named modules-sidebar-donate-link.php.
• Template markup goes in the template file (modules-sidebar-donate-link.php in this case).
  • Content can be retrieved within the template using WP_Query().

<?php $query = new WP_Query("post_parent=123&post_type='page'&orderby=order&order=ASC"); /* 123 = "landing page slideshow" page */ ?>

• • Then a loop would be created within the template:

<?php if ($query->have_posts()) while($query->have_posts()): $query->the_post(); ?>
<div><!--// Content inserted here using markup and WP content retrieval methods. //--></div>
<?php endwhile; ?>

Sub-navigation within pages

When landing on a content section page, load a sub-navigation menu dynamically using pages that have that top-level content section page as their parent.

Example: http://rsrt.dbarchowsky.com/about-rsrt/

• Create the top-level page (as a WordPress "page", not a WP "post"). The page can have any sort of content.
• Create 2nd-level pages and assign the top-level page as their parent.
• Create a template for the sub-navigation menu, i.e. page-navmenu.php.
• Include the page navigation menu inside the loop.

get_template_part('page-navmenu');

• Inside the sub-navigation menu template:

• Get the id of the parent page:

$top_parent_id = 0;
if ($post->ancestors) {
    //  Grab the ID of top-level page from the tree
    $top_parent_id = end($post->ancestors);
}

//get the top menu parent ID. If this is a top menu page, the page will not have a parent
$parent_id = (($top_parent_id>0)?($top_parent_id):($post->ID));

• Fetch and loop through results

<?php
$pagemenu = new WP_Query("post_parent={$parent_id}&post_type='page'&orderby=menu_order&order=ASC&showposts=20");
if ($pagemenu->have_posts()) while($pagemenu->have_posts()): $pagemenu->the_post(); ?>
	<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; ?>

• To test for the item representing the page that's currently loaded in the browser to treat its link differently:

/* outside the loop get the current page id */
$currentPageID= ($post->post_parent==$top_parent_id)?($post->ID):($post->post_parent);

/* (start of the loop code would go here) */

	/* inside the loop, check the id of the menu item against the current page id */
	$currentMenuItemID = get_the_ID();
	if ($currentMenuItemID == $currentPageID) {
		/* treat the link to indicate that this is the current page */
	}
	else {
		/* all other links treated normally */
	}

Galleries

Implemented with the NextGEN Gallery plugin.

Installation

• WP dashboard > Plugins > Add New
• Enter "NextGEN Gallery" in Search
• Install and make sure to click the Activate link after installation has completed.

Configuration

• WP dashboard > Gallery (only visible to Admin-level users) > Add Gallery/Images
• Enter the name of the gallery & submit.
• Upload images.
• (optional) WP dashboard > Gallery > Manage Gallery
  • Select the gallery to work on.
  • (optional) Enter titles and descriptions for the images in the gallery.
  • (optional) Click Sort Gallery and drag'n'drop to arrange the display order of the images.
• WP dashboard > Gallery > Options
  • Thumbnails tab
    • Set thumbnails width & height here
    • It's necessary to re-create the thumbnails for the Gallery under Gallery > Manage Gallery after changing their dimensions.
  • Gallery tab
    • Hide the "[Show as Slideshow]" link here.
• Stylesheet
  • /wordpress/wp-content/themes/[SITE_THEME]/style.css
  • .entry-content img defines the border and padding for the thumbnail images.
  • /wordpress/wp-content/plugins/nextgen-gallery/css/nggallery.css
  • .ngg-gallery-thumbnail img defines padding and margin around thumbnail images.
  • /wordpress/wp-content/plugins/nextgen-gallery/css/shutter-reloaded.css
  • #shName Color of text in lightbox slideshow.

Displaying on a page

• Edit a page or post.
• After the NextGEN Gallery plugin is installed a new button for NextGEN Galleries is added to the WYSIWYG editor buttons.
• Click that button and select the gallery from the dropdown list.