So let's start with creating a custom widget area for our WordPress blog. Note that for the purpose of this tutorial, I have used the Magazine Child theme provided by StudioPress. But this method will work on any Genesis child theme. So if you are ready with your Genesis framework and theme then let's get started, shall we?
Creating Custom Widget Areas in Genesis
Registering a widget area
The first thing you'll have to do is register a custom widget area. This is like declaring and initializing an array (if you have some basic programming knowledge), or building the necessary structure before putting into place (layman terms). This process is called 'Registering a widget area'.
.png)
Here's the code to do it. You can add this code to the functions.php file inside your theme folder.
genesis_register_sidebar ( array (
'id' => 'cwa1-after-post',
'name' => __( 'Custom Widget Area 1 - After Post', 'mg' ),
'description' => __( 'This is a custom widget area, and it can be placed after the post', 'mg' ),
)
);
As you can see, there are three fields in the registration array. ID, name and description. The ID MUST be unique for each custom widget area! Try to avoid any duplicate IDs. That's why it might be a good idea to prefix the ID with a unique identifier, such as cwa1 in the above case (short for Custom Widget Area 1). ID cannot contain upper-case or special letters. No spaces either.
The name can be same, but it's best to use a different name each time to avoid any confusion. You can see a second string in the name field that says 'mg'. This should be your theme name, although there' no compulsion. It's a good practice to keep track of which theme you are applying a widget area to. In this case, the 'mg' stands for the 'Magazine' theme I am currently using. You can type in anything.
The same goes for description. There's a description string, and then there's a theme name string. This should be the same name you put inside the name field.
Adding a widget area
Now that you've created a widget area, how do you apply it? We'll make use of hooks here to hook into specific portions of our site, and inject our code to make this widget area work. To do this, open up your functions.php file again, and add the following code to add an action for the widget area.
add_action( 'genesis_before_loop', 'mg_cwa1_genesis' );
function mg_cwa1_genesis() {
if (is_home () ) {
genesis_widget_area( 'cwa1-after-post', array(
'before' => '<div id="cwa1"><div class="wrap_cwa1">',
'after' => '</div></div>',
) );
}
}
In the above code, we've added a function for our widget area, and hooked it with an action hook. Inside the 'add_action' function, the 'genesis_before_loop' is the hook, and 'mg_cwa1_genesis' is the name of my function I want to hook into 'genesis_before_loop'. Note that you can change the function name, but not the hook. Hooks are pre-defined, and you can hook into one of the many available hooks for Genesis and WordPress. Check a list of Genesis Hooks here.
The function 'mg_cwa1_genesis' contains a condition that would display the widget only if it's the homepage. Inside the function, we are adding our custom-made widget area by calling it by id 'cwa1-after-post'. Make sure you get it right, or the custom widget area won't work. We are also setting the styling for our widget area. cwa1 and cwa1_wrap are id and class identifiers for use with CSS styling.
Note that you can modify the text in bold.
Did you find this helpful? If not, and if you feel yourself completely lost, then feel free to ask us questions if necessary. Looking forward to hearing from you guys. Cheers :)
If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »
Really nice Qasim brother ... Thanks
ReplyDelete