All posts tagged Wordpress

Portfolios can be very hard to create when you don’t have inspiration or are just beginning in the web design field. In this tutorial you will be exposed to simple techniques as well as a few more complex skills. When you’ve completed the tutorial your new layout will look like this:

Enjoy!

Step 1

Create a new document (w)1360px x (h)1900px background #ffffff
Note: To turn on your ruler and guide lines you must first go to View>>ruler and that turns on your ruler. To turn on your guide lines press CTRL + ; or CMD + ;

Step 2

Now drag the left guide line to the 200px line and on right drag it to the 1160px mark. There should be 200px of space on both sides leaving 960px in between.

Step 3

Select the rectangle tool color #00000 and create a rectangle box about 50px in height at the top of your canvas.
Note: The blue lines that are horizontal are 1px solid #00cef3.

Step 4

Now Select the type tool color:#00cef3, font: steiner, size: 54px, and create a name for your website. I’ve chosen Abstrolio.

Step 5

Select the custom shape tool panel and choose any symbol for your logo. I’ve chosen the seal custom shape. After you’ve gotten your custom shape, right click on the shape layer>>blending options. Select gradient and double click on the gradient bar. Left color:#00cef3, right color:#7cf4ff then press ok. Now select the type tool and add one letter to your logo symbol.

Step 6

Select the type tool font: veranda, size:14px, color:#fff and create your menu links. The most common portfolio links are Home, About, Services, Portfolio and Contact. After you have your menu links created select the rounded rectangle tool color:#00cef3 and create a rectangle behind the home word (for hover purposes). Then highlight just the home text and change the color to #000000.

Step 7

Next we will be creating our full width page slider. Grab any image you would like and create a full width slider for your portfolio layout. The height of the image should be 400px x 1360px wide.

Step 8

Select the type tool font: steiner, size: 24px, and align text center, then create a brief description about your company or service.

Step 9

Now we’re going to create a press effect with the line tool. Select the line tool 1px color:#eaeaea and create a 1px line across the document right under your brief description. Then create a new 1px line color:#fffff right directly under your first line and that should give you a press effect.

Step 10

Select the type tool font: steiner, size: 24px, and create one of the headings for your portfolio. Then select the type tool again. Change the font to arial and the size to 13px and create
dummy text for your paragraph. I usually just use lorem ispum.

Step 11

Now select the rounded rectangle tool color:#00cef3 and create a small rectangle. Then create a read more text color:#ffffff over your button.

Step 12

Now add your heading, paragraph and button to a group and duplicate the group 2 times. Then change the other 2 headings.

Step 13

Earlier in this tutorial we created a 2px press effect. Copy and duplicate that layer and drag it under your headings. It will all be one line but if you select the eraser tool and erase the space in
between, each heading press effect will be separated.

Step 14

Now select the rectangle tool color:#000000 and create a rectangle box; height 850px to hold our portfolio items and text. There should be white space below the portfolio container.

Step 15

Select the type tool font: steiner, size: 24px, color:#ffffff and create the portfolio title and then create a another brief description that describes your service.

Step 16

Next we’re going to create our portfolio items. We’re going to have 3 items per row with 10px to the left and between each item. The height of the box is 300px and the width of it is 310px.

Step 17

Now add some portfolio items to your portfolio section.

Step 18

Select the type tool (Click and hold to bring up single line text) font:arial, size:13px, and create your copyright text. Then hit your spacebar and to the right create the top text. Now you’re finished
and should have a nice portfolio layout.

If you would like to download the .psd file for this tutorial, click here.

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.