Create Widget for WordPress Control Visibility

Create Widget for WordPress Control Visibility

Welcome to the tutorial on “Create Widget for WordPress Control Visibility”. In this tutorial you will learn what it takes to create a widget in WordPress then control its visibility based upon;

• Category
• Author
• Tag
• Date
• or Page

You can get all this information at WordPress Codex for Widgets page. Even though there are a lot of tutorials out there on this subject I thought WordPress enthusiast needed a simple solution for this task. Here we go!

Setting up the functions file for widgets

Finding the Functions.php file

The first thing we will do is go to our functions.php file in our current WordPress theme. You can get there from your dashboard by going to “Appearance” then “Editor”. Scroll down to where it says “Theme Functions” on the right hand side. Click on that and all your functions for your theme will appear in the box editor.  Click inside that box and copy that entire code. Paste that code in your notepad or test editor and save it to your desktop somewhere just in case something goes wrong.

Finding the widget function for sidebars

Now scroll on down to where it says ” register_sidebar( array( “. Here you will see the name  of the widget its ID and a descriptions of where it is located.

If you were to go to “Appearance” then “Widgets” you can see where this information comes into view within the widgets.

You will see your other widgets there too in your functions.php file. You can change that information if you wish but to not remove any quotes or code information because that is how it is called in php. I have highlighted below that things that you can change safely without messing up your website. Where it says twentyfourteen in the graphic below is the name of your theme and is part of the function. Yours will say something different to match your theme.

Creating a sidebar widget that matches your theme

To create another widget what you would do is highlight everything from “register_sidebar” down to the double parentheses ”  )); “. Then right click and copy. Its important that you use only the code in your theme. If you use the code example below remember that it only works for twentyfouteen.

[code]
register_sidebar( array(
‘name’ => __( ‘Primary Sidebar’, ‘twentyfourteen’ ),
‘id’ => ‘sidebar-1’,
‘description’ => __( ‘Main sidebar that appears on the left.’, ‘twentyfourteen’ ),
‘before_widget’ => ‘<aside id="%1$s" class="widget %2$s">’,
‘after_widget’ => ‘</aside>’,
‘before_title’ => ‘<h1 class="widget-title">’,
‘after_title’ => ‘</h1>’,
) );[/code]

Now that you have the code pasts it in a notepad or text editor like notepad plus plus.  Then edit the parts that I highlighted below.

Lets go over what these parts mean.

• ‘name’ – This is the name that will appear in the widget section on the dashboard. Name it whatever you want but try to be descriptive.
• ‘id’ – Give this a short name, if you were going to put this in a footer call it something like sidebar-4. This is important because we will use this ID to place the widget on our front end.
• ‘description’ – Give a brief description of where this particular widget will appear on the front end of the site.
• Leave the rest alone unless you know what your doing. Yours may be different than mine is here so don’t worry.

Putting in an additional sidebar widget

Now that you have your code edited it is important where you place it. Below is a large graphic of all the code for the widgets that appear on the front end of your website. I put a green check-mark where you can paste your new code for your widget. IMPORTANT follow these instructions carefully.

1. Place your cursor in an area where you see one of the green arrows. Again your may appear a little difference but will have the same code structure.
2. Hit enter on your keyboard to create a new line to place the code.
3. Right click and paste in your code.
4. It cannot be inside any other widget.
5. It cannot be before the first red circle.
6. It cannot be after the last red circle.
7. Click “Update File”

If you have done this right you will be able to see your new widget in the dashboard.

Placing your widget on the front end of the website

Now that we have our function active and it is in the dashboard we have to make a place for the widget to appear on the front end of the website. For this to happen we have to create another PHP file. And upload it to the site in our themes. If you need help with this I can walk you though it by booking an online tutorial.  You can do this with filezilla and notepad++. You can also do this in your file manager in your cPanel.

Create a PHP file in your theme folder and call it sidebar-custom.php. Put the following code inside this PHP file.

[code]<!–?<span class="hiddenSpellError" pre=""–>php
/**
* The Custom Sidebar
*/
if ( ! is_active_sidebar( ‘sidebar-4’ ) ) {
return;
}
?>
<div id="custom-sidebar" class="custom-sidebar widget-area" role="complementary">
<!–?<span class="hiddenSpellError" pre=""–>php dynamic_sidebar( ‘sidebar-4’ ); ?>
</div><!– #custom-sidebar –>
[/code]

Now upload the sidebar-custom.php file to your server we can proceed with the next steps. Notice we are using sidebar-4 the id to target this sidebar widget. Notice we have a new div and class for this sidebar called “custom-sidebar”. We did this so the CSS does not mess up our position.

Choose a Location

Now we need to choose a location where we want the widget to appear. This can be anywhere in your website however we are going to use the single.php file. The single.php file is the file that is called for the posts that are made in WordPress. They are part of the blog feature on WordPress. In the graphic below is where you make content for the posts.

You will do NOTHING inside the dashboard to make the widget show you have to open the single.php file in a code editor and place the code below in it to make it work.

[code]<?php get_sidebar(‘custom’ ); ?>[/code]

Now if you have a bunch of php code you would leave off the because php is already being declared at the start and end. Here is an example of my single.php code. I did not have to put behind the code because the whole file is declaring PHP.

[code]

<?php
/**
* The Template for displaying all single posts
*
* @package WordPress
* @subpackage Twenty_Fourteen
* @since Twenty Fourteen 1.0
*/

get_header(); ?>

<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<?php
// Start the Loop.
while ( have_posts() ) : the_post();

/*
* Include the post format-specific template for the content. If you want to
* use this in a child theme, then include a file called called content-___.php
* (where ___ is the post format) and that will be used instead.
*/
get_template_part( ‘content’, get_post_format() );
//HERE IS MY CUSTOM SIDEBAR FOR MY WIDGET
get_sidebar( ‘custom’ );

// Previous/next post navigation.
twentyfourteen_post_nav();

// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) {
comments_template();
}
endwhile;
?>
</div><!– #content –>
</div><!– #primary –>

<?php
get_sidebar( ‘content’ );
get_sidebar();
get_footer();[/code]

Displaying widgets on certain pages, posts, categories, tags and more

Sometimes we do not want our widgets to show up on certain pages or posts. In the Jetpack plugin  we can choose to enable this option.  Install Jetpack in the plugin directory if you do not have it. Then look for the icon “Widget Visibility”  and activate it.

When you go to insert a widget in your dashboard you can choose display options by:

• Category
• Author
• Tag
• Date
• or Page

The options are “show” or “hide” this widget if its on one of the billeted items above. Then it will give you another list to choose from so you can select where exactly you want this widget to appear.