The whole process of WordPress theme creation (7): making sidebar.php

I introduced you to "The whole process of WordPress theme production (6): Making footer.php". This article continues to introduce to you how to make sidebar.php. Let's take a look at it together~

After making header.php and footer.php, today we will make sidebar.php. Because the sidebar is so customizable, the content in this section is difficult and difficult for me to explain, and some content will be omitted!

As a common sidebar for each page, we still extract the sidebar from index.php and put it in sidebar.php just like we did in making header.php and footer.php. OK, now create a new file sidebar.php in your theme directory Aurelius, extract the code from index.php, and put it into sidebar.php:

<!-- Column 2 / Sidebar -->
<div class="grid_4">
<h3 id="Catagories">Catagories</h3>
<ul class="sidebar">
<li><a href="">So who are we?</a></li>
<li><a href="">Philosophy</a></li>
<li><a href="">History</a></li>
<li><a href="">Jobs</a></li>
<li><a href="">Staff</a></li>
<li><a href="">Clients</a></li>
</ul>
<h3 id="Archives">Archives</h3>
<ul class="sidebar">
<li><a href="">January 2010</a></li>
<li><a href="">December 2009</a></li>
<li><a href="">Novemeber 2009</a></li>
<li><a href="">October 2009</a></li>
<li><a href="">September 2009</a></li>
<li><a href="">August 2009</a></li>
</ul>
</div>
<div class="hr grid_12 clearfix"> </div>

Then use a text editor to open index.php and archive .php, page.php and single.php, delete the above similar code and change it to:

<?php get_sidebar(); ?>

Okay, now open your blog homepage and see if the theme we made can still work normally. At present, our sidebar is still a static code. Everyone may know that in the WordPress backend - Appearance - Widgets, you can drag the columns you want to the sidebar, but our theme does not currently support this function. . Now let me make the complete sidebar together.

In order to adapt to the WordPress program, we need to make some fine-tuning to sidebar.php, download the new style sheet style.css, and replace the style.css in the Aurelius directory

Start sidebar.php To make, we will place 4 columns in the sidebar. In the initial state, that is, when you do not place any widgets in the sidebar, the four columns from top to bottom are category directory, latest article, tag cloud, and article monthly archive. Now delete all the code in sidebar.php and change it to:

<!-- Column 2 / Sidebar -->
<div class="grid_4">
<?php if ( !function_exists(&#39;dynamic_sidebar&#39;) 
|| !dynamic_sidebar(&#39;First_sidebar&#39;) ) : ?>
<h3 id="分类目录">分类目录</h3>
<ul>
<?php wp_list_categories(&#39;depth=1&title_li=&orderby=id&show_count=0&hide_empty=1&child_of=0&#39;); ?>
</ul>
<?php endif; ?>
<?php if ( !function_exists(&#39;dynamic_sidebar&#39;) 
|| !dynamic_sidebar(&#39;Second_sidebar&#39;) ) : ?>
<h3 id="最新文章">最新文章</h3>
<ul>
<?php
$posts = get_posts(&#39;numberposts=6&orderby=post_date&#39;);
foreach($posts as $post) {
setup_postdata($post);
echo &#39;<li><a href="&#39; . get_permalink() . &#39;">&#39; . get_the_title() . &#39;</a></li>&#39;;
}
$post = $posts[0];
?>
</ul>
<?php endif; ?>
<?php if ( !function_exists(&#39;dynamic_sidebar&#39;) 
|| !dynamic_sidebar(&#39;Third_sidebar&#39;) ) : ?>
<h3 id="标签云">标签云</h3>
<p><?php wp_tag_cloud(&#39;smallest=8&largest=22&#39;); ?></p>
<?php endif; ?>
<?php if ( !function_exists(&#39;dynamic_sidebar&#39;) 
|| !dynamic_sidebar(&#39;Fourth_sidebar&#39;) ) : ?>
<h3 id="文章存档">文章存档</h3>
<ul>
<?php wp_get_archives(&#39;limit=10&#39;); ?>
</ul>
<?php endif; ?>
</div>
<div class="hr grid_12 clearfix"> </div>

Then click here to download functions.php and put it under the theme directory Aurelius. At this time, your sidebar can work normally in WordPress Backend - Appearance - Widgets, you can now drag widgets to the sidebar normally.

Okay, sidebar.php has been successfully created. This section doesn’t talk much about theory. The key is that I don’t know how to express these things. Even if I say it, you may not understand it very well.

Recommended learning: "WordPress Tutorial"

The above is the detailed content of The whole process of WordPress theme creation (7): making sidebar.php. For more information, please follow other related articles on the PHP Chinese website!