Seattle Web Design Seattle Web Design

WordPress Theme #4

 

WordPress Custom Theme – Sidebar

If you read and did steps 1 to 3 of my tutorials, you are almost done with 70% of conversion. In part 4 I teach you how to create WordPress sidebars for your WordPress website. WordPress sidebar is dynamic and would be shown in WordPress dashboard. Not only sidebars, but also all widgetize WordPress areas would follow the same structure which I describe it here.

 

You need to follow these steps:

 

• Register your sidebar in functions.php
• Create sidebar include file and put it in the root of your theme
• Locate your sidebar in your website
• In Dashboard Widget area set your sidebar up

Register WordPress Sidebar

Exactly the same as menu, you need to register your sidebar(s) in “functions.php”. Open this file by your text editor and make require changes in it. For instance for primary sidebar, your registration codes should be looked like:

sidebar-registration

You can make changes in above array. For example you can exchange div with li, or h3 with h2.

WordPress Sidebar File

You need to create new file for your sidebar. For my primary sidebar I called it “sidebar-primary.php”. If you registered your sidebar for example apple, then your file should name “sidebar-apple.php”.
Let’s take a look at internal sidebar code:
<aside id="sidebar-id">

<?php if ( is_active_sidebar( 'primary' ) ) : ?>

<?php dynamic_sidebar( 'primary' ); ?>

<?php else : ?>

 replace the code below with whatever default code you want to display in Primary Sidebar

<h3>Primary Sidebar</h3>

<p>Look, it's the Primary Sidebar!</p>

<!– Begin Categories –>

<h3>Categories</h3>

<ul>

<?php wp_list_categories('title_li='); ?>

</ul>

<!– End Categories –>

<!– Begin Meta –>

<h3>Meta</h3>

<ul>

<?php wp_register(); ?>

<li><?php wp_loginout(); ?></li>

<?php wp_meta(); ?>

</ul>

<!– End Meta –>

<?php /*?> end default code to display in Secondary Sidebar <?php */?>

<?php endif; ?>

</aside>

When you create your sidebar file, you should make some changes in it. in line 2 and 3 you need to rename two “primary”. For example if you called your sidebar “apple” they should be:

<?php if ( is_active_sidebar( 'apple' ) ) : ?>

<?php dynamic_sidebar( 'apple' ); ?>

 

Also you have a loop in the rest of codes. It says if it is active sidebar then go and take all related information from database to the sidebar, and if it is not, show some messages or pictures. This is where exactly you should make your default content for your sidebar. You can remove some parts and add your favorite default content in it.

*** If you are using id or class for your template sidebar, replace it with “sidebar-id” on top.
Save your sidebar file and function file and upload both to your WP website.

Locate your sidebar

Now it is time to connect your sidebar file to your website. Put this code where your sidebar should be.

If you called your sidebar “apple then it should be like

Set your Sidebar in Dashboard

You are almost done. All you should do is going
Dashboard > Appearance > Widgets > Drag and drop your favorite widgets to your sidebar.
For example your apple sidebar should be shown as “Apple Sidebar”.

If your theme still look messy do not worry because there is one another step to make every thing perfect. Create all your sidebars or widgetize areas and keep reading this tutorial in part 5. In part 5 I will talk about final steps and also Page Template Files.

 

 





Leave a Reply

 
Kianoush Facebook Profile Kianoush Google Plus Profile Kianoush LinkedIn Profile Find Kianoush Twitter