The orginal question was regarding customizing the WordPress sidebar, which went a little deeper into creating a custom template in WordPress and customizing the sidebar for that custom WordPress template.
You will need to download your index.php, header.php and style.css WordPress files from your web host because you will be making copies of these WordPress files and modifying each of them to be used for your custom WordPress template page ONLY.
1) Make a copy of your WordPress Theme index.php template file and call it something like store.php.
2) Make a copy of your WordPress Theme header.php template file and call it something like storeheader.php
3) Make a copy of your WordPress Theme style.css file and call it something like storestyle.css.
Modifying your new custom WordPress template file called store.php
At the very top of your new custom template file (store.php) you should see this PHP code.
<?php get_header(); ?>
You will need to replace the code above with this new code shown below (you can of course call your Template whatever you want, for this example my template name is Store):
<?php
/*
Template Name: Store
*/
?>
<?php include( TEMPLATEPATH . ‘/storeheader.php’ ); ?>
That is all there is to creating a custom WordPress template file.
Now in the code above you see that I am telling my new custom store template to include the custom store template header file called storeheader.php instead of the default header file (header.php) used for the rest of your WordPress website. The reason you need a custom header file for your new custom store template is that the default WordPress header file contains the code that displays your WordPress sidebar when any of your pages are loaded (opened). I don’t want to confuse you so this is in laymans terms with some code examples too. So basically you are just going to block the code that loads your WordPress sidebar in your new custom WordPress header file that you created called storeheader.php.
Modifying your new custom WordPress header file called storeheader.php:
In my WordPress Theme default header file I have this code shown below (your Theme’s div tags (div names) may be similar or they may be totally different, but most likely they will be similar):
My default header.php code unmodified
<div id="main">
<div id="main_left">
<div id="block_sidebar">
<?php get_sidebar();?>
</div>
</div>
My new modified code in my new storeheader.php file. All I did here was block the div tags called main_left and block_sidebar from loading and also blocked the php get code from loading the sidebar. To block the code lines from being loaded your use <!– at the beginning of the code you want to block and –> at the end of the code you want to block. The keyboard characters or symbols used are the less than and greater than symbols, an exclamation mark and dashes (2 dashes).
New modified code in my new storeheader.php file (the get sidebar code is in the index.php template for your theme, which is the Thistle WordPress Theme – also you do not have main, main_left and block_sidebar div code)
<div id="main">
<!-- <div id="main_left">
<div id="block_sidebar">
<?php get_sidebar();?>
</div>
</div> -->
*** Be careful not to block any other template code that you want to load between the <!– and –> symbols / characters.
The other line of code you need to modify in your new storeheader.php file is the line of code that points to your store’s style CSS file. Since you will have a custom style file called storestyle.css that ONLY your custom WordPress store template page will be using you need to change this line of code.
My default header.php code unmodified
<link href="<?php echo bloginfo('stylesheet_directory'); ?>/style.css" rel="stylesheet" type="text/css" />
New modified code in my new storeheader.php file (you are just changing style.css to storestyle.css)
<link href="<?php echo bloginfo('stylesheet_directory'); ?>/storestyle.css" rel="stylesheet" type="text/css" />
Ok so now your store template page will load your store header file and the store header file will use the store style sheet when it loads. So now you just need to make whatever style changes you want in your new storestyle.css file that you created.
My default style.css unmodified. My main body text area for my WordPress website is 615 pixels wide.
#main_right{width:615px;float:left;bac…
My storestyle.css is using the entire width of my WordPress website, which happens to be 900 pixels wide.
#main_right{width:900px;float:left;bac…
Your using the Thistle WordPress theme so your specific css divs and classes are different
#content, .post, .post-content....
Once you have created your custom WordPress template you will need to choose the custom template you just created from within WordPress when you are creating the actual sales / store page. When you create a new page you will see a template drop down list box (located on the right side under Attributes or something similar) that you will use to select the custom template that you just created. You should see your new WordPress custom template name listed in the drop down list if you created your custom template correctly. Good luck.
Tags: Custom WordPress Sidebar, Custom WordPress Template Sidebar
Categories: Wordpress Tips - Tricks - Fixes
How to add (Embed) an Custom PHP Quick Contact Form in Sidebar.
If you are looking for a sidebar form then check out the cforms plugin. It is the ulitimate form plugin and sidebar forms are just one of the many things you can add with just a few clicks.
Great article! Very thorough description of creating a custom template with sidebars. Once you’ve created your template – you could also create a custom sidebar for each of your individual posts or pages using the Graceful Sidebar Plugin. This plugin allows you to customize the sidebar content area for each page or post individually.
Enjoy and thanks!
Mike