Step 1 – New Structural HTML.
We’ll create some extra divs to wrap everything that we’re working with. Place add this following code just above <div id=”wrapper”>: opening tag.<div id="container">
<div id="header">
<h1>MyBlog - WordPress and jQuery together in <em>MyPlugin.</em></h1>
</div>
And we also need to add a final </div> just
before the closing </html>Step 2 – Conditional tags
Add this code just under our brand new h1 element in index.php.<?php if(is_home()) {include(TEMPLATEPATH.'/tabbedChangedContent.php'); } ?>
if(is_home()) is our
condition here, so if the page currently being browsed is the home,
the include our tabbedChangedContent.php file. Step 3 – tabbedChangedContent.php (HTML)
Create a new file in our ‘ownTheme’ directory, and name it tabbedChangedContent.php. Type or paste the following into this new file:<div id="myTabsAndContent">
<ul id="myTabsNav">
<li><a href="#myRecentArticles">Recent Articles</a></li>
<li><a href="#myMonthlyArchives">Monthly Archives</a></li>
<li><a href="#mySearchArea">Search</a></li>
</ul>
<ul id="myTabContent">
<li id="myRecentArticles ">
<ul>
<!—RECENT POST GOES HERE -->
</ul>
</li>
<li id="myMonthlyArchives ">
<ul>
<!-- ARCHIVES PODT GOES HERE -->
</ul>
</li>
<li id="mySearchArea ">
<!-- SEARCH PAGE GOES HERE -->
</li>
</ul>
</div> <!-- div# myTabsAndContent -->
This is just raw HTML without any WordPress or jQuery additions. #myTabsNav – There are the clickable tabs! We’ve added a href attribute of their corresponding content <li>. Making sure the hrefs match the ID name of their corresponding content list item!
- #myTabContent – We use a <ul> not unlike WordPress’s sidebars, because it’s easy to style and is essentially a list of content anyway.
Step 4 – myTabbedContent.php (WordPress functions)
So we need to replace the <– –> comments with real content! Now we’ll start with WP_Query(), wp_get_archives(), and a search form.4.1 – WP_Query()
So cut out the comment tag for our WP_Query, and type the following:<?php $recentPost = new WP_Query("showposts=5");
while($recentPost->have_posts()) : $recentPost->the_post();?>
<li>
<a href="<?php the_permalink();?>" title="Link to <?php the_title(); ?>"><?php the_title(); ?></a>
</li>
<?php endwhile; ?>Now we’re simply doing, is telling the immanently following loop to show us a list of the 5 latest posts. We can the string within the brackets of WP_Query can be anything… filter by dates, categories, tags, limit, etc.
4.2 – Archives
Now it’s a basic call for a list of monthly archives. And to match the WP_Query section, we only want 5 of them (automatically in descending order). Simply switch the <– WP_ARCHIVES GOES HERE –> in myTabbedContent.php with the following: <?php wp_get_archives('type=monthly&limit=5'); ?>
4.3 – Search
We’ll only be using a very simple input and search, using the default search I always use in my own themes. Now we replace the SEARCH PAGE comment with this:<form method="get" id="mySearchForm" action="<?php bloginfo('home'); ?>">
<p>
<input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" />
<input type="submit" id="mySearchSubmit" value="Search!" />
</p>
</form>Great, so now you should have a new file within the ownTheme directory called myTabbedContent.php, and the conditional tag in index.php.
Step 5 – CSS
At the moment, they are ugly sides. We need to make the page for people without JavaScript enabled first, for graceful degradation. You’ll need some images if you want to make it as pretty just as much as I do. Here is a list of them (right click and save as into the images folder within the ownTheme directory!)Either type, or paste this massive slab of CSS.
/*------TABS------*/
#container{
width: 600px;
margin: 0 auto;
}
h1{
font-size: 1.3em;
text-transform: uppercase;
color: #949494;
letter-spacing: 1px;
}
#myTabsAndContent ul, #myTabsAndContent li{
padding: 0
}
ul#myTabsNav{
float: left;
width: 200px;
list-style: none;
}
ul#myTabsNav*:focus {
outline: none
}
ul#myTabsNav li.active a{
color: #303030;
}
ul#myTabsNav li a{
padding: 1em 15px;
margin: 0 0 1em 0;
display: block;
width: 170px;
text-decoration: none;
color: #7e7e7e;
font: 11px/20px Georgia;
text-transform: uppercase;
}
ul#myTabsNav a:hover{
color: #0a0a0a
}
ul#myTabsNav {
margin: 1em 0 0;
min-height: 180px;
width: 350px;
float: left;
list-style: none;
padding: 0 25px;
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
#myTabContent>li{
width: 350px;
list-style: none;
padding: 0 25px 20px 0;
}
#myTabContent li ul li{
list-style: none;
}
#myTabContent li ul li a{
display: block;
border-bottom: 1px solid #e7e7e7;
padding: 10px 0;
}
form{
padding: 30px;
}
form input{
border: 2px solid #cbc6c9;
border-right: 0;
padding: 5px;
margin-right: 0;
color: #fff;
font: 16px Georgia, "Times New Roman", Times, serif;
}
#mySearchSubmit{
border-left: 0;
border-right: 2px solid #cbc6c9;
margin-left: 0;
position: relative;
left: -3px;
color: #00416c;
}
#mySearchSubmit:hover{
background: url(images/tabContentHover.png) no-repeat center;
color: #003459;
cursor: pointer;
}
Step 5 – jQuery
Let’s put into words what we need to happen:- Hide all list items we don’t want to see initially, showing only our first content section, the WP_Query section.
- Add the class ‘active’ to the first tab, because it’s corresponding section is open.
- When a tab is clicked, do the following in order:
- Eliminate the active class from the currently active tab
- Include the class active to the tab that has just been clicked
- Get the href attribute of the a within the clicked tab, and make it our new variable ‘target’
- Then have the target reveal itself, and the previous showing area hide itself with some simulation
//And our little animated sliding area uptop of the design.
jQuery('#tabContent>li:gt(0)').hide();
jQuery('#tabsNav li:first').addClass('active');
jQuery('#tabsAndContent #tabsNav li').bind('click', function() {
jQuery('li.active').removeClass('active');
jQuery(this).addClass('active');
var target = $('a', this).attr('href');
jQuery(target).slideDown(400).siblings().slideUp(300);
return false;
});
To finish up.
We’ve gone through a lot in this tutorial.- WP_Query(); – A great tool for getting content outside the main loop.
- WordPress conditional tags – unbelievable for further customizing your theme.
- .bind function – to easily link a function to a specific element with an event.
- jQuery animation – amazingly easy to implement, and as pretty as a garden of roses.
.jpg)
0 comments:
Post a Comment