How to Create a Custom Sidebar in WordPress


Today I am going to teach you how to do something pretty cool I am going to show you how you can create your own custom sidebar. and display its contents in any area on your WordPress website. now let’s take a quick overview of what I’ve got over here I am on my UFO blogger website is just a dummy website for testing purposes. and I’ve got lots of fake content but if you like to read the content you can go ahead and do. so let’s jump down to the back end where we have the appearance themes and you can see I’m using a theme called UFO blogger. it’s actually a travel theme of the 2012 what press theme. now unfortunately when it comes to sidebars the number of side bars we have is dictated primarily by the kind of theme that we are using some themes will have 16 side bars or 10 side bars. so might have only one and in the case of the 2012 theme. if I jump down to the widgets area you can see we only have three sidebars. we have the main sidebar we have the first front page with widget area and then the second front page widget area.

so the sidebar here will output information towards the right of your page. and then the remaining two sidebars will display information beneath the main content area of your front page only none of the sidebars will display information in the header section of the website which is where I would like to display some information. I want to display some widgets just beneath the logo the UFO blogger logo. so in order to do this I will have to create my own custom sidebar and then tell what press to display its contents just beneath the logo. so what I’m going to do is to drag my notepad plus plus text a little over here. and if you would like a tutorial on how you can use notepad to make changes to edit your WordPress files check the article.

toriel over there you can check it out but I already gained FTP access to my child themes directory you have a blogger. so I’m going to open it up and it will open up the functions dot PHP file as well. now what I’m going to do is to jump down to the parent theme 2012. and I am going to open up the functions that PHP file as well and what I’m looking for in this file is the section where the three setters. we have were created and I’m going to keep looking I’m going to keep scrolling down and down here where we have the function and then we have the words registers sidebar this is exactly what I’m looking for take a look at this. we have what the name the main sidebar. we have name down here again the first front page with the widget area and then second front page widget area. so you can tell that this is where these three amigos these three side bars down here parents widgets this is really these three sidebars were created.

so in order to create my own custom sidebar what I’m going to do is very quietly and silently. I am going to grab this block of code starting from the word registered down to where we have the semicolon. I am going to copy this very quietly let me close this up and now and it functions dot PHP file of my child theme. I am going to dump that code in there BAM and let me just use the tab to align it properly now down here this is the code that basically what press uses to create new sidebars. so what I’m going to do is to change the name and the ID because these are very very important parameters. so let me change the name here to header sidebar and then the ID let me change that as well to header you typically want there to be some sort of resemblance between the name. and the ID just for I don’t know just just make it look good so for the description I’m going to remove that we don’t need any description or you can leave it there it’s up to you alright.

so let me just save this up right now save let’s jump back down here to the back .and let’s refresh the page and check that out we’ve got the header sidebar. now being created it’s easy as that and you taught create inside wasn’t what purse was rocket science.

so what I’m going to do it now is I am going to grab a text widget I will drop it in there and title I’m going to say hey and let me just say this is my header sidebar. let’s save this let’s take a look at the website right now but we still don’t see the contents been displayed. and that’s because even though we’ve created the sidebar we haven’t told what press where to display the contents of the sidebar. because I want to display the contents just beneath the logo I would have to make changes to the header dot PHP template file template files dictate how or where information is displayed on your WordPress website. and the tablet file that controls the header section is the header dot PHP file so in my parent theme folder. I am going to open up the header dot PHP file I am going to copy everything over here copy let’s close this. and then I am going to create the exact same file in my child themes folder create a new file. and here I’m going to say header dot PHP PHP alright let’s open that up editor PHP.

and then I am going to dump everything in here. so now I have a head of PHP in my child themes folder and my parents themes folder the way what press works is this. if you have the exact same template file in both your parents things folder in your child themes folder it is the template file in your child themes folder that WordPress would okay. so this is the head of the pitch pit in my child themes folder what I’m going to do is to look for the area in here that outputs the logo. so we have UFO blogger we have the site title and description. so down here and this is where if you have an experience working with HTML or PHP this would be very very useful.

if you don’t anyway complete newbie I would recommend that you make a backup of your header to the PHP file before you begin making changes. so down here where we have the age group age group I can see we have site title we have site description and down here we have site navigation. so I know that if I add some stuff in between these two blocks of code the information should show between the site description. and then the main navigation area. so what I’m going to do is right down here I’m going to open up a PHP block of code PHP. and then I’m going to use the function dynamic on the score sidebar in brackets and then in codes I am going to add the ID of the sidebar. we created which is header a semicolon and then close the PHP code. so this function dynamic sidebar is used by WordPress to display the contents of a sidebar whose ID you specify in the brackets and in codes.

so I’m going to save this now let’s take a look my heart is racing and check that out hey this is my header sidebar. so now we have told what first you always display the information the contents of the header sidebar just underneath where we have the logo just prove to you that this is actually real. let’s go back let’s come back down to our widgets again. let’s grab another widget let’s go with the archives. let’s dump that down here I just place a jump down. let’s save this. let’s go back and boom check that out we now have the archive which had been displayed in our header section. so with some CSS skills I can easily transfer this area down here to the right make it look all nice and neat but this is how to create a custom sidebar. and your WordPress website and then how to display its contents so if you are looking to display the information instead in your footer area you will typically use the photo dot PHP tablet file instead of the header.php and so on.


and so forth so I hope you have enjoyed this tutorial if you enjoyed this tutorial and you feel like hey this was really cool.

Leave a Comment