WordPress Theme Design Tutorial Part-4

create a sidebar WordPress Theme Design:

This is our WordPress theme design tutorial part. Today we will create a sidebar for our theme. To learn better you read our previous lessons.  Now we are going to start to create a sidebar. This simple tutorial can help you to make a sidebar for your child theme.  Here I have embed a video with this article for make more easy the task. Now start to make a sidebar.

Code for functions.php file

Now, copy and paste the following code to your functions.php file below previous code. Remember, do this task carefully.

function mytutorialtheme_widgets_init(){
register_sidebar( array(
'name'          => __( 'Right Sidebar', 'mytutorialtheme' ),
'id'            => 'sidebar-1', 'description'   => __( 'This widget is the main sidebar.', 'mytutorialtheme' ),
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget'  => '</div>',
'before_title'  => '<h3 class="widget-title">',
'after_title'   => '</h3>', ) );
add_action( 'widgets_init', 'mytutorialtheme_widgets_init' );

Remember, your code must put between php tag. Then save functions.php file. More information for wordpress theme design you can following see this video:

 index.php editing

Now you need to edit the index file of your theme. So, open the index.php file with text editor.  Find <?php get_footer(); ?>. This is footer code. Put the following code before footer.

<div class="sidebar">
 <?php echo dynamic_sidebar('sidebar-1'); ?>

Remember, your code must put between php tag. Then save functions.php file. Do this task carefully.

 WordPress Theme Design style.css editing

Now we should edit our stylesheet. Open the style.css file with text editor and copy the following code and paste to your style.css file, then save the file.

 .sidebar { width: 25%;  
margin-right: 10%;  
margin-top: 30px;  
padding-top: 30px;  
float: right;  
background-color: gray; 

If you have any questions please put a comment in the comments box. Please don’t hesitate to ask me by comments.  Free WordPress Theme.


This is a step by step tutorial. To learn wordpress theme development tutorial series one after another. You can follow my YouTube  Channel.

Leave a Reply

Your email address will not be published. Required fields are marked *