Create a tab in the sidebar without WordPress Plugin

Hello guys. Remember, I told you I was going to talk about how you can make tabs (tabs) on the site WordPress. So today, I’ll tell you about how you can make a tab in the sidebar (sidebar, sidebar) WordPress. I use these tabs to fit on your subscription them on social networks.I have already told how to add to the site WordPress widget FaceBook community.

These tabs are very convenient because they can be used not only for the subscriptions, but also for such purposes, as well as other necessary data.These tabs only save space on your site.

Well, let’s get started.First, I created a separate file in the folder with the theme, which he called subscribe.php.Actually in this file will be located and our tabs, and each tab in the required subscription.To have the tabs work, we use the script JQuery – jquery-1.7.1.min.js.You download it, create a folder with the theme – the directory that I called thelibraryand there are uploadinga file jquery-1.7.1.min.js.Not necessarily act my actions, you can put in any folder or to any other place, then you just have to change the path.

WordPress

WordPress

Now open the file header.php file or the one where you have a tag <head>.Usually this file header.php.In this file, we will connect the above JQuery-script.So, download the header.php, open it and immediately after the tag <head> insert the line:

<scripttype=”text / javascript”src=”<? PHP bloginfo (‘template_directory’);?>/ library/jquery-1.7.1.min.js “></script>

Here, everything is clear, I have a way where is my theme with the help of = »<? Php bloginfo (‘template_directory’);?> (Here will automatically add the path to the theme), and then I have a lib folder and the script itself.As I said above, the path to the script can be changed to either.Save and replace the file on the FTP.

To our tabs were beautiful (tabs), you must open your style.css file and paste the following code design css-tabs:

ul. tabs{margin:0 0A: hover{background:# FFF;Color:# 000;border-bottom:# FFF1pxSolid;}HTMLul. tabsLi. activeA,HTML ul. tabsLi. activeA: hover{Color:# 000;}

With this code, the tab will be normal white.
You can edit this code on your own and style,usability of the site.Go ahead.Open the file subscribe.php and paste the following code:

<ulclass=”tabs”><Li> <A rel=”nofollow”href=”# tab1″>Vkontakte</A> </Li><Li> <A rel=”nofollow”href=”# tab2″>Twitter</A> </Li><Li> <A rel=”nofollow”href=”# tab3″>FaceBook</A> </Li></ul> <divclass=”tab_container”> <div ID=”tab1″class=”tab_content”>VALUE first tab</div> <div ID=”tab2″class=”tab_content”>IMPORTANCE OF TWO TABS</div> <div ID=”tab3″class=”tab_content”>The value of the third tab</div> </div>

In each tab you insert the value.And these tabs you can create any number, just put down the numbering necessary for you.Save the file subscribe.php. We still have to connect it to the right place.In my case, I connected it to the sidebar, you can do it at any other place.This is easily done:

<? PHPinclude(templatePath.’/ subcribe.php’);?>

Although the code from the file subscribe.php You can immediately insert into the file sidebar.php, or else by means of the widget text.As you can see, nothing complicated about it, and most importantly, it turns out as nice and simple, good luck to you dear friends, if that is not clear, then ask, be sure to help you.

Leave a Reply