TealGray Retro Theme is our most succesfull wordpress template so far. We receive a lot of “how to” questions on daily basis and so we decided to create a little tutorials that will be updated based on your interest.
How to position the navigation menu below the header image
Start by opening “navigation.php” and “headimage.php” files.
Find “page-navigation” tag in :”navigation.php” file
<div id="page-navigation" class="clearfix">
<a href="<?php bloginfo('rss_url'); ?>" class="rss" title="RSS Feed">RSS Feed</a>
<ul id="nav" class="sf-menu">
<li<? echo (is_home())? ' class="current_page_item"' : ''; ?>><a href="<?php echo get_option('home'); ?>/">Home</a></li>
<?php wp_list_pages('title_li=&amp;amp;amp;amp;amp;amp;amp;depth=3'); ?>
</ul>
</div><!-- end page-navigation -->
and move it (line 01-07) to “headimage.php” file below “content-head” tag..
Styling
Finally, we have to customize the look of navigation menu. Page background, manu padding, crumbtrail padding, we have to make changes for our menu to fit in.
Replace styles in “style.css” file with:
#page-navigation
{
padding: 0px 0px 0px 20px;
}
#page-navigation .rss
{
background: url("images/icon_rss.png") no-repeat 0% 0%;
display: block;
float: left;
width: 48px;
height: 48px;
text-indent: -9999px;
margin: -15px 15px 0px 0px;
position: relative;
}
#breadcrumbs
{
padding: 8px 20px 8px 30px;
background-color: #c5c59f;
}
#content-head
{
background: url("images/bg_page_navigation.png") no-repeat 0% 0%;
height: 240px;
}
Finally
Well, this will position the navigation menu below header images but one more thing remains.
Header image does not have rounded corners on top. I will leave it up to you to play with it.
How to show authors details in posts
A lot of blog sites have multiple authors who wants to be credited for their work. Let’s see how to add author details at the end of blog posts. First, open “single.php” file and add this code (line 03-06):
<?php the_content(); ?> <div id="author"> <h4>Author: <?php the_author_firstname(); ?> <?php the_author_lastname(); ?></h4> <p><?php the_author_description(); ?></p> </div> <div id="post-indexing">
Line 4 gives you authors first and last name, line 5 authors description. Check all WordPress Author Template Tags and decide what information you want to display on your blog.
