Blog: Starting a new design for my blog – part 8 (More Posts)
In the last several posts I’ve looked at the following aspects of making a WordPress theme
- Taking the time to plan, and prototype our theme before converting it to a compatible theme.
- Using the WordPress the Loop.
- Single.php templates.
- WordPress widgets.
- Pagination methods.
- Category and Author Templates.
Now it’s time to work with WordPress pages and link these pages together with a dynamic menu.
First, just in case there’s no menu link appearing in “appearance” in the admin area, let’s make sure support for menus is added to WordPress with the theme support code.
add_theme_support( "menus" );Let’s stay in functions.php and register a new menu area. We can use a function to do this, and in that function add and then use the register_nav_menus(). Registering a menu adds a location name as an identifier and a placeholder for the menu. In the admin area, you’d use a string like “main_site_menu” (you could give this any other name in your theme) to hook the menu you create to that location. The second string argument is the text domain identifier for your theme.
// Register Nav Menus
function main_jgdm_menu(){
register_nav_menus( array(
'main' => __( 'main_site_menu', 'jgdm_blog' )
) );
}
add_action( 'init', 'main_jgdm_menu' ); When that’s done you can then start to think about where in your design the menu will go.
wp_nav_menu is another WordPress method that takes an array of parameters. Use these parameters to generate the menus you will build in the admin area. If neither of these is in order then WordPress will display a default list of all posts and pages.
The first parameter ‘menu’ selects the name of the desired menu.
Enter the name of the Theme location to be used. If for example, you saved a menu with the name of “Main Menu”, you should use that as the value of theme_location.
<!-- Main Nav Menu -->
<?php wp_nav_menu( array(
'menu' => 'Main Menu',
'theme_location' => 'Main Menu',
'orderby' => 'menu_order'
) );
?>Finally, use the dynamic_sidebar() Find the place in your design where you want to put your menu. The string argument is the display location which is the same string value as you might have typed in when you registered the menu area register_nav_menu().
<!-- WP Menu -->
<!-- <?php echo dynamic_sidebar( "main_site_menu" ); ?> -->Here’s a simple example of HTML it returns.
<div class="menu-main-menu-container">
<ul class="menu">
<li class="menu-item">
<a href="#" aria-current="page">Posts</a>
</li>
<li class="menu-item">
<a href="#" aria-current="page">Blog Posts</a>
</li>
<li class="menu-item">
<a href="#" aria-current="page">Page Title</a>
</li>
</ul>
</div>The basic structure is containing a <div> element which has a HTML unordered list as a child element. These are just a few of the classes it contains as well as other id attributes with unique values that WordPress generates. When you’re selecting these elements with CSS though you’re better off using class selectors.
page.php templates
WordPress pages are a separate post type from WordPress core posts and are intended as content for separate pages for your website. The template hierarchy level for Pages is page.php
To demonstrate this, let’s again bring some of the code from single.php and transfer it into page.php so it’ll take on a similar design to that of single post templates. The article element has a class of page. As with Posts you use the WordPress loop to retrieve the content from the admin area.
<section class="single_php">
<article class="page">
<h2 class="post_headline"> <p>page.php</p> </h2>
<a href="<?php bloginfo("home"); ?>">Home</a>
<!-- The WordPress Loop Begins -->
<!-- the loop ends -->
</article>
</section>I grouped together .page class in CSS with the .single class so that page templates took on the same styling as single.php templates.
.single, .page {
}
.single,
.page {
display: block;
margin: 0 auto;
width: 1000px;
}Search.php
Let’s now see how we add some search term functionality to the theme. We need to add a new template which should be called search.php.
You can place a search form anywhere in your theme using a method or a search widget.
<?php get_search_form(); ?>The search.php template is the template used to return search results.
Below is just one example which lists what term was just searched on that template.
<h2>
<?php printf( __( 'Search Results for: %s' ), '<span>' .
get_search_query() .
'</span>'); ?></h2>You can also return the actual keystrokes by using the code below.
<?php
global $query_string;
wp_parse_str( $query_string, $search_query );
$search = new WP_Query( $search_query );
?>So for example, if you typed in a search for “Web Design” this code would return returns s=Custom%20Design to the screen. Where WordPress replaces spaces with the %20 characters.
As usual, it’s the loop that lists the actual results.
<!-- The WordPress Loop Begins -->
<?php if ( have_posts() ) : ?>
<!-- html -->
<?php while ( have_posts() ) : the_post(); ?>
<div class="search-entry">
<h5><a href="<?php the_permalink();?>"><?php the_title(); ?></a></h5>
<?php the_content(); ?>
</div>
<?php endwhile; ?>
<?php else : ?>
<!-- No Post Found -->
<p>There was no post found</p>
<?php endif; ?>Use the global object to look into the main query and return the number of returned results as a whole integer.
<!-- Get the total number of posts and display it. -->
<?php
global $wp_query;
$total_results = $wp_query->found_posts;
?>
<?php echo "<p>Number of results " . $total_results . "</p>"; ?>Style the total results with a class container element. In this example, I simply bolded the text and center-aligned it to try and make it stand out.
p article p.posts_available {
text-align: center;
font-weight: bold;
}I was going to do a whole piece on pagination for the search results but I think I’ll leave it there because it’s ground I’ve already covered. We use paged variables and pagination methods in just the same way which is the way to get access to every post returned for a search.
There’s one more potential thing I want to look at. How to create the ability to add comments to individual WordPress posts.