Simple way of creating Widgets in WordPress

0 replies
  • WEB DESIGN
  • |
Hey everyone,

I'm a Web Designer and I create a lot of custom WordPress sites for my clients. There have been a lot of requests lately that I've been noticing with widgets in general. The way I create widgets for my clients is so they could edit it once and have it appear in multiple places at once. One of the examples you can look at is the following site that I've developing right now:

Bill Moore Ministries

As you can tell when you load the page, there are 4 boxes on the front cover that contain information. When you visit any of the links on the top, you'll notice the same widgets however they are displayed a bit different. This is all dynamically pulled from 4 custom widgets that I created and I'll explain how it's done so you don't have to hire anyone to do something like this.

What I'm not going to do, is go into depth as far as how to customize the display using CSS. If you need any help with that, you can PM me or ask a question and I'll assist you on a case by case.

The first thing that you want to do is open your functions.php file through Appearance => Editor or locally if you edit via FTP. The following code is what will create the widget section under Appearance => Widgets

Functions.php
Code:
if ( function_exists('register_sidebar') ) {
	register_sidebar(array(
	'name' => 'Slideshow',
	  'before_widget' => '<div class="header">',
	  'after_widget' => '</div>',
	  'before_title' => '<div class="shadow_header">',
	  'after_title' => '</div>',
	));
}
HTML
Code:
		<div id="header">
			<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Slideshow") ) : ?>
				<div class="slideshow_home">
					
				</div>
			<?php endif; ?>
		</div>
The 'name' => 'Slideshow' line is important if you are going to create more than 1 custom widet. What's after the arrow, is what will show on the right section of Appearance => Widgets. You can open this section and add any available widget.

The before and after_widget div's within function.php gives you startng and ending div for your widget. This can also be classified as a container type of div.

The before and after_title div's within functions.php specifies which div you want the title of the widget to be displayed. In my example I created a function for a jQuery slideshow, so I just set the class of shadow_header to display:none; so the title of the widget doesn't show at all.

That's the basics of functions.php, and is really all you need to create the widget. If you look at the HTML code example, you'll notice how you need to name it, and where you specify the name of the function for your widget (if you have multiple ones).

In the case of the URL that I listed, there are 4 widgets, and using CSS they are displayed both horizontally and vertically (on sub pages). I have used 3 text widget and 1 recent post to display what I need throughout the site. The client simply edits the content within the HTML code that I inserted into the text widget and it's upated.

Hopefully this helps someone at least a little, a thanks would be appreciated
#creating #simple #widgets #wordpress

Trending Topics