I recently started looking into WordPress Widgets which allow people to customize their WordPress web site or blog without knowing any HTML. Widgets allow WordPress users to simply “drag and drop” features in their sidebars. Sound interesting?
A basic overview on how to get widgets working on your site:
- Download the Widgets plugin for WordPress
- Read the README file to figure out where to put the files that you just downloaded
- Within the WordPress Admin, activate the Widgets plugin
- If you are using a custom theme, make sure you have the functions.php file in your directory with the following code:
, otherwise you should have moved over the functions.php file that was included with the widgets plugin download to use with the classic or default theme.
- Within your sidebar code (either in the sidebar.php file or within your template file) add:
at the beginning of your sidebar code (assuming you are using sidebar.php) then at the end
In between those two PHP statements, you can put any default code that you would like to display if you decide not to use the widgets for the sidebar.
That is it for the basic set up. You can then log into the WordPress admin and under “Presentation”, you will see “Sidebar Widgets” as an option to choose in the menu. If you want to add/delete/edit your sidebar, you can now just drag and drop widget “blocks” in the sidebar window. If you want the calendar at the top, followed by your link list, followed by an RSS feed, drag all those options in. If you decide that you really want the RSS feed at the top, just drag it to the top of the list. This is quite cool (and easy)!
Advanced Widget Customization:
In most sites that I have worked on, there are more than one sidebars…and ideally I would like to make all of them use widgets because it is so darn cool and easy. If I want two sidebars, I would go into the functions.php file and instead of using:
I would use:
'Sidebar 1', 'before_widget' => '<div class="side-c %2$s">', // Removes <li> 'after_widget' => '</div>', // Removes </li> 'before_title' => '<h3>', // Replaces <h2> 'after_title' => '</h3>', // Replaces </h2> )); register_sidebar(array('name'=>'Sidebar 2', 'before_widget' => '<div class="side-c %2$s">', // Removes <li> 'after_widget' => ' </div>', // Removes </li> 'before_title' => '<h3>', // Replaces <h2> 'after_title' => '</h3>', // Replaces </h2> )); ?>
Ok, that does a little more than just giving me the option to have two sidebars. The code above allows me to name the sidebars (I named mine “Sidebar 1” and “Sidebar 2”. The code also allows me to remove the list code that the sidebar generally uses (and I do not) as well as allows me to replace h2 tag with something else (in this case the h3 tag). You can also customize the div classes and IDs in the example above. Now in your Sidebar Widget Admin page, you can drag and drop widgets on both Sidebars. **If you would like more than two sidebars, just use the code above to duplicate new Sidebars…just make sure they are have unique names. The only thing you will need to do now is duplicate the sidebar.php file so you can call in the second sidebar. For example sake, I duplicated sidebar.php and named it sidebar2.php and the only code I changed in the sidebar files (when using more than one sidebar) is this line:
. Then, sidebar2.php would have that same line, except I would change the title from “Sidebar 1” to “Sidebar 2”. Finally, in the template, I would use the use the WordPress code to call in Sidebar 1 by using
and then elsewhere in the template I would use
to call in the second sidebar.
**Please note that I have placed spaces between the opening “<" and the tag name so it would appear in the text.
I was recently asked how to clone the SmartSection module for XOOPS, so I thought I would document the process here on my blog. (XOOPS is another favorite CMS I use for my clients when they want a CMS)
- Download SmartSection (http://smartfactory.ca/
- Duplicate the smartsection module folder (this is the folder with all the module files in it – the folder you will put into the “modules” directory within your XOOPS install)
- Now it is time to do a few “find and replaces” with your favorite text editor. (I prefer TextWrangler) For the sake of an example, I am going to name my cloned version of the SmartSection module SmartJappler. Within the entire duplicated folder, find and replace every instance of the following with the name of your newly cloned module. **Make sure you are replacing every instance in all the files**
- Find: smartsection and replace it with smartjappler (your module name here)
- Find: SMARTSECTION and replace it with SMARTJAPPLER (your module name here)
- Find: SmartSection and replace it with SmartJappler (your module name here)
- Find: Smart Section and replace it with Smart Jappler (your module name here)
- Find: SSECTION and replace it with SJAPPLER (your module name here)
- Find: Smartsection and replace it with Smartjappler (your module name here)
- You also need to change the template file names in your duplicated folder to match your cloned module name. In the SmartJappler (or whatever you renamed the module) find the /templates/ folder and rename all files that have “smartsection” in the file name to “smartjappler” (or whatever you renamed the module). **Make sure all files in /templates/ and /templates/blocks/ have the new file names. (ex. smartsection_rss.html would be renamed to smartjappler.html)
- Last but not least, you will need to do one more find and replace within one file: /sql/mysql.sql. Again, with your favorite text editor, find all instances of: smartsection_ and replace it with the name of your module. In my case I would replace it with smartjappler_.
Once you have completed these steps, upload the duplicated folder (now your cloned module) and install it though the XOOPS Admin panel. Questions, comments? Let me know!
I was recently asked to recommend and comment on some good CSS practices for a client and I thought I would pass some of them.
- Use a table of contents. I always start my stylesheet(s) with a table of contents so I can easily locate particular styles in the future. I would recommend breaking your stylesheet into a few main areas like: header, main content, navigation, footer. The more sections you put in, the easier it is to read and edit at a later date.
- Use a table of contents. If you notice your stylesheet is getting out of control (over 1,000 lines) consider using multiple style sheets. You could have one master style sheet, another for forms, another for specific pages, etc. You would then either link to a stylesheet that would have links to all the styleheets using
@importor you could call in the stylesheets on a page by page basis statically or dynamically.
- Start with a known, debugged code if possible. I have a library of layouts that I use when beginning a new project that I know work in multiple platforms on multiple browsers. I will be publishing these as soon as I have some free time.
- Do not rely on CSS hacks, unless it is a last resort. Believe it or not, most things can be done with CSS code that will validate. As soon as you rely on hacks, your code becomes unpredictable with new browser releases. Stick to valid code that you know will work with past and future builds of browsers. There are a lot of hacks out there which seem like a quick and easy fix, but you will pay for it down the road.
I hope this helps! CSS is a little tricky and sometimes very frustrating, but in the end…clean code is very rewarding.
We have recently updated our portfolio and made it available. All of our recent web development work is now available for visitors and potential customers to look at.
I have been creating more CMS web site solutions using WordPress over the last year and and have collected some great resources along solid product right out of the box, it is highly configurable, there are endless plugins, and everything is well documented. So, if you are ever looking to build a web site using WordPress and want to do it for yourself I would recommend using:
Please update your address books, Sandbox Development and Consulting Inc. now has a new phone number: 847.348.0428.
We are happy to announce we now offer network monitoring services to clients who demand high availability of their servers and networks.
With increasing hosting demands, Sandbox Development and Consulting has decided to partner with Liquid Web for all our hosting needs.