Category Archives: Tutorials

How to Easily Add WordPress Sidebars to Your Theme

As a WordPress user and developer you are likely to come a across a situation where you need to add additional custom sidebars.

Adding custom sidebars to your WordPress is relatively simple and can be achieved in a few simple steps.

Step 1 – Determine the needs

First you’ll need to determine the number of sidebars you’ll need and their function on your theme.

Step 2 – Add sidebars to theme.

Adding sidebars will require you to edit your themes functions.php file, so before beginning you should make a backup of your functions.php file.

Within the functions.php file you can register your sidebar(s) using the register_sidebar function :
* for the purposes of this blog the theme name is “Custom Theme Name” (“customthemename”)

function customthemename _widgets_init() {
register_sidebar( array(
'id'          => 'my-custom-sidebar',
'name'        => __( 'Top Menu', 'customthemename' ),
'description' => __( 'This sidebar is located above the age logo.', 'customthemename'),
) );

register_sidebar( array(
'id'          => 'my-custom-sidebar-2',
'name'        => __( Side  Menu', 'customthemename' ),
'description' => __( 'This sidebar is located on the side.', 'customthemename'),
) );

}

Using “id” you can give the sidebar a unique name, which will later be used to call the sidebar. Using “name” you can name the sidebar, the name will appear in your “Widgets” page  within your WordPress Dashboard; following the name of the sidebar is the name of the theme.
Using “description” you can set the descriptive text that will appear underneath the sidebar name in your Widgets page. (see finished example below)

Once you’ve registered the sidebar(s) within your functions.php page you can upload the revised page.

Step 3 – Add sidebars to your theme template

A. Make sure your sidebars are active within your site and page templates (index.php, page.php, etc.) using:

<?php get_sidebar();?>

B. Add your custom sidebar names (my-custom-sidebar) to your sidebar.php page.

<?php if ( is_active_sidebar( ' my-custom-sidebar ' ) ) : ?>
<div id="sidebar" class="widget-area" role="complementary">

<?php dynamic_sidebar( ' my-custom-sidebar ' ); ?>

</div>

<?php endif; ?>

Step 4 – Build your sidebar(s)

Creating custom sidebars and adding them to widgets
Once you’ve added your sidebar(s) to your theme template and pages (and uploaded to your web server) you can begin customizing the sidebars through your WordPress Dashboard.

Within your Widgets page you should now see your custom sidebars, described by the Name set  in your functions.php page.

And that’s it!

WordPress Basics 101: Creating Custom Pages

WordPress is based on the use of templates for specific purposes. There are templates for different types of situations, like a blog posting, a regular page, a 404 error or to display blog postings for a certain category. The default templates are “single.php”, “page.php”, “search.php”, “author.php”, “404.php”, “category.php”, “archive.php” and “index.php”. There is a hierarchy to all these template pages which follow an order depending on what the visitor wants to see.

Whenever you are in the WordPress admin and you’re creating or editing a page or blog post, you will see what template is currently being used:

Selecting WordPress Default Template

The “Default” will either use the “single.php” template page for posts or will use “page.php” for pages (WordPress 3.0+). You can add your own template relatively easy, below are the steps to creating a custom template.

  1. Create a template file
  2. Customize your template file
  3. Apply your template to the desired page

Continue reading

Tutorials: Backgrounds with CSS

Single Image Background

How is the best way to apply a single image as a background using CSS?

You can apply a single image background to any tag that is capable, such as divs, tables, etc using CSS. This example will show how to apply a single image background to the entire page. The best way apply the background is to use the body tag, making the body or background the first “layer” in your design.

Continue reading

Tutorial: Creating Custom Link Colors

This tutorial will focus on creating custom link colors that can be applied to any web browser using CSS.  Be default, the link color on most browsers is blue and the visited link color is violet.

Not only can you determine the unvisited link color and visited link colors but also the “hover” color and the “active” color (when you click on the link).

CSS will allow you to supersede the current browsers default link colors by using the “a” property and using the following attributes: link, visited, hover, and active.

Here is what the four declarations look like:

a:link {}
a:visited{}
a:hover{}
a:active{}

The four declarations can be applied to a page, tag, class or ID.  You can even apply declarations to the entire site when using the same external style sheet on every page.

Applying Link Properties to a Specific Page

There are several ways to apply link properties to a specific page using CSS. The simplest form of applying the properties is to use the ‘body’ tag with the link declarations. Below is an example.

body a:link {color:green}

This will make all links in the page green.  This would be applied using the “Embedded” and “External” type of CSS application.

To add all four of the link declarations using the body tag, it would look like the following:

body a:link {color:green}
body a:visited {color:black}
body a:hover {color:red}
body a:active {color:blue}

If you wanted to apply the same color property to all four declarations, the simplest way to apply them would be the following:

body a:link, body a:visited, body a:hover, body a:active {color:green}

To simply that even further, you can apply the following:

body a {color:green}

The body tag also allows you to also apply link properties using an inline style declaration. The body tag has three built in properties for links: link, vlink and alink. Below is an example of a link property applied to the body tag.

<body link=”green”>

Applying Link Properties to a Tag, Class or ID

The link properties can be applied to any tag, class or ID similarly like the body tag. Link properties can be applied using external or embedded styles only.

Applying it to Tag

Below is how to apply link properties to various tags:

h1 a:link {color:green}
h1 a:hover {color:blue}
p a:hover {color:blue}
p a:link {color:green}

Like the body tag, if you wanted to apply the same property to all four declarations, the simplest way to apply them would be the following:

p a:link, p a:visited, p a:hover, p a:active {color:green)

To simply that even further, you can apply the following:

p a {color:green}

Applying it to a Class

Below is how to apply link properties to a class called “menubar”:

.menubar a:link {color:green}
.menubar a:visited {color:blue}
.menubar a:hover {color:red}
.menubar a:active {color:black}

Like any other tag or ID, if you wanted to apply the same color property to all four declarations, the simplest way to apply them would be the following:

.menubar a:link,.menubar a:visited,.menubar a:hover,.menubar a:active {color:green}

To simply that even further, you can apply the following:

.menubar a {color:green}

Applying it to an ID

Below is how to apply link properties to a class called “footer”:

#footer a:link {color:green}
#footer a:visited {color:blue}
#footer a:hover {color:red}
#footer a:active {color:black}

Like any other tag or class, if you wanted to apply the same color property to all four declarations, the simplest way to apply them would be the following:

#footer a:link,#footer a:visited,#footer a:hover,#footer a:active {color:green}

To simply that even further, you can apply the following:

#footer a {color:green}

Underline Link Properties

Another default style that browsers apply is the “underline” property to any link. This is part of the “text-decoration” property. You can attach a “text-decoration” property to any “link” related property. To remove this underline property from a class for example, the following declaration would be used:

.class a:link {
color:blue;
text-decoration:none;
}