How To Bend WordPress To Your Will: Add A Widget
Have you chosen a theme? No? Is it because you have not found one that is just how you want it? There may be something we can do about that. Changes to colors, fonts, widgets, even custom menus are all possible in WordPress. You can bend WordPress to your will. Word of warning: with great power comes great opportunity to really mess things up. Please, please, please never work on a live site. By all means, try stuff, test stuff, throw out the box entirely, just do it in a testing environment. Otherwise, there is enormous risk bringing down a live site, and that could be disastrous.
One more thing: Work in a child theme. Really. It would be a shame to do all of this beautiful work lose it with the next update of the theme.
Now, let’s do something fun.
The Benefits of Open Source
The reason the WordPress CMS is available free is that thousands of folks are contributing to it every day, and sharing that code freely. Yes, there are premium plugins and themes, and there are times that those really are the best solution. But we can get a lot done and can get many things we want with just a few changes to the code. Many of those have already been figured out for us and are widely available. The best source is the Codex on wordpress.org, “ the online manual for WordPress and a living repository for WordPress information and documentation.” Yep, it’s right there on the internet, for everyone to see. Additionally, there is a wealth of repositories, blog posts, and little code snippets in countless posts on stackoverflow.com and codepen.io, and many other sites, all intended to be shared and used. For this example, we will use code from the WordPress Codex.
Add a Widget to a Sidebar
Let’s say we want to add a widget to the sidebar section of our website. First, we have to add some code to the functions.php file of our theme. Although you can work in the editor on the admin side, it’s a best practice to open the file in a code editor, make the changes, and then save/FTP to the site. That way, if there is a mistake, we can correct it and re-upload right away. We will add the code right at the bottom.
[php]/**
* Register our sidebars and widgetized areas.
*
*/
function arphabet_widgets_init() {
register_sidebar( array(
‘name’ => ‘Home right sidebar’,
‘id’ => ‘home_right_1’,
‘before_widget’ => ‘
<div>’,
‘after_widget’ => ‘</div>
‘,
‘before_title’ => ‘
<h2 class="rounded">’,
‘after_title’ => ‘</h2>
‘,
) );
}
add_action( ‘widgets_init’, ‘arphabet_widgets_init’ );[/php]
(Note: this is why we use a child theme. The next time the parent theme gets updated, the functions.php file will be replaced, and all of our hard work will be lost. But if we work in a child theme the functions.php file of the child theme will not be affected.)
Now in the Appearance section, we will see a widget called Home Right Sidebar, but will not see it in the Widget portion of the Admin screen. We have to tell WordPress to show it. So we will open up the sidebar.php file an put the following code where we want the widget to be:
[php]<?php if ( is_active_sidebar( ‘home_right_1’ ) ) : ?>
<div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">
<?php dynamic_sidebar( ‘home_right_1’ ); ?>
</div>
<!– #primary-sidebar –>
<?php endif; ?>[/php]
This code will add the widget Home Right Sidebar to the list of available widgets in the Admin screen, and we can now start adding content. Neat, huh?
Of course, not everyone is interested in doing this much work with code, even if the motivation for having another widget area is substantial. That’s okay. Blue Orchid Web Development exists to do these kinds of modifications. Contact us today to talk about how we can bend WordPress to your will.