BvSiT

Customizing a WordPress theme

To demonstrate how you can easily customize an existing theme I am going to show you some examples of simple customization I did with the Wordpress Restaurateur theme. The full working sample site can be found at www.bvsit.nl/bistrotitou

Add a link to the thumbnail of a Restaurateur Menu Item to go to the full post

A very nice feature of the Restaurant theme is the possibility to create a page which shows an overview of the restaurant dishes. You define a dish by adding a special type of post called a Menu Item – we are talking about food here, not to be confused with items in a menu bar on a web page.

When you select the template Menu Items, Full-With for a page every dish can be shown with a thumbnail image. Normally you will see here also the full description for each menu item. We wanted to gain space to be able to show more dishes by just showing the thumbnail and a More button. The More button will show the full Menu Item post. Originally the image of the dish is not clickable. This is not very intuitive in this case. We will add code so that clicking on the thumbnail will work like clicking on the More button.

The template Menu Items, Full-With - defined in menu-items-template-full.php - inserts the template content-menu.php:



get_template_part( 'content', 'menu' );

In content-menu.php you find this code:

/* Code snippet from content-menu.php */    
<?php if ( has_post_thumbnail()) : ?>
        <div class="imgthumb"><?php the_post_thumbnail( array(600, 300) ); ?></div> 
<?php else : ?>
	…
<?php endif; ?>

We add a link tag while using in the href attribute the wordpress function the_permalink(). This function displays the URL for the permalink to the post currently being processed. So to make the image responsive we simply add a link tag which will open the full menu-item post like this:

  
/* Code snippet from content-menu.php */    
<?php if ( has_post_thumbnail()) : ?>
	  <div class="imgthumb">	
		<a href="<?php echo the_permalink() ?>"
			<?php the_post_thumbnail(array(600,300)); ?></a>
	  </div>
        <?php else : ?>
	…	
<?php endif; ?>

See the result at www.bvsit.nl/bistrotitou/gerechten

Create a page with only menu items belonging to a category.

For each category – such as Tapas, etc. - we created a page with some general information about the category. We want to show the same overview of dishes as in the template Menu Items, Full-With but only show the dishes belonging to the category.

To do this we add a page, for example named Tapas, and use the template Menu Items, Full-With. Then we add code to the template to ensure that only menu items are shown for which the category is identical to the page name.

/* Code snippet from menu-tems-template-full.php */
<?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
    <?php   // Get terms for post
     $terms = get_the_terms( $post->ID , 'menu_item_category' );
     $menu =  array();
     // Loop over each item since it's an array
     if ( $terms != null ){
        foreach( $terms as $term ) {
            // Print the name method from $term which is an OBJECT
            $menu[] = $term->slug ;
            $menu_term = implode(" ", $menu);
            // Get rid of the other data stored in the object, since it's not needed
            unset($term);
        }
    }
    ?>
    <?php if (( strcasecmp($pagename, $menu_term) == 0 ) || ( strcasecmp($pagename, 'gerechten') == 0 )) : ?>
        <div class="grid-box isotope-item <?php echo $menu_term; ?>">
            <?php  get_template_part( 'content', 'menu' ); ?>
        </div>
    <?php endif; ?>
<?php endwhile; ?>

See the result at www.bvsit.nl/bistrotitou/tapas

Adding a button to go back to the category page.

By using a Menu Items template a menu bar is shown where you can select dishes by category. All dishes (Menu Items) can belong to a category such as tapas, buffet, etc.

Once you click on a Menu Item you are taken to a page - actually a post – with all the details of the dish. We wanted to add a button which will take you back to the page of the category. The page shows also some general information about the category.

To be able to do this we will have to find the category of the post. Once found we create a link with in the href attribute the link to the page with the name of the category.

/* Code snippet from content-single.php */
<?php $terms = get_the_terms( $post->ID , 'menu_item_category' );
	 // Loop over each item since it's an array
	if ( $terms != null ){
 		foreach( $terms as $term ) {
// Print the name method from $term which is an OBJECT
			$page = get_page_by_title( $term->name );
			if (!empty($page)){
			$permalink = get_permalink($page);
			//Link element back to the main category of the menu item is shown on page with layout of orange button:
			printf( __( '<a href="%1$s" class="more-link-bvs more-link">%2$s</a>' ), $permalink, $term->name );
			}
		}
	}
?>

Copy the layout of the More button to the new customized link button.

As you can see in the above code we use a new CSS class "more-link-bvs" together with the “more-link” class for the link. To keep a consistent layout we would like to use the rounded orange-with-white layout of the More button as it already exists in the default Restaurateur theme. The original "more-link" class is defined in the styles.css:

.post-content a.more-link {
	background-color: #e68b2b;
	color: #fff !important;
	border-radius: 15px;
	display: inline-block;
	padding: 2px 15px;
	font-family: "Droid Sans", Arial, Helvetica, sans-serif;
	font-size: 13px; /* for ie8 & below */
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	margin-top: 20px;
	margin-top: 10px; /* BVS: Less height of menu item posts */
	float: right;
	clear: both;
}

We add a new class to styles.css to overrule the right positioning:

/* .post-content a.more-link displays link as a pseudo orange button
   This layout is almost identical but positioned left, used in content-single.php */
a.more-link-bvs {
	margin-top: 20px !important; 
	float: left !important;
}

As a result we now have a link on the page which looks very much like a button: