All posts in Tutorials

Adding Multiple Widgets In Your WordPress Theme

by The Web Squeeze on April 13, 2010 in Tutorials with 3 Comments

I was playing around with my WordPress theme. At the moment, I have three portions in my main page, which have the same div class; i.e div class = “box”. All of them are referring to About Me, My Service and Blog Updates. Suddenly I realize that I wanted to have something more dynamic! A theme with maximum flexibility to be exact! Then I was thinking, I should have a sidebar widget instead of a raw html hardcoded footer. Let’s see how a widget can help to solve the problem.

The WordPress theme that I have right now supports only one sidebar widget. Let me show you how you can add in more sidebar widgets into your current theme.

<div id=&quot;sidebar_widget&quot;>
    <div class=&quot;box&quot;>
        <h2>About Me</h2>
        <p>About me description here...</p>
    </div>
    <div class=&quot;box&quot;>
        <h2>My Services</h2>
        <ul>
            <li>Custom Web Design</li>
            <li>Wordpress Theme</li>
            <li>Technical Support</li>
        </ul>
    </div>
    <div class=&quot;box&quot;>
        <h2>Blog Updates</h2>
        <ul>
            <li>Writing Functions In PHP - Return Values</li>
            <li>Writing Functions In PHP - Flexibility</li>
            <li>Writing Functions In PHP - Introduction</li>
            <li>Install WordPress In Windows</li>
        </ul>
    </div>
</div>

Registering The Sidebars

I am assuming that you are familiar with the WordPress platform; otherwise you won’t end up reading this tutorial.

To begin this tutorial, firstly you need to tell WordPress how many widget(s) that you need. Navigate to your functions.php page, the one that is in your theme folder. Without much difficulty, you will see these few lines of code. If it’s difficult to find, search for the string called register_sidebars.

<?php
    if ( function_exists('register_sidebars') )
    register_sidebars(2);
?>

Once you have found them, all you need to do is change the number according to your requirement and then save the file. You can increase this number if you want to have more sidebars as long as your theme layout can accommodate it.

Now, go to your WordPress Admin section and browse to the widgets under the menu item called Appearance. You can see there are three sidebars listed there. You can drag your widget items into any of the sidebars to start using it.

Building The Sidebars

Here comes the part where we actually build the sidebars. If your theme has only one sidebar, locate the file called sidebar.php in your theme folder. If for some reason your theme has two sidebars, you should have the files called sidebar.php, sidebar1.php and sidebar2.php. So if you want to add another sidebar widget into your theme, you should duplicate either sidebar1.php or sidebar2.php and rename it as sidebar3.php.

In this tutorial, we will modify the theme by adding two more sidebars and let’s rename sidebar.php to sidebar1.php and duplicate this file and rename it as sidebar2.php. Add the code below into the widget template, sidebar2.php and save the file:

<div class=&quot;box&quot;>
    <ul>
        <?php if ( function_exists('dynamic_sidebar') &amp;&amp; dynamic_sidebar(2) ) : else : ?>
        <?php endif; ?>
    </ul>
</div>

Remember that this code, dynamic_sidebar(2) is referring to your widget template which is sidebar2.php. So for your sidebar1.php, you would call this as dynamic_sidebar(1) instead.

Just to add more flexibility to your theme, the page won’t display an empty sidebar widget if you didn’t add any widgets into your theme. Add in this default value for your widget, replacing the code above.

<div class=&quot;box&quot;>
<ul>
<?php if ( function_exists('dynamic_sidebar') &amp;&amp; dynamic_sidebar(2) ) : else : ?>

<h2>Sidebar 2</h2>
<p>This is your sidebar 2. You can drag your widget here from your WordPress admin section and browse to the widgets under the menu item called Appearance.</p>
<?php endif; ?>
</ul>
</div>

Calling The Sidebar

Now, we have the two sidebars ready but how do we call it? How do we place them in the area that we want in our page? You can call them from anywhere in your theme with this line of code;

<?php include (TEMPLATEPATH . '/sidebar1.php'); ?>

or for the second sidebar,

<?php include (TEMPLATEPATH . '/sidebar2.php'); ?>

Let’s go back to our index.php page with the current sidebar being hardcoded. Let’s update them and call this widget.

<div id=&quot;sidebar_widget&quot;>
    <?php include (TEMPLATEPATH . '/sidebar1.php'); ?>
    <?php include (TEMPLATEPATH . '/sidebar2.php'); ?>
    <?php include (TEMPLATEPATH . '/sidebar3.php'); ?>
</div>

Preview your theme. You will see your new widgets appearing on your website just the way you want it. There may be some minor issues on the div alignment and positioning. I’m sure you can easily fix that with your CSS. If you have not placed any widgets yet, you will still see the default value that we’ve created earlier. You can add more sidebars in a similar way to your WordPress theme.

I hope this tutorial is helpful and enjoy blogging.

Using Texture Layers to Enhance Your Photographs

by The Web Squeeze on April 7, 2010 in Tutorials with 1 Comment

Ready to walk through the process I went through to transform this original image:

into this one?

Finished photo

Rather than just explain the steps, I thought it would be a whole lot more fun to illustrate them.

Here is the texture I chose to use for this:

textire

After adding the layer I set it’s blend mode to Soft Light.

I felt like I didn’t want as much of the texture showing through the birds so I put a mask on the layer and painted with a soft 50% opacity black brush on the birds until I was happy with the result. The mask ended up looking like this:

Mask

After adding the masking the image looked like this:

If that’s all you wanted to do, it would be a fine place to stop. You can do a lot just adding one texture to an image. But I wanted to keep going …

I thought the whole thing could be a little punchier so I duplicated the texture layer (including the mask) and placed it on Soft Light, which pumped up the whole thing a bit:

I thought it was a little too punchy though, especially in the bottom right corner, so I added a little painting on the mask in that area, then I lowered the layer’s opacity to 58%.

At this point I wanted a little more texture in the image, so I chose this one to add on:

I changed it’s blend mode again to Soft Light:

Call my crazy, but I wanted even more texture variation, so I added this texture:

And set it’s blend mode on Soft Light:

But I felt like I didn’t want it so much in the birds so I duplicated one of my earlier layer masks on top of it:

It’s all getting a little too crazy so I wanted to bring some of the original birds back in. I duplicated the background layer and set it’s opacity to 30%:

I didn’t want to bring that realism into everything though, so I masked the layer out and painted back in with white on the areas where I wanted the original layer to show through:

Here’s how it looked at this point:

Now I wanted to bring in even more texture, this time with some varied tones and a bit of darker edges. I chose this one:

I set it’s blend mode to Soft Light with an opacity of 80%:

Things now looked a bit washed out so I did a Levels Adjustment on the entire image and darkened it up a bit:

I don’t want the darkening quite so much on the birds so I did a mask and painted on it with with a low opacity black brush:

This is what we’ve got at this point:

Now I made a copy of the background layer and put a Black and White Adjustment Layer on it:

Then I lowered that layers opacity to 50% and set it to Soft Light. This helps to increase the contrast and “pop” just a bit:

At this point I felt like things were getting a little too green, and wanted to pull it back to the blues. I applied a Hue Adjustment Layer to the whole image and then set it’s opacity to 50%:

I found one more texture I wanted to use to darken the edges a bit:

I set this layer’s blend mode to Soft Light:

I felt like it was darker on the bottom than the top so I duplicated that layer and flipped it vertically:

I changed that final layer’s blend mode to Soft Light and we’re done!

In addition to Soft Light you should experiment with the other blend modes. Multiply and Screen can be especially suitable to this work. And free textures abound on Flickr. Just type “free texture” into the search and you’ll have a lot to sift through. But please do make sure that the texture is explicitly offered free for use – we certainly don’t want to break copyright laws!

So experiment with blend modes, opacities, adjustment layers, and masks, and have fun!

To download this entire tutorial with textures and examples, click here.

Behind the Library: Javascript Events

by The Web Squeeze on March 5, 2010 in Tutorials with 7 Comments

Javascript is becoming much more accessible thanks to libraries such as jQuery & Mootools. In this article, hopefully to form part of a new series, we are going to take a look behind the libraries – not looking at the code of the libraries but revealing how much easier they make our lives.

Adding Events – Easy with Libraries!

Today we’re going to be looking at adding events. With jQuery, it’s as simple as:


$('#header').click(function() {...});

However with normal javascript it’s not so nice. As you might expect, Firefox, Safari, Chrome, Opera and similar use one set (the correct, I might add) way of doing it, whereas Internet Explorer (all of them!) use a different code. That means for each event we add, we need to write the code twice. No worries though. I’m going to show you both sets of code and then we’ll create our own function to abstract the code away and let us write one set of code which will work with every browser.

Events without the Library

Firstly, we’ll set up just a simple function which we will run when an element is clicked.


function doSomething()
 {
 alert('you clicked me!');
 }

And an element for us to select:

<h1 id=&quot;header&quot;>This is what we'll be clicking on!</h1>

Select the Element for Clicking!

So our first step (and this works in all browsers, thankfully!) we will just select the header element:


var h1 = document.getElementById('header');

Firefox, Safari, Opera, Chrome and so on.

So this is the code that all popular, modern day browsers use. It’s incredibly straight forward and is called addEventListener():


h1.addEventListener('click', doSomething, false);

The function takes 3 arguments. The first is the event – when you want the function to be run. We’ve used click, but there are countless others. The second is the function itself – we created this function earlier. Note that because we are passing the function through as an argument we don’t need to add brackets. The third is to do with javascript bubbling and when the event is fired. This is something which is a bit too complex right now, but we’ll cover it in the future!

Internet Explorer

IE’s code is pretty similar – oh Microsoft, why not just use the same as everyone else?


h1.attachEvent('onclick', doSomething);

This only takes two arguments, the event and the function to execute. Whereas with most browsers you would use ‘click’, this time it’s ‘onclick’. Simply put, add ‘on’ to any event.

If you run the respective code in the relevant browser, it will work. If you use the wrong code, check, and it wont work.

Our own Version.

So, this is a pain right? What we are going to do now is create our own function which will allow us to only write the addEvent code once, not twice. I’ll show you all the code and using the comments you should be able to see most of what is going on:


function addEvent(elem, evt, func, cap)
 {

 if(elem.attachEvent)
 {
 //if this evaluates to true, we are working with IE so we use IE's code.
 elem.attachEvent('on'+evt, func);
 } else {
 //the statement has evaluated to false, so we are not in IE/
 //the capture argument is optional. If it's left out, we set it to false:
 if(!cap) cap = false;
 //and use the normal code to add our event.
 elem.addEventListener(evt, func, cap);
 }
 }

And the usage of this is straight forward:


addEvent(h1, 'click', doSomething, false);

And We are Done

I hope you enjoyed this, it’s always good to step back from the library and write some of our own functions.