Thord Daniel Hedengren - Smashing WordPress_ Beyond the Blog-Wiley (2014)

(avery) #1

78 PART II • Designing and Developing WordPress Themes


THE RIGHT COLUMN: SIDEBAR.PHP
Before you get to the actual content, take a look at the right column, more commonly known
as the sidebar in blog speak. Figure 4-5 shows the area in question.

Figure 4-5: The right column.

Now, you could load a bunch of different right columns depending on where on the site the
user is, but for your needs here, you’ll stick with just one. The following HTML code is what
I’ve copied and pasted into a file called sidebar.php:

<aside id="sidebar-container">
<ul id="sidebar">
<li class="widget-container">
<h3 class="widget-title">Widget title</h2>
<p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi
vitae est. Mauris placerat eleifend leo.</p>
</li>
<li class="widget-container">
<h3 class="widget-title">Another widget title</h2>
<p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi
vitae est. Mauris placerat eleifend leo.</p>
</li>
</ul>
</aside> <!-- #sidebar-container ends -->

Obviously, you don’t want the sidebar littered with dummy content, so that has got to go. The
actual content will be dynamic, an area where the site owner can drop widgets, also known as
a widget area. Most themes have one or several widget areas that let the site owner add
Free download pdf