Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

July 25 2013

12:00

Designer’s Basic Toolset: 10 Awesome Freebies


  

Every project is different, yet somehow the same. The latter makes it harder over time to fuel your creativity anew each time a client demands it. Things start to resemble more and more, the longer your designer’s career endures. This is because you are living in the boundaries of your own mindset. Of course you know that and have initiated strategies against it, e.g. surfing other websites for inspiration. Scribbling around on a piece of paper is another alternative. If you are more on the shirtsleeved side of things (read: like me), you will most probably look into collections of freebies. I do frequently, regularly, always…

March 25 2013

08:00

How To Create a WordPress Custom Page Template

Creating a WordPress theme to accommodate your website design concept becomes so much easier when you know about things like Custom Page Templates. WordPress operates using posts and pages, but every page doesn’t have to be cookie-cut from the same format. You can create unique layouts and content for specific pages to create visually interesting sites that are still editable via WordPress’ powerful publishing tools.

What is a custom page template?

WordPress custom page templates are theme files that provide an alternative to the default page.php file. These custom templates can contain whatever HTML and template tags you wish to build your desired layout or content, then the file can be attached to a specific page in order for WordPress to use this new template when serving that particular page of the site.

Common uses for custom page templates are to create unique page layouts for about pages, testimonials or services; an eye-catching portfolio with an array of clickable thumbnails; or a clever about or contact page with features embedded directly to the template in code. If you need to configure your page layout beyond what is available in the default page.php file, a custom page template is what you need.

How to create a custom page template

Creating a custom page template couldn’t be easier. Create a blank php document, then add the following code:

< ?php
/*
Template Name: About
*/
?>

Configure the template name to something recognisable, this is what will appear in a drop down menu within the WordPress admin screen. Saving the file with a name corresponding to your chosen template name makes sense, for example about.php.

In the remainder of the document add your HTML and WordPress template tags to construct your desired layout. This might utilise tags such as <?php get_header(); ?> to build the page using the existing header/sidebar/footer elements, or you might be building something completely unique using a complete WordPress loop. Don’t forget, you can also hard code features into your template file that are unique to this page, such as a contact form, YouTube video or a Google Maps iFrame.

Once you’ve created your custom page template and uploaded it to your theme directory, create your page using the WordPress editor. Any content you add using the WYSIWYG will appear wherever the <?php the_content(); ?> tag was placed within the template. This page will use the default page.php template unless your change the Template option under Attributes.

Select the Template menu and choose the template file with the name you supplied. Hit the publish button and see your WordPress content dynamically generated using the structure of your custom page template.

November 23 2011

21:00

Snickles: Create A Modern Business Template In Adobe Photoshop

Good day! Today we will be designing a modern business template in Adobe Photoshop.. This template will contain a header, slide show, service area, video, about us, testimonials, and footer. What you will be learning from this tutorial are how to achieve that 3D looking interface in just a few simple steps, creating patterns, combining textures, colors, alignments and many more. So get ready and let’s get started!

Here is what we will be making, click on the image for full preview:

Resources for this tutorial

Step 1: Setting up the Document

Start by creating a 1400px x 1700px document in Photoshop.

Ruler Tool is very useful for this tutorial make sure that rulers and guides is turned on.

  • Rulers: Ctrl + R
  • Guides: Ctrl + ;

Also one thing important in using Ruler Tool is the Info(Information) Panel. The use of this is when you are measuring using the ruler the information will be shown in the information panel. Make sure that this is shown in your panels at the right. If it is not shown you can access this by going to Windows – Info.

The total width of this site will be 960px. So, let’s create our 1st guide by going to View – New Guide, set the value to 220px. Repeat the step of create a guide but now change the value to 1180px, this will make a total of 960px to the center of our canvas.

Step 2: Working on Base Background for Header and Slider

What we’re trying to achieve here is a 3D like surface to hold our slider preview and on top of it will be our logo, navigation and RSS feed.

To start using Rectangle Tool(U) create a 100% by 960px shape, color #092f56. Next, using Ruler Tool(I) measure 140px staring from the bottom of the shape towards top and drag a guide from the ruler.

Next add a 1px line, color #062340 just 1px above the guide.

Using Rectangular Marquee Tool(M) create a selection as shown in the screen shot below. Set the Foreground color to #000 and select Linear Gradient Foreground to Transparent then, fill the selection with it. Once you have fill it set the Blend Mode to Multiply, Opacity to 30%.

Select Rectangle Tool(U) and create a 100% by 45px shape. Place it as shown in the screenshot below.

Apply this Blending Option

  • Dorp Shadow: #000

  • Inner Shadow: #0f3b69

  • Gradient Overlay: #051f3a, #082c50

  • Stroke: #06213a

Result

Next you need to extract the paper texture that you have downloaded. Select Paper 9 and place it into our canvas as shown in the screenshot below.

Set the Blend Mode to Multiply and Opacity to 30%. Later on when we finished putting all the content for header and slider we will be adding highlights to our base background.

Step 3: Working on Header

Our header will contain Logo, Navigation and RSS Feed.

Logo

I used a font called Snickles you can get it on Font Squirrel. Now type in your website name using the font settings below.

Font Settings

  • Font Name: Snickles
  • Weight: Normal
  • Size: 60pt

Apply this Blending Option

  • Drop Shadow: #000

  • Inner Shadow: #fff

  • Gradient Overlay: #c0c0c0, #ffffff

Result

Navigation

Using Rounded Rectangle Tool(U) set the Radius to 20px. Create a 580px by 50px shape as shown in the screenshot below.

Apply this Blending Option

  • Dorp Shadow: #000

  • Inner Shadow: #fff

  • Gradient Overlay: #fea201, #fccf6a

Result

Using Text Tool(T) add site links Home, Blog, About Us, Free Consultation and Contact Us. Distance with each links will be 41px so go ahead and measure it with Ruler Tool(I)

Font Settings

  • Font Name: Helvetica Neue
  • Weight: Roman
  • Size: 12pt
  • Color: #fff, #ac5b00

Duplicate the text and exclude the Home link in a separate text layer. Place it under the original text layer and move it 1px above using arrow up key and lastly change the color to #d38904. For the other links place it below the original text layer and move it 1px below and change the color to #ffe91e. You may now have an embossed looking links.

We will be adding dividers. Using Line Tool(U) with a fill color #fee79e create a 1px line and place it as shown in the screenshot below.

Below all the text layers create a 70px by 30px shape, color #ee9e0d using Rounded Rectangle Tool(U) and place it as shown in the screenshot below.

Apply this Blending Option

  • Dorp Shadow: #fff

  • Inner Shadow: #000

Result

RSS Feed

Download RSS button from the resource and place it as shown in the screenshot below and add a text using Text Tool(T)

Font Settings

  • Font Name: Arial
  • Weight: Regular
  • Size: 12pt
  • Color: #fff

Apply this Blending Option

  • Dorp Shadow: #000

  • Inner Shadow: #fff

  • Gradient Overlay: #f38600, #fed676

Result

Step 4: Working on Slider

Our slider will contain text title & description, button and a browser display.

Text Title & Description

Using Text Tool(T) place a dummy text using the text format provided below.

Title

  • Font Name: Helvetica Neue
  • Weight: Condensed
  • Size: 24pt
  • Color: #fff

Description

  • Font Name: Arial
  • Weight: Regular
  • Size: 12pt
  • Color: #dddddd

Button

Using Rounded Rectangle Tool(U) create a 150px by 35px shape.

Apply this Blending Option

  • Dorp Shadow: #000

  • Inner Shadow: #fff

  • Gradient Overlay: #f38600, #fed676

Result

Label it with View Details using Text Tool(T)

Description

  • Font Name: Helvetica Neue
  • Weight: Roman
  • Size: 14pt
  • Color: #fff, #02b0f3

Result

Display

First using Rectangle Tool create a 450px by 250px shape.

Select Rounded Rectangle Tool(U), set the Radius to 5px. Create a 450px by 20px and fill the rounded corners in the bottom.

Apply this Blending Option

  • Drop Shadow: #404040

  • Inner Shadow: #fff

  • Gradient Overlay: #f38600, #fed676

Result

Open up the web ui elements. Cut out the buttons and resize it to fit to the shape that we have created. Refer to the screenshot below.

Next create a new layer below the white shape we have created. Select Elliptical Marquee Tool(M) and create a selection as shown in the screenshot then fill it with #000. Go to Filter – Blur – Gaussian Blur – 2 and change the layer Opacity to 50%

Controls

Using Ellipse Tool(U) create a 14px by 14px shape. Place it on the center as shown in the screenshot below.

1st Shape

  • Drop Shadow: #000

  • Inner Shadow: #fff

  • Gradient Overlay: #03b8ff, #89e3fe

2nd & 3rd Shape

  • Dorp Shadow: #fff

  • Inner Shadow: #000

  • Color Overlay: #051f3a

Result

Highlights

Select Dodge Tool(O) set Exposure to 10%, also set the Dodge size to 200px.

Duplicate the base layer shape and rasterize it. Using Dodge Tool(O) lighten up the area as shown in the screenshot below.

Result

Step 5: Working on Consult Area

To create a pattern create a new 15px by 15px transparent document. Using Pencil Tool(B) create a pattern the same on the screenshot below.

Go to Edit – Define Pattern, name it zigzag. Now, create a 100% by 150px shape using Rectangle Tool(U). Select Paint Bucket Tool(G) and change Foreground to Pattern from the dropdown list. Create a selection at the very bottom of the shape and fill it with pattern that we made.

Apply this Blending Option

  • Drop Shadow: #bfbfbf

  • Gradient Overlay: #f5f4f4, #fdfdfd

Result

Using Text Tool(T) add a dummy text.

Font Settings

  • Font Name: Helvetica Neue
  • Weight: Light Condensed
  • Size: 20pt
  • Color: #444444

Button

Create a 210px by 50px shape using Rounded Rectangle Tool(U), apply the same Gradient Overlay and Inner Shadow.

Apply this Blending Option

  • Stroke: #cf8606

Label it with CONSULT NOW using Text Tool(T).

Font Settings

  • Font Name: Helvetica Neue
  • Weight: Roman
  • Size: 18pt
  • Color: #fff, #cf8606

Result

Step 6: Working on Services

Service area is divided into 4 columns. Each column has a size of 210px by 125px. The distance of each column will be 40px. Create this guide by measuring using Ruler Tool(I).

Open up the icons set that you have downloaded from the resource and place it as shown in the screen shot below. Next label each Icon using Text Tool(T).

Font Settings

  • Font Name: Helvetica Neue
  • Weight: Condensed
  • Size: 18pt
  • Color: #444444

Using Line Tool(U) color #bfbfbf, #f8f8f create lines as shown in the screenshot below.

Once you are done, merge all the line shape and mask it by clicking the mask icon from the layers panel. Using Brush Tool paint every edges of the line. You should have similar to the screenshot below.

Step 7: Working on Video Tour

Using Text Tool(T) add a header text.

Font Settings

  • Font Name: Helvetica Neue
  • Weight: Condensed
  • Size: 22pt
  • Color: #444444

Using Rectangle Tool(U) create a 460px by 255px shape, color #dddddd.

Apply this Blending Option

  • Outer Glow: #bfbfbf

  • Stroke: #fff

Place some sample play button at the center of the shape.

Result

Step 8: Working on About Us and Testimonials

Header font is the same, for the paragraph use the font settings below.

Font Settings

  • Font Name: Arial
  • Weight: Regular
  • Size: 12pt
  • Color: #444444

For the thumbnail in the testimonials area create a shape 70px by 70px and apply the same blending option as we did in our video tour. Change the stroke size to 3px. For the quotation follow the font settings below.

Font Settings

  • Font Name: Arial
  • Weight: Regular
  • Size: 215pt
  • Color: #dad9d9

Result

Step 9: Working on Footer

Our footer will contain Quick Links, Latest Posts, Latest Tweets, We Socialize, and Copyright. The width of this will be the same to our 4 columns as we did in the services area.

To start let’s create the base background first. At the very bottom of the canvas create a 100% by 45px shape, color #04203b using Rectangle Tool(U). On top of it create another shape size 100% by 450px shape, color #052342. Duplicate the paper texture we made on our header and slideshow area then place it below to our footer.

Quick Links

The header title will be place 30px below the shape. Each link will have a distance of 15px from the dividers. Divider color will be #265686

Header

  • Font Name: Helvetica Neue
  • Weight: Condensed
  • Size: 18pt
  • Color: #fff

Links

  • Font Name: Arial
  • Weight: Regular
  • Size: 12pt
  • Color: #fff

Latest Posts

For the latest post still the same text format as we did in Quick links.

Date

  • Font Name: Arial
  • Weight: Regular
  • Size: 11pt
  • Color: #8496a9

Latest Tweets

Text

  • Font Name: Arial
  • Weight: Regular
  • Size: 12pt
  • Color: #8496a9

Link

  • Font Name: Arial
  • Weight: Regular
  • Size: 12pt
  • Color: #fcc757

We Socialize

Place the Icons you have downloaded from the resource accordingly as shown in the screenshot above.

Apply this Blending Option

  • Drop Shadow: #000

  • Inner Shadow: #fff

  • Gradient Overlay: #03b8ff, #89e3fe

Copyright

Here is our Final Result!


PSD Download

I hope you enjoyed and learned something from this tutorial. Don’t forget to comment, share and subscribe. Thank you! :)

July 02 2011

10:00

Template Show: How to Design a Gallery Layout in Photoshop

In this week’s tutorial we will create a gallery layout. I will not be using the 960 grid in this tutorial, the purpose is to show beginners out there how important the Ruler Tool is when you are designing in Photoshop. We will also tackle how to create and use patterns and using mask and filters.

Here is what we will be making, click on the image for full preview:

Resources for this tutorial

Step 1: Setting up the Document

Start by creating a 1200px x 1850px document in Photoshop.

As I mentioned earlier we will be using the Ruler Tool. Make sure that rulers and guides is turned on.

  • Rulers: Ctrl + R
  • Guides: Ctrl + ;

Also one thing important in using Ruler Tool is the Info(Information) Panel. The use of this is when you are measuring using the ruler the information will be shown in the information panel. Make sure that this is shown in your panels at the right. If it is not shown you can access this by going to Windows – Info.

The total width of your site will be 960px. So, let’s create our first guide by going to View – New Guide, set the value to 120px. Repeat the step of create a guide but now change the value to 1080px, this will make a total of 960px in the center of our canvas.

Step 2: Creating the Header

The Header section is composed of Logo, Navigation, and Search. First thing you need to do is to create a folder name it Header and inside of it create sub folders and name them Logo, Navigation, and Search. It is important that you group all the things you do properly in order to be organized and easily locate things in the future for coding purposes.

Inside Header folder create a new layer and name it bg. Using Rectangle Tool create a 100% x 100px. By looking at the Info Panel you can view the dimension of the shape that you’re making. Or you can do this by creating a new guide by going to View – New Guide – 100px Horizontal. It’s up to you what way you choose.

Add this Blending Option

  • Gradient Overlay: #dcdcdc, #ffffff

Next thing you do is create two lines using Line Tool 55px distance from the top. But I suggest to use Rectangular Marquee Tool to make the line pixel perfect.

  • Line 1: #cfcfcf
  • Line 2: #ffffff

As you can see in the preview of our header there is a pattern above the lines. Create a new document 9px x 7px, background content Transparent. Using Pencil Tool with a fill color of #cfcfcf create a pattern as shown in the screenshot below. When you are done go to Edit – Define Pattern and name it whatever you wish to call it.

Using Paint Bucket Tool instead of foreground change it to pattern and select the pattern we made. Apply this pattern by making a selection and fill with pattern using Paint Bucket Tool.

Step 3: Creating Logo

This is just a simple site name logo. Start by using Text Tool and type your desired site name.

Add this Blending Option

  • Inner Shadow: #000000

Step 4: Creating Navigation

Again using Text Tool lets place our navigation links.

Add this Blending Option

  • Drop Shadow: #ffffff

Step 5: Creating Search

To create our search bar use Rounded Rectangle Tool and set the radius to 10px, then create a shape as shown in the screenshot below.

As you can see in the preview above, the left side of our search bar is slanting. So, we need to transform our shape by selecting the layer and press Ctrl + T then Right Click to the work area and select Distort.

Next we need to mask the bottom part of our shape to be equal in our header. First set the foreground to #000000, then select the layer bg in our header and make a selection of it. While it is selected select the shape of our search the press the Mask Icon in the layers panel area beside the fx icon. Just refer to the screenshot below.

Add this Blending Option

  • Inner Shadow: #000000

  • Inner Glow: #fff

  • Gradient Overlay: #e6e6e6, #dcdcdc

Now let’s create the search button. Make a selection of the search bar, contract it by 2px, and fill it with any color. To contract go to Select – Modify – Contract.

Select Rectangular Marquee Tool, by pressing Alt key you will notice that there is a - sign beside the selection pointer, this sign means to deselect selection. Now you can deselect the section you want to deselect.

Add this Blending Option

  • Inner Glow: #ffffff

  • Gradient Overlay: #dcdcdc, #f9f9f9

  • Stroke: #c2c2c2

Open up the search icon, align it and add a 1px drop shadow #ffffff.

Step 6: Creating Slider

Create a folder above Header folder and name it Slider. Using Rectangle Tool with a fill color of #413f6b create a 100% by 250px.

Add this Blending Option

  • Inner Shadow: #ffffff


Convert the shape layer to Smart Filters by going to Filter – Convert for Smart Filters. Now, go to filter again and add noise

Controls

Create a folder inside Slider and name it Controls. Controls should have sub folders named: NextPrev and Slider Control. Inside NextPrev let’s create our Next and Previous buttons start by selecting Ellipse Tool with a fill color of #676589 and create a shape 40px x 40px.

Download the arrow icon provided in the resources and place it on our canvas. Resize and position it as shown in the screenshot below.

We are going to mask the shape, first set the foreground color to #000000, next make a selection of the arrow icon by Ctrl + Click to the layer and Inverse the selection by pressing Ctrl + Shift + I. While it is selected select the Ellipse shape and press the Mask Icon beside the fx icon in the layers panel.

Duplicate the shape and place it on the other side. Grab some sample images to put in our slide. Also, using Text Tool add some text: a sample title and a little content just follow the formatting of the text as shown in the screenshot below.


Now we are going to work on our Slider Controls. Using Rounded Rectangle Tool with a 10px radius create a shape as shown in the screenshot below. Transform the shape the same as we did in our Search bar.

Also mask the layer as we did previously, refer to Step: 5 Creating Search.

Add this Blending Option

  • Gradient Overlay: #dcdcdc, #ffffff

Using Ellipse Tool create a shape as shown in the screenshot below.

Add this Blending Option

  • Drop Shadow: #ffffff

  • Inner Shadow: #000000

This will be the result.

Using Rectangle Tool with a fill color of #000000 create a 100% by 5px shape, then set the layer mode to multiply and opacity to 30% in the layers panel.

Make a selection of the slider control shape and expand it by 5px by going to Select – Modify – Expand.

Final step to create our slider is to add highlights. First make a selection of our slider base, then select Brush Tool set the hardness to 0% and size about 400px. Fill the selection in a separate layer with #ffffff color and set the blend mode to Soft Light in the layers panel.

Step 7: Featured Gallery

Create a new folder and name it Featured Gallery. Using Rectangle Tool with a fill color of #ededed create a shape 100% by 200px. Also, create two 1px lines, first line color #ffffff will be placed on the top of our shape and the second line color #c2c2c2 will be on the bottom.

Create a new layer above the shape and name it highlight. Then, make a selection of the shape. Using Brush Tool with a fill color of #ffffff brush in the center of the selection then, set the layer mode to Soft Light.

Now let’s work on our sample post for our featured gallery. First, create a folder named post then put a 100px x 100px sample thumbnail on our canvas. Also, Using Text Tool add a Title and Content.

Create a new layer below the thumbnail and name it shadow, using Pen Tool create a shape as shown in the screenshot below. Then, go to Filter – Blur – Gaussian Blur 1px, and set the Opacity to 50% in the layers panel.


Create a new folder and name it rate. Now, open up the star icon and place it to our canvas and place it as shown in the screenshot below.

Add this Blending Option

  • Drop Shadow: #000000

  • Gradient Overlay: #e7e918, #fffd76

  • Stroke: #eaec25

Make a selection of the star and deselect starting from the middle to bottom and in a separate layer fill it with Linear Gradient #ffffff to Transparent then, set the Opacity to 70% in the layers panel.

This will be the result.

Duplicate the star four times.

Duplicate the post folder two times a position it as shown in the screenshot below.

Step 8: Posts

Fill the Background layer with #ededed. Create a new folder and name it Body Posts, create a sub folder and name it post. Now, create a sample 300px by 200px image thumbnail for our post and place it in our canvas. Using Rectangle Tool create a 300px by 45px shape just fill it with any color. Just refer to the screenshot below.

Add this Blending Option

  • Drop Shadow: #000000

  • Gradient Overlay: #f7f7f7, #ffffff

Duplicate rate folder from our featured gallery and place it in the post folder. Also, using Text Tool create a sample title, just follow the settings in the screenshot below.

For unrated star style just remove the Gradient Overlay and replace it with Inner Shadow.

Duplicate post folder five times and align it as shown in the screenshot below.

Step 9: Pagination

Select Rounded Rectangle Tool and set the radius to 5px then, create a 620px by 45px shape below those posts.

Add this Blending Option

  • Inner Shadow: #000000

Using Text Tool place the number of pages as shown in the screenshot below.

Step 10: Sidebar

Create a #c2c2c2 1px line 40px distance from our post, Mask the line and make the tip faded using Brush Tool with a fill color of #000000. You may have something that looks like the screenshot below.

Duplicate the line and move it to the left and change the color to #ffffff. Create a Horizontal line with the same color place it as shown in the screenshot below.

Next, create a new layer below those lines we have just created and name it shadow. Using Selection, Gradient Tool, and Eraser Tool perform what you have seen in the screenshot below. The set the shadow layer to Multiply, Opacity to 50%.

Duplicate the layer and place it on the top as shown in the screenshot below. It’s up to you to make adjustments, just erase the portion that you don’t like.

Select Rounded Rectangle Tool then set the radius to 10px. Create a shape as shown in the screenshot below. The width of the shape is the remaining width of our canvas and the height will be 40px.

Add this Blending Option

  • Gradient Overlay: #494367, #6b6393, #494367

Using Text Tool add a header title.

Next open up the social icons and place them on our canvas, align them as shown in the screenshot below, and also add their corresponding social icon names using Text Tool.

Create two new folders and name them: Categories and Our Partners. Using Text Tool and Line Tool perform what you can see on the screenshot below.

Step 11: Footer

Create a new folder and name it Footer. Inside footer there are sub folders named: About, Most Love, and Site Links. Using Rectangle Tool with a fill color of #413f6b create a footer that is the right size to you.

Add this Blending Option

  • Inner Shadow: #ffffff

Convert the shape layer to Smart Filters by going to Filter – Convert for Smart Filters, go to filter again and add noise.

We were going to add info text in our about folder. Using Text Tool put in some dummy text and for the formatting of the text just refer to the screenshot below.

Using Text Tool add links on Site Links folder.

Using Text Tool add a Post Title, Love this, and comments. Create also a 50px x 50px thumbnail and place it as shown in the screenshot below.

Final steps are adding copyright and back to top button. Open up the arrow icon and rotate it facing top.

Add this Blending Option

  • Drop Shadow: #000000

  • Gradient Overlay: #dcdcdc, #ffffff


Finally we’re done!

Glad that we finished it all together. I hope you learn something from this tutorial. I would love it if you would post your outcome below. Cheers all :)

June 09 2011

10:00

Myriad Pro: Create a Minimal WordPress Theme in Photoshop

In this tutorial we are going to create a minimal WordPress theme in Photoshop. Don’t worry if you are new with using Photoshop, any skill level will do. I’ll try my best for you to follow this tutorial from start to finish. Also, you will learn how to create simple patterns to add more texture to our WordPress theme.

This is a simple design created in Photoshop. The working demo will soon follow, which will involve converting the PSD file to a working HTML/CSS. So, are you excited? Open your Photoshop now and let’s get started!

Here is what we will be making, click on the image for full preview:

Resources for this tutorial

Step 1: Setting up the Document

Open up Photoshop and create a 1200 px x 1850 px document.

Make sure that you have turn on Rulers and Guides

  • Rulers: Ctrl + R
  • Guides: Ctrl + ;

This is 960 grid base layout for this tutorial we will not download it. Let’s simply create our own guide. Go to ViewNew Guide 120px Vertical Repeat the step and change the value to 1080px.

Step 2: Working with Background

Duplicate the the background layer and fill it with #f8f8f8. Next we will create a simple dotted pattern. Create a new document 15px x 15px. Zoom in by pressing Ctrl + . Uncheck the background layer and create another layer, using Pencil Tool create a dot at the top left of our canvas.

Go to EditDefine Pattern name it dotted. Now back to our layout. Create new layer above the background using the Paint Bucket Tool switch from Foreground to Pattern select the dotted pattern and make the layer Opacity to 15%. Group all the layers we have just created and name it Background.

Using the Rectangle Tool with a fill color of #363636 create a rectangle with a height of 10px starting from the top left of the canvas to the right.

Step 3: Working with Logo

Start by placing a 38pxx 38px using the Rounded Rectangle Tool with a fill of #f7941d. Using Text Tool select Myriad Pro Bold font with a size of 36pt. Place it as shown in the screenshot below.

Add a Layer Mask to the shape we have just created by pressing the button beside the fx button in the layers panel.

Select the Layer Mask then Ctrl + Click to the Text layer to make a selection, fill it with #000000. This will be applied to the layer mask and make the selection transparent into the shape.

Using Text Tool select Myriad Pro.

  • Myriad Pro: Font Size 24pt, Color #363636
  • Best choice of font: Font Size 12pt, Color #959595

Step 4: Working with Social Icons

Open up the social icons, change the image size to 19px x 19px by pressing Ctrl + Ctrl + I and change the values of height and width. Place the icons in our canvas with in a new folder named, Social Icons, Refer to the screenshot below for the positioning and colors.

Step 5: Working with Navigation

Create a new group and name it Navigation. As you can see in the screenshot above there is a rectangular shape with a stroke, start by using the Rectangle Tool with a height of 90px.

Add this Blending Option:

  • Gradient Overlay: #f8f8f8, #fcfcfc

  • Stroke: #c2c2c2

Open up the Navigation Icons and resize them to 22px x 22px. Make a new group inside the navigation group, name it Icons and place it there. Now that we have our icons, it’s time to put up our navigation links. Follow the screenshot below for the formatting and color of the text.

Merge all the lines you have made by pressing Ctrl + E. Duplicate the merge layer and move it 1px to the right by pressing the right arrow key on the keyboard.

Step 6: Working with Search

Create a new group above Navigation and name it Search. Using the Rectangle Tool color #ffffff create a shape as shown in the screenshot below.

Add this Blending Option:

  • Stroke: #c2c2c2

Let’s create a search button, using the Rectangular Marquee Tool create a 40px x 35px rectangle and fill it with any color.

Add this Blending Option:

  • Gradient Overlay: #f8f8f8, #fcfcfc

  • Stroke: #ffffff

Add this line with a color #c2c2c2, then place the icon 19 px x 19px.

Using the Text Tool add this text in the search field area.

Step 7: Working with Slider

Select the Rectangle Tool with a fill color #ffffff, create a shape 630px x 340px.

Add this Blending Option:

  • Stroke: #c2c2c2

Select the shape by pressing Ctrl + Click on the shape layer. Go to SelectModifyContract 10px.

Fill the selection with any color and place a sample image that’s the same size.

Below the shape layer create a new layer and name it Shadow. Using the Pen Tool create a shape as shown in the screenshot below and fill it with #000000.

Apply a Gaussian Blur with a Radius of 2px. Set the Layer Opacity to 40%.

Using the Ellipse Tool create four shapes as shown in the screenshot below. Make sure it is aligned to the center.

Add this Blending Option:

  • Color Overlay: #c2c2c2

  • Inner Shadow: #000000

The color #c2c2c2 will serve as the normal state of our slider, for our active state change the color to #f7941d

Step 8: Working with Posts

To start, create a new group and name it Posts. Using the Rectangle Tool with a fill color of #ffffff create a 630px x 300px rectangle.

Add this Blending Option:

  • Stroke: #c2c2c2

Create another 200px x 200px shape using Rectangle Tool and add the same blending option.

Ctrl + Click the layer to make a selection. Go to SelectModifyContract 10px

Fill the selection with any color and place a sample thumbnail image. Using the Text Tool put up the Title of the post, content, author etc.

Lets make a read more button for our post. Create a new group inside Posts and name it more. Using the Rectangle Tool create a 88px x 30px shape.

Add this Blending Option:

  • Inner Glow: #ffffff

  • Gradient Overlay: #f1f1f1, #fbf9f9

  • Stroke: #c2c2c2


I just took a screenshot of Digg, Tweet and Facebook and paste it in the bottom left side of the post.

Duplicate Posts folder and place it as shown in the screenshot below.

Step 9: Working with Pages

Create a new group and name it Pages. Create a 26px x 26px shape using the Rectangle Tool. For the inactive pages apply a blending option with a Stroke of #c2c2c2. For the active page just copy the layer styles we applied on the read more button and apply it to the shape.

Step 10: Working with Advertisements

Create a new group and name it Sidebar. Create another group inside Sidebar and name it Advertisement. Using the Rectangle Tool with a fill color of #ebebeb create a 145px x 145px shape. Then set the Layer Opacity to 50%.

Ctrl + Click the layer to make a selection. Go to SelectModifyContract 20px. Fill it with #ffffff and add a 1px #c2c2c2 stroke.

Duplicate it four times as shown in the screenshot below.

Step 11: Working with Tabs

Create new group inside Sidebar and name it Tabs. Now select the Rectangle Tool with a fill color of #ebebeb create a 300px x 500 box with a distance 35px below advertisement. Set the layer Opacity to 50%.

This part is just the same as we did in our advertisement, just refer to Step 10.

Create tabs using Line Tool and Text Tool.

Create a new layer below the tabs layers. Using the Rectangle Tool create a shape as shown in the screenshot below.

Add this Blending Option:

  • Gradient Overlay: #f1f1f1, fbf9f9


Time to create a sample post. Start by grabbing a 60px x 60px sample thumbnail. Also, we will add title of the post, when it is published and in what category.

Group all the layers we have created in our sample post and duplicate it four times.

I also added a sample 300px x 300px advertisement.

Step 12: Working with the Footer

Create new group and name it Footer. Using Rectangle Tool with a fill color of #363636 create a 1200px x 485px shape.

Lets create a new pattern. Create a 6px x 6px file. Unlock the background layer and create a new layer. Set the foreground color to #363636, using Pencil Tool create a pattern as shown in the screenshot below.

Using the Rectangular Marquee Tool make a selection about 3px height starting from left to right and fill it with the pattern we made.

Lets create another pattern. Create a 12px x 12px file. Change the foreground color to #303030. Using Pencil Tool create a pattern as shown in the screenshot below.

In a new layer fill the whole footer with the pattern we have made.

In our footer we will be placing our tweets, popular posts and about, so create a group for each. First we will work on in tweets, using the Text Tool fill in with text the same as shown in the screenshot below.

Next in popular just duplicate the sample posts we have made in our tabs, then we will match the color as we did in our tweets.

Lets proceed to about. Grab some Lorem Ipsum text and place it as shown in the screenshot below. Also I merge the layers of our logo and add a color overlay with a fill color of #6d6e71.

For our final step using the Rectangle Tool with a fill color of #252525 create a 40px high shape, then using Text Tool add a copyright text color #616264.

Finally we’re done! I really hope that you followed and learned something from this tutorial. If you have questions feel free to ask them below. Cheers to all!

April 21 2011

10:47

Free HTML/CSS/PSD Template: TemplatesBox

Advertisement in Free HTML/CSS/PSD Template: TemplatesBox
 in Free HTML/CSS/PSD Template: TemplatesBox  in Free HTML/CSS/PSD Template: TemplatesBox  in Free HTML/CSS/PSD Template: TemplatesBox

Getting the right look for your client’s projects, as well as your own, is one of the key make or break elements to your website creations. When users land on a site, an immediate impression is made, and we always want to make sure it the right one. Pulling this off on a budget is not always the easiest of tasks, which is what makes pre-made themes, both free and premium, a huge design time saver and arsenal must. Which is why today’s post so exciting!

Today we release yet another freebie: a beautiful website theme, designed by TemplatesBox and released for the Smashing Media family and its readers via Noupe. As usual, the theme is absolutely free to use in private and commerical projects.

Release in Free HTML/CSS/PSD Template: TemplatesBox

Download the Theme for Free!

The theme is released under GPL. You can use it for all your projects for free and without any restrictions. Please link to this article if you want to spread the word. You may modify the theme as you wish.

Preview in Free HTML/CSS/PSD Template: TemplatesBox

Features

Below we have some large preview images (with links to even larger ones) of the various page layouts and elements included in this exclusive freebie. Not that you need the enticing, but what can we say, we wanted to wet your appetites a bit before you download the main course. Take a look down through this sneak peek before adding this graciously crafted and donated design exclusive into your design toolbox.

    Index in Free HTML/CSS/PSD Template: TemplatesBox
    Index (large preview)

    About in Free HTML/CSS/PSD Template: TemplatesBox
    About (large preview)

    Portfolio in Free HTML/CSS/PSD Template: TemplatesBox
    Portfolio (large preview)

    Services in Free HTML/CSS/PSD Template: TemplatesBox
    Services (large preview)

    Contact in Free HTML/CSS/PSD Template: TemplatesBox
    Contact (large preview)

    Behind the Design

    Here are some insights on the designers:

    TemplatesBox has been serving the online design and development community since 2002, providing professional website templates to its customers and members. Renowned for their dedication to the overall quality of both their product and their customer and member’s experience, they have established themselves in the industry as a trusted source for your numerous template needs. Visit TemplatesBox to download beautiful website templates, flash templates, logo templates and many other website graphics.

    Thank you, TemplatesBox. We appreciate your work and your good intentions.

    (rb)

    February 07 2011

    07:00

    How To Design a Custom YouTube Background

    Have a YouTube channel? Want to customise it with your own background design? Follow this guide to find out how to create a cool theme for a gaming channel, then download the free template for use in your own projects.

    Custom YouTube design

    The design we’ll be creating is a dark military theme for my new gaming channel. Subtle camouflage patterns, grungy background textures and an array of awesome weaponry all combine to form an eye catching background design to entice viewers and subscribers.

    View the final YouTube background design

    YouTube background template

    Like many social websites, YouTube allows the cusomisation of your personal profile through the uploading of a background image and the modification of the profile’s colour scheme. In order to make sure our design fits well with the YouTube website and its various palettes we need to base it on a template. Here’s a YouTube design template I made earlier, download it and feel free to use it in all your future projects. The template highlights where each palette is located and shows how much of the page is seen by common monitor resultions.

    Download the YouTube design template (PSD)

    The first step towards our dark gaming channel design is a camo pattern background. Here I’m using my free repeating camo patterns I posted on Blog.SpoonGraphics, with a slight colour adjustment.

    Next, draw a large selection around the main YouTube container from the template and fill it with black on a new layer.

    Download a grungy texture like this one from LostandTaken and scale it into position over the black area in the design. Reduce the opacity to tone down the grungy effect.

    Toggle on the template and CMD+click the palettes layer thumbnail to load the selection. Fill these palettes with a black background and reduce the opacity so the texture can be seen through them.

    Create a new layer then right click the selection and choose Stroke. Enter 1px with the color White. Change this layer to Soft Light.

    Use the Eraser tool with a soft brush setting at 50% opacity to grunge up these borders by erasing out random areas.

    Being a military themed gaming channel means we need guns, lots of guns! Scour the stock photo websites for various weaponry. I originally developed this design for an Expendables Movie poster tutorial, check out that post for more details!

    Open up each weapon photo into Photoshop and desaturate, then use the Magic Wand to quickly make a selection of the object.

    Go to Select > Modify > Contract and enter 2px in the settings. This helps clip out any unwanted white area that the Magic Wand might have included in the selection.

    Clip out every weapon image you find and compile the selections in a new document. Aim to find a range of weapons of various sizes, including knives.

    The images won’t be in proportion with each other, so scale and order each weapon according to their actual size.

    Starting with the largest weapon and moving down, rotate and position the guns so they flare out in a kind of wing shape.

    If the tones of some weapons don’t match, quickly adjust the Levels to clip their shadows and highlights.

    The smaller weapons may need duplicating to fill out their area of the wing. Stack these weapons to give the impression of layered feathers.

    Finally arrange the knives until the rotation of elements reaches the 180 degrees mark. Again stack and layer these objects to fill in any gaps.

    When all the weapons have made up a complete wing shape, group them together and paste them into the main YouTube design document.

    Scale and position the wing behind the content panel. Take into consideration the common monitor resolution guides to ensure the weapons will fit within the screen area of most viewers.

    Paint in a blue overlay over the weapons to add a cool colour cast. This blue will also be sampled for use as the link colour to tie the design together.

    Duplicate the group of wings, right click and selection flip horizontally, then position the duplicate in the same place on the opposite side.

    Toggle on the design template to double check the scale of the design and its elements. This design will fit into 1440px resolutions, but the tips of the larger guns will be cropped off on anything smaller.

    We also need to take into consideration larger monitor resolutions and browser window scrolling, so add a black fill to fade out the edges of the design to a solid colour.

    Crop the design as tightly as possible, then save the image. Compress the JPEG settings as far as you can while keeping an acceptable image quality. The max filesize YouTube accepts is 256kb.

    Log into your YouTube profile and edit your channel. Upload the background image and deselect the repeat option. Then go through and edit the design background, text and link colours. Also remember to set the transparency of the YouTube wrapper and palettes to 100% so the underlying background can be seen.

    Custom YouTube design

    Check out the final design over at my gaming channel on YouTube. Notice how the palettes sit nicely against the containers of the background. If you’re gaming fan, particularly of the Call of Duty series, why not consider subscribing? ;-)

    View the final YouTube background design

    January 31 2011

    07:00

    How To Create Your Own Custom WordPress Theme

    Follow this overview of the build process to create your own custom WordPress theme. We’ll be taking my latest theme design from its basic HTML and CSS mockup and inserting the various WordPress template tags to build a fully working theme ready to install on your blog.

    LoveGrid WordPress theme

    Long time readers may remember the build process of the LoveGrid concept where we designed and finished off the mockup as a static HTML and CSS page. Now let’s take this design and convert it into a WordPress theme. If you want to get your hands on this theme for your own site, it’s now available to Access All Areas over on my graphic design blog – Blog.SpoonGraphics.

    How WordPress themes work

    WordPress theme files

    WordPress themes are made up of multiple template files that are all contained in a theme folder. When the index.php file is loaded, PHP tags within this file load other template files, such as the header, sidebar and footer to build a complete page. Different template files are loaded depending on which section the viewer is browsing, so page.php is loaded when the user is viewing a page, and single when the user is viewing a blog post.
    Within these template files are template tags, which provide the dynamic functionality of a WordPress blog. Most of these tags are pretty simple and just need inserting in the right place within the HTML code, for instance the <?php php the_title(); ?> tag inserts the title of that particular post wherever the PHP tag appears in the theme.

    The LoveGrid theme is fairly simple and makes use of just the main template tags. It doesn’t have a sidebar, so sidebar.php isn’t used. Likewise, the search function has been left out to maintain a clean interface, so search.php isn’t required either. When building your theme it’s important to list out the types of template files you will need.

    Getting started

    One of the first steps you must remember to take when building your theme is to set up the basic theme information. At the top of your style.css document add and edit the following information:

    /*
    Theme Name: LoveGrid
    Theme URI: http://www.blog.spoongraphics.co.uk/
    Description: A premium theme by Chris Spooner of Blog.SpoonGraphics.
    Version: 1.0
    Author: Chris Spooner
    Author URI: http://www.blog.spoongraphics.co.uk
    */
    

    You will also want to add some CSS styling to make sure the alignment of images works. These classes are automatically added by the WordPress WYSIWYG editor:

    .centered {
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    .alignright {
    	float: right;
    	margin-left: 15px;
    }
    
    .alignleft {
    	float: left;
    	margin-right: 15px;
    }
    

    Finally, don’t forget to modify the screenshot.png image so your theme displays a nice preview in the Appearance section of the WordPress admin area so it can be identified when selecting a theme.

    Header.php Template File

    View large code view

    Open up your index.html mockup file and copy the code that makes up the header area. This should include all the elements that will appear exactly the same on every page of the site. Paste them into a header.php file within your theme folder. The next step is to go through and insert WordPress template tags in place of the basic HTML. The first will probably be <?php wp_title(); ?>, which will insert the relevant wording into your HTML <title> tag for each page of the site. Other tags used in the header template are <?php bloginfo('stylesheet_url'); ?> to automatically insert a link to the style.css file and <?php bloginfo('template_url'); ?> to insert a link to the theme directory, which is handy for linking up Javascript files.

    Just before the closing </head> tag, the <?php wp_head(); ?> template tag is used so WordPress can insert any additional code into the head itself, such as meta keywords, description and other plugin specific information.

    Also included in the header.php file is the header section of the design. Links to the homepage are added using the <?php echo get_option('home'); ?> template tag. In order to populate the navigation menu, the tag <?php wp_list_pages(); ?> is used to display all the WordPress pages, with the title_li= parameter clearing out the default title that WordPress would otherwise add.
    Finally, at the end of the navigation list, an extra <li> is added to link to the RSS feed using the <?php bloginfo('rss2_url'); ?> template tag.

    Index.php Template File

    View large code view

    Switch back over to your mockup HTML file and copy the next chunk of code from where the header left off, down to the footer (or sidebar if you have one). This content will be placed in the index.php template file. At the top of this file the first tag you’ll need is <?php get_header(); ?>, this will insert the content of the header.php file above your index.php content when the page is viewed in a browser. Next, the WordPress loop checks for content. Within the loop you lay out the HTML for one post, then this is repeated for every post WordPress displays. Continue replacing HTML content with a WordPress template tag, so <?php the_permalink(); ?> goes wherever there’s a link to the post, <?php the_title(); ?> goes wherever the post title is displayed and <?php the_content(''); ?> tells WordPress where to insert the actual post content.

    Underneath the list of posts we can set up the pagination options. Simply insert the <?php next_posts_link('Older posts'); ?> and <?php previous_posts_link('Newer posts'); ?> tags wherever you want these links to appear. Below this we can set up a simple error if no posts were found below the PHP else statement.

    At the bottom of the document the footer.php file is called using the <php get_footer(); ?> template tag. This will render a complete page in the browser by combining the header.php, index.php and footer.php files.

    Archive.php Template File

    View large code view

    The index.php file is used when viewing the homepage of the blog (unless a page is set as the homepage instead). When the user views a category list or any collection of posts, whether it’s by date, tag or author the archive.php file is used instead. The archive.php file is almost identical to the index, with the addition of a few extra titles to identify what posts the user is browsing.

    Conditional tags are used to detemine which snippet of content to display, so <?php if (is_category()) { ?> checks if it’s a category view. If so, a title is displayed that indicates which category it is, using the <?php single_cat_title(); ?> template tag to print the name of that particular category. Similarly, checks can be made on the date and the relevant month and year can be added to the page. If your site makes use of tags and authors, even more titles can be added using a series of other conditional tags. See the WordPress Codex page on Conditional Tags.

    Page.php and 404.php Template Files

    View large code view

    There are two types of content on WordPress blogs, posts and pages. Out of the two pages are often the most simple. The page.php file is pretty much a stripped down version of the index or archive templates. It still includes the link to the header file, the WordPress loop and the tags to generate the page title, but on a page we don’t need a date, read more link, or meta information.

    View large code view

    Another template file that acts similar to a page is 404.php. This file allows you to customise an error page just in case a 404 File Not Found error appears on your blog. This file is even more simple that page.php as the content is coded directly without any special WordPress tags.

    Single.php and Comments.php Template Files

    View large code view

    The single.php file is the template used whenever a blog post is viewed. The first portion of the file is pretty much identical to how the post content is laid out in the other template files, the main difference is blog posts also include comments, so the <?php comments_template(); ?> template tag is used to call the comments.php file.

    View large code view

    Inside the comments.php file there’s a bunch of comment specific tags that enable you to build a thorough comments section. <?php comments_number(); ?> is a simple tag used to display the number of comments on a post, with parameters allowing you to edit the wording as you please. The comments file has its own mini loop, <?php if ( have_comments() ) : ?> checks to see if there are any comments on the post, then the whole list of comments is simply inserted using just one tag: <?php wp_list_comments(); ?>. The comments file has its own set of pagination links, which combined with the WordPress discussion settings allow you to split comments over multiple pages.

    Footer.php Template File

    View large code view

    To finish off the theme, all we need to do is fill out the content in the footer.php file. Remember this file has been called from many of the other template files to round off the page with the rest of the HTML required. The file continues where the others left off. In this particular design the footer file begins with a list of categories using the <?php wp_list_categories(); ?> template tag with a range of parameters clearing out the default post count and title as well as hiding specific categories such as ‘Uncategorized’. Usually this particular template tag would be found in the sidebar, but as with most WordPress tags it doesn’t matter where you place them in your theme.

    Next up in my footer file is a spot of <?php query_posts(); ?>. This section isn’t someting usually required in your average theme, but it is used to create a separate list of posts outside the main WordPress loop. In this theme it’s used to display the latest 6 posts.

    Another tag you wouldn’t usually see in a theme is <?php wpp_get_mostpopular(); ?>. This particular tag is unique to the WordPress Popular Posts plugin, but it shows how additional functionality can be added using plugins and their custom tags. In the public theme this tag is wrapped in a <?php if (function_exists); ?> statement to ensure it doesn’t break the theme if that particular plugin isn’t installed.

    The Final WordPress Theme

    So basically the whole process of building a theme involves pasting a bunch of template tags in between your HTML. Many of the most common tags are listed out in this post, but you’ll also want to keep the WordPress Codex open in order to refer to the whole library of template tags available. On most occassions there’s a tag out there that will help you achieve the exact function you have in mind.

    With all the HTML, CSS and PHP template tags in place the theme is now ready for installation and testing.

    LoveGrid WordPress theme

    View the LoveGrid theme demo

    January 24 2011

    18:00

    The World’s Best Corporate WordPress Themes You Can Actually Afford to Buy

    Since the boom of Content Management Systems (CMS) like WordPress, Drupal, and Joomla, many websites started offering free and premium pre-built and made-to-order themes. The market was doing great on its own until it became oversaturated. Oversaturated how? There now exists tens of thousands templates and themes for these CMS, the problem lies in the quality. Many will agree that majority of the themes and templates available are lacking in quality. This affects the whole community, even Theme Forest.

    Click for Themes Below!

    A “too long; didn’t read” (TL;DR) version is: there is a never ending supply of free themes. Anything that tends to be too popular destroys itself through fame by the people.

    Let us delve deeper into the problems people are currently experiencing.

    Market Oversaturation

    Imagine a lengthy street lined up with peanut vendors only a foot apart from each other. Now imagine half of them give free taste, the other half boasts their “SPECIAL” peanuts through signs. Heaven for an elephant but a very horrible scene for someone who’s after quality peanuts. Same goes with templates and themes.

    With themes here and there it is only natural to arm your self with fear of dissatisfaction.

    War for Quality

    War

    Of all the wars in man’s history, war for quality is the only moral war. It is already demonstrated that many templates and themes are way below average quality. Such a thing does not exist in Theme Forest because every submission needs to pass through the lens and extreme examination before being approved for the marketplace. Talk about TSA-like examination, this is it, only loved by everyone.

    Halt! It does not stop there. Envato, the company from which Theme Forest came to existence not only offer themes but also almost everything you need to create a business website. From 3D models to codes and sound effects, they have it. Properly regulated and properly priced. One of the best things that ever happened in the internet.

    An advantage of joining this fantastic community is you get to interact and use the services that experts offer. I know this will be stingy but who will let this chance pass and choose amateurs?

    You Need Not Go Far for Reviews

    Unlike most websites that offer free and premium themes and templates, Theme Forest has already set its roots. Hundreds, if not thousands, of satisfied customers leave their comments and suggestions that will absolutely be of help when choosing a perfect theme. Buyers or lurkers can check how the product works through a preview, satisfied customers even rate the themes for you. Automatic customer service, I tell you, and it’s more credible when you see a 4.5 stars with applauding people in the comments. There are also a lot of authors who are ready to help you in case a problem arises from the product.

    Comments

    Oh. My. Gosh. 225 comments and I assure you that most of them are either comments from satisfied buyers or the author’s reply. Need I say more?

    Hint: You Can Sell Yours Too

    Since Theme Forest is only after themes and templates that are of high quality, if you are like their authors whose excellence is driven by passion then feel free to be a member and start earning your dollars with their massive audience. A product being approved is already an honor.

    Massive Categories

    Almost anything from personal website to eCommerce are catered at Theme Forest. With a wide selection, people of different goals can really find high quality materials there that suits perfectly with their goals be it for business or for personal blogging.

    Categories

    Pricing

    I’ve read several comments and one prevailing element is on how affordable products are at Theme Forest while maintaining quality. As the homepage proudly states, there are items that you can buy from $1. Below is a screenshot of a newsletter and an under construction template.

    Price

    Here’s another screenshot, all highly rated with great number of sales for a very affordable price.

    Price-2

    Not satisfied with what I’ve told and shown? Visit Visit Theme Forest now and see for your self. We will really appreciate if buyers and authors will share their experiences in the comments section.

    Corporate WordPress Themes

    1. Noblesse –  $35

    Noblesse

    Noblesse is a powerful, rich graphics theme with features oriented for content presentation. It comes with 7 color variations, 7 different fonts, 8 custom widgets and 8 different template pages. Although the theme is very rich in graphics (90% done with css3) it is very flexible, giving you the possibility take it to the next level.

    The homepage has a multitude of variations and can be completely changed. Each page has the possibility to display a headline, description, image and switch sidebars. Packed with over 50 shortcodes (embedded in editor) the styling possibilities are endless. Please find bellow other features of the theme.

    Some Features:

    • WP3 Custom Types + WP3 Menu
    • Unlimited custom sidebars
    • 7 color variations
    • 2 different slideshows
    • Unlimited template pages (-Blog)
    • ~50 shortcodes embeded in Editor
    • Multiple homepage variations
    • Psd files included

    2. Colorwave –  $35

    Colorwave

    Colorwave is a clean, modern and professional template which is perfect for portfolios, companies, agencies, Photographers and even more…

    Some Features:

    • 3 Highlight Sliders
    • Full Custom Sidebars
    • 14 Template Colors
    • 7 Custom Widgets
    • 2 Blog Type (Classic/Magazine)
    • 30+ Custom Style Shortcodes

    3. Phenomenon –  $35

    Phenomenon

    Phenomenon is the ultimate and one of a kind premium hosting wordpress theme that was created with hosting companies and businesses in mind. Phenomenon is very easy to customize and it comes with a great documentation that includes 6 screencasts that help you get the theme up and running in no time!

    Some Features:

    • BluzPanel Included!
    • Cufon font replacement
    • Threaded Comments 3 Page templates: Full-Width, Gallery, Blog
    • 34 Awesome & Useful Shortcodes
    • PSD for logo customization – included!
    • Login Module (integrated with: WordPress, WHMCS or Custom)
    • Compatibility (IE 7 , IE 8 , Firefox, Opera, Safari, Chrome)

    4. Periodic –  $35

    Periodic

    The simple, clean elegant interface is meant to be a perfect backdrop to your content. The theme is ready to start working, out of the box, with a multitude of theme options, custom widgets and shortcodes to help you personalize your environment.

    Some Features:

    • Fully developed comments
    • Built in pagination support using WP-PageNavi
    • Enhanced blog post template
    • Seven custom widgets
    • YouTube integration for video posts
    • 9 shortcodes

    5. EZINE –  $35

    Ezine

    EZINE is clean, elegant, modern and minimalist premium wordpress theme that can be switched as blogging, magazine, community and portfolio wordpress theme, there’s 4 skins color and background pattern variation available with EZINE theme, Please explore the demo to see more theme features.

    Some Features:

    • Jquery slideshow (Nivo slider)
    • Custom Shortcodes
    • Support WordPress 3.0 Menu System
    • 4 Skins option
    • 10 custom widgets

    6. Gadgetine –  $30

    Gadgetine

    Gadgetine is premium blog magazine theme that will also work well for a serious news portal. It has 3 columns, 8 news sections and a LOT banner spaces on the first page.

    The theme is very friendly for affiliate marketers or just regular bloggers who wish to monetize their hobby. They will appreciate the ability to easily promote specific posts and create their own pages with no limitations (read landing pages). Carefully placed banner spaces will help to make that sale. T

    heme has its own configuration page, so you wont have to edit any code files! Setup is very easy.

    With built in thumbnail generator, you will have no problem creating great looking articles.

    The theme also includes automatic picture resize script, that will save you hours of resizing those pictures from older version of your website.

    You will also have a special page for your RSS feeds and many more great features.

    Some Features:

    • Theme has 10+ banner spaces
    • Automatic picture resize
    • Feedburner compatible
    • SEO Optimized
    • Fully Compatible with WordPress 3.0

    7. EXPO –  $30

    Expo

    EXPO is a highly customizable WordPress Showcase and Resource Theme, integrated with rich feature and enhanced administrative options. You can use this theme to promote good products (themes, web, design) at your website and earn referrals money.

    Other possible use is a simple showcase website with products reviews, photos, etc. Since this theme is widget base theme, you can easy manage the layout of your site using WordPess widget manager.

    Some Features:

    • Easy Thumbnailer
    • Many Back End Options
    • Highly customizable theme and well commented
    • These widget can be used in 9+ different widget areas.
    • You can switch between 2 or 3 columns using custom theme options.

    8. MAJALAH –  $25

    Majalah

    MAJALAH is magazine style WordPress theme with clean and modern layout, and also can be switched as community theme. There are 2 Slideshow options in MAJALAH theme, 3D slideshow and Javascript slideshow that easily configurable from admin theme options, and also 2 colors available in dark dan white color with 4 combination background.

    Some Features:

    • PSD included
    • Flickr Integration
    • Two color scheme
    • Archives templates
    • Admin theme options
    • SEO Optiomized
    • Built in Twitter Integration

    9. Affair –  $20

    Affair

    A 2 column, magazine flavoured WordPress theme, designed to put your content at the forefront and give your blog a modern, stylish and professional feel. Featuring automatic thumbnail generation and custom social media links.

    The perfect theme for bloggers wanting a magazine look!

    Affair is coded in Valid Xhtml and CSS , is ready to run straight out of the box and for those who like to tinker, customizing the theme is also super easy!

    Features:

    • 2 column magazine layout
    • Automatic thumbnail generation
    • Custom social media links
    • Pretty looking comments with Gravatars
    • SEO ready!

    10. Maglicious –  $30

    Maglicious

    MagLicious is a throughout professional premium WordPress Theme which is perfectly suited for News and Magazine style Websites.

    Some Features:

    • 2 templates for the price of one
    • Widgetized mainpage
    • Full page slider
    • Portfolio page with video support
    • 9 skins for different color variations

    11. FlibBlog –  $35

    Flipblog

    FlipBlog is the hottest new thing since sliced bread. This theme is like a Rock Star buisness/portfolio theme got together with a hip blog theme and had a baby. Yeah… FlipBlog is the whole package.

    Some Features:

    • Full lightbox integration
    • 6 dynamic widget areas
    • 5 homepages to choose from
    • Built-in ThemeBlvd SEO Plugin
    • Tons of Shortcodes
    • 10 Custom widgets
    • Total visual customization

    12. Beatific –  $30

    Beatific

    It is a full W3C Valid PHP coded WordPress website theme, easily customizable. All PSD files are attached in the file ZIP so you can modify everything on the site, and you can easily create your own themes too, since the documentation is very clear on how to modify. The site uses jQuery for the image scroller on the Home page and for some minor tweaks.

    Features:

    • 17 pages long documentation
    • Custom post type for Portfolio items
    • Full WordPress integration
    • 4 carefully hand crafted themes

    13. Nesnel –  $35

    Nesnel

    Nesnel is a premium portfolio and business theme for WordPress. It has user-friendly admin panel with configuration wizard, slider management system, shortcode generator; modular page layouts, 90+ advanced shortcodes and more. And it’s incredibly easy and quick way to have a website. You can setup in minutes to your WordPress.

    Some Features:

    • Ready for WordPress 3 and greater
    • 90+ Shortcodes
    • Unlimited level unique navigation menu
    • Ajax contact form
    • Nested Comments
    • Translate Ready

    14. Lifeline –  $35

    Lifeline

    Lifeline is a clean and sleek WordPress theme that is built for easy customization and enormous flexibility. It’s powered with our custom Theme Options Panel, JWPANEL.

    Some Features:

    • 7 custom page templates
    • 4 color schemes included
    • 10 custom widgets
    • Unlimited widget sections
    • Widgetize homepage
    • Localized. Translation ready

    15. Survive –  $30

    Survive

    Survive is clean and modern WordPress theme made for Business, Portfolio, Personal Blog or any kind of website.

    Some Features:

    • Threaded comments
    • Nivo Slider
    • Cufon font replacement
    • Shortcodes for more text-control
    • Step by step detailed installation guide
    • Full control from admin panel

    16. brandNew –  $35

    Brandnew

    brandNew theme for WordPress is a modern web 2.0 theme with spacious layout, clean typography and better readability. The theme is best suited for corporate ventures, blogging requirements and personal portfolio. Backed with useful short-codes, custom widgets, multiple skins and language localization support – the theme is versatile enough to fit into your web requirements.

    Some Features:

    • 10 Skins
    • 2 WP Menus
    • Home page scroll Slider
    • Full width Nivo Slider
    • 5 Portfolio Templates
    • 8 Custom widgets
    • 7 widget areas with exclusive usage for each page

    17. Uniquate –  $35

    Uniquate

    Uniquate is a Powerful Professional WordPress theme. It’s perfect for Corporate, Business and Personal Portfolios.

    It includes powerful and minimal admin panel which give you full control over every major and minor design element throughout your website.

    It comes with 11 skins and I am sure you can create your own skin easily.

    Some Features:

    • Video support in gallery
    • WordPress 3.0 menu support
    • 2 column fixed layout
    • Jquery cycle plugin
    • 11 color skins
    • Powerful and minimal theme options page simple to use
    • No need to add custom fields for thumbnail images

    18. CleanSlide –  $30

    Cleanslide

    CleanSlide is a professional & clean premium WordPress theme. It can be used for almost every type of website project. It comes with a detailed documentation, which includes all the main instructions you will need to customize this theme. All the html and psd files are included.

    Some Features:

    • 8 different color schemes
    • Unique jQuery Portfolio incl. filtering
    • jQuery Accordion freebie included
    • PSD file included

    19. Stealth –  $30

    Stealth

    Stealth is a sleek, stylish and simple theme that you’ll be able to setup for you or your client in no time.

    Some Features:

    • 6 dynamic widget areas
    • Contact form builder
    • Built-in ThemeBlvd SEO plugin
    • Tons of shortcodes
    • 10 custom widgets
    • 8 page templates
    • 6 styles

    20. Sniper –  $25

    Sniper

    SNIPER is a clean and robust WordPress theme, best suited for decent corporate websites, photography portfolio, and personal blog. The simplicity and straight-forward design style opens a wide scope for modification and flexible configuration. Backed with powerful widgets, useful short-codes and language ready functionality, SNIPER can be useful for your next corporate project. Here are some of the features:

    Some Features:

    • 8 custom widgets
    • 4 widget areas
    • Language Ready theme
    • 2 WP3 Menus
    • 9 portfolio/gallery templates for image showcase
    • Custom blog template for creating more than one blog-alike pages.

    E-Commerce

    1. WP FlexiShop –  $35

    Flexistore

    This theme utilises the powerful WP E -Commerce plugin to create a versatile and feature packed WordPress powered shop, with 3 different layout options and unlimited color possibilities. Make this theme your own.

    Mix up content on the homepage with swappable content areas, and change between 2 different footer areas, or use both! A theme so versatile that you can re-brand it to suit your business by simply changing a few settings.

    Some Feautres:

    • Multiple payment options
    • User accounts and order tracking
    • Supports tax
    • AJAX cart loading
    • 12 widget areas
    • 3 different types of layouts
    • Elegant 2–step checkout

    2. Sofa Shoppr –  $40

    Sofashoppr

    Sofa Shoppr is WordPress based webshop (e-commerce) theme. It works in conjunction with PayPal payment gateway which means that users can safely checkout either by using their own PayPal account or a credit card. Beside the fact that this theme is extremely easy to setup and maintain, it does include all of WP 3 .0+ features, built-in widgets, advanced layout control, user reviews and an ample Options page through which all the crucial sections of your future webshop are settable.

    Another cool thing is a featured products banner rotator – Piecemaker (Adobe Flash app), fully integrated into system. Webshop owner can simply upload all the slides through WP Admin panel and set all of Piecemaker variables via theme Options page so no need to edit XML file or upload slides by using FTP client. On top of that, each banner can be linked to a certain/featured product page – if needed.

    You can select between 3 different layouts for your webshop Home Page; it can consist of Widgets only, it can be a grid of listed products (no sidebar) or a combo of grid and sidebar. Both grids may optionally be mixed with Widgets too which is another great feature – you can literally create your own layouts. There’s plenty more but I guess you’ll discover on your own as soon as you install Sofa Shoppr.

    Some Features:

    • Orders tracking
    • Fully implemented piecemaker banner rotator
    • Complete webshop + PayPal solution
    • Entirely settable via Options page
    • 8 built-in widgets

    3. The Clothes Shop –  $40

    Tcs

    Some Features:

    • Multiple payment options
    • Manage registered customers
    • Coupon/voucher codes
    • Shop modes: regular, inquiry, affiliate, PayLoadz
    • 30 independent widget ready sections
    • 22 Custom widgets featuring: “shop by outfit”,”shop by size”,”shob by color” etc.

    4. enVirashop –  $30

    Envirashop

    enVirashop is a WordPress eCommerce theme that has an in-built shopping cart feature that requires no plugins.

    The theme comes with plenty of options so you can personalize your store to suit your needs. Please check the screenshots to see the design variations and the options available.

    Some Features:

    • Set tax rate
    • Multiple currencies
    • Product options
    • Payment methods (PayPal & Google Checkout)
    • 5 banner colors
    • 5 shopping cart colors
    • jQuery shopping cart

    5. Cars Dealer –  $35

    Carsdealer

    Cars Dealer is a full featured WordPress 3 theme developed for car dealers looking for something a little bit different. Cars dealer is not a “corporate” website, it’s just a clean and elegant design focused to inspire everyone that come to it.

    Of course you can easily use this template for any other markets.

    Some Features:

    • Latest jQuery Framework
    • 20+ custom options
    • Multiple Page Layouts (6)
    • Custom Post Types (2)
    • WordPress Version 3.x

    6. Time for Food –  $25

    Tff

    Time for Food is a beautifully designed WordPress Theme for all you foodies. It can be used to share recipes or just write articles based about food.

    The site works in IE6 , IE7 , IE8 , FF, Opera and Safari.

    The Theme uses the TimThumb Script, so you need the GD libary installed for this to work (99% of hosts have this installed, if not just ask them to enable it).

    7. The Jewelry Shop –  $45

    Tjs

    Some Features:

    • Translation ready
    • 34 Custom Widgets
    • 34 Independent and collapsible widget ready section
    • Products with video, audio and/or images
    • Protected account area
    • Customer wishlist

    8. The Furniture Store –  $45

    Tfs

    Some Features:

    • 2 Localized Child Themes
    • Optional Blog Alongside The Shop
    • 27 Independent and Collapsible widget ready sections
    • Customer Wishlist
    • Frontend customer login/registration and protected account area

    9. EStore –  $35

    Estore

    EStore is a clean, modern, web 2.0 style wordpress theme suitable for online store, shopping cart and business sites.

    This theme is fully compatible with WP Ecommerce plugin.

    Some Features:

    • WordPress 3.0
    • 7 page templates
    • 4 sidbar position
    • New Custom Post Type for slider
    • New Custom Post Type for portfolio
    • New Custom Post Type for products
    • New Custom Post Type for testimonials

    10. Hansum –  $25

    Hansum

    Hansum WordPress theme is a clean, beautiful and easy customizable theme. It’s perfect for corporate, photography show case, personal/company portfolios, blogs and clean looking websites. This theme comes with massive and functional theme option page which gives you entire website under your control. It comes with 4 page templates, Portfolio, gallery , blog and contact.

    It comes with 2 skins with light and dark

    Some Features:

    • Theme options page
    • Inbuilt contact page
    • 3 page templates
    • 2 column fixed layout
    • jQuery hslides slider

    November 24 2010

    23:45

    Roll your Own Templating System in PHP: New Premium Tutorial


    Push the limits of your PHP knowledge with this extremely in depth and advanced tutorial. You’ll learn how to implement techniques, including object-oriented programming, regular expressions, and function currying to build a templating system from scratch. Become a Premium member to read this tutorial, as well as hundreds of other advanced tutorials and screencasts.

    Example of Tut

    Join Net Premium

    NETTUTS+ Screencasts and Bonus Tutorials

    For those unfamiliar, the family of Tuts+ sites runs a premium membership service. For $9 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Phototuts+, Psdtuts+, Phototuts+, Aetuts+, Audiotuts+, Vectortuts+, and CgTuts+ For the price of a pizza, you’ll learn from some of the best minds in the business. Become a Premium member to read this tutorial, as well as hundreds of other advanced tutorials and screencasts.

    November 12 2010

    10:00

    How To Create A Logo Guideline For Your Client

    Working on a logo project sometimes can be challenging especially when you are working on a fresh start up companies who needs an identity for their product or company. Despite the process of how a logo is being created, in this post we are going to learn on how to create a logo guideline for your client based on the logo you have designed and approved by them.

    Target Your Audience

    *Image by Michael S. Schwarzer

    Before you start creating the logo guidelines, first you will need to understand who will be using the guidelines are they your client or will they be the employer of your client, what will they achieve from using them, how and/or where they can access the guidelines (this can either be a digital file like PDF or a printed logo guidelines book), and the last one is that why the logo guidelines it self being produced.

    Gather The Essential Information

    *Image by Metropol 21

    Once you set up the target or knowing the reason why the guidelines is needed, you can start gathering the essential information to help your target see the concept through the logo you designed. You have to keep in mind that the following logo guidelines is made to help communicate your idea or concept to your brand’s audience.

    Designing The Logo Guidelines

    *Image by Industrial Scientific

    In designing the logo guidelines, it’s best to match the look and feel of the brand itself and apply it on the guidelines. However, sometimes it is also best to keep it look simple and neat.

    While designing on the logo guidelines book or paper sheet, there are few things that you should consider to do to achieve a better understanding for your audience, such as:

    • Create section dividers between one subject to the other. For example, you will have the introduction first before the color palette section. You should separate these two sections using lines, rectangle blocks, or even start on new page for each different section.
    • Write a comprehensible introduction or overview page to describe why the guidelines have been produced and how adhering to them will strengthen their brand.
    • Remember that this is the guideline, therefore try to engage the user. Keep the explanation short and simple to understand.
    • Be aware of the typographic hierarchy. Always differentiate the headline/headings with the introduction copy, body copy, or other typography content.
    • Provide your logo guidelines target with examples of how the logo should, i.e the minimum size of the logo for print or for the website favicon.
    • Always advice them about the mishandle logo, you could also explain it by including “the Do’s and the Don’t’s” or “What To Avoid” section accompanied by the samples of common errors.

    Distributing The Logo Guidelines

    When distributing the logo guidelines, you can either create an interactive PDF or have it printed. This depends on whichever your client or target require them. However, you should always maintain the master file in Adobe Illustrator as it is easier to keep the print quality by using vector based program rather than Adobe Photoshop. As for distributing digitally,create these in the Master InDesign File and not within Acrobat, to save having to repeat the process with each revision.

    Free Download


    We have created a simple Logo Guidelines that you can download for free as a template to provide your client with the essential information.What other information do you put inside the logo guidelines? Let us know your thoughts on the comment below.

    More resources related to logo design and guidelines:

    October 12 2010

    04:00

    Free New Twitter PSD Background Template

    New Twitter is out now for most all users and we’ve seen the complaint of your BG designs being borked. We had great success with our Free PSD Twitter background template. Good news we’ve kept it simple like the last so, it’s efficient and easy to use.

    Screen shot 2010-10-11 at 11.52.43 AM

    Note:

    Twitter aligns all backgrounds to the left.

    Make note of this when designing your background. Also, you can put elements to the far right but be aware that some users will not see them depending on what monitor/resolution they are running. I included the “twitter container” (logo and space where your tweets are housed) it is actual size. So you can move it into different resolutions to keep in mind what other users will see.

    File Type: PSD
    Number in Set: 1
    License Type: Creative Commons 3.0
    Author: Chad Engle

    Download

    Sponsored by

    Made By Tinder

    Advertise on Fuel Brand Network.
    Fuel Brand Network 2010 cc (creative commons license)

    Free New Twitter PSD Background Template

    August 12 2010

    19:46

    The HTML5 Boilerplate


    The talented Paul Irish and Divya Manian, just yesterday, released what they call the “HTML5 Boilerplate.” The product of years of experience, this is easily the most comprehensive starting template for every new project that I’ve ever seen.

    HTML5 Boilerplate

    According to Paul, himself:

    Why it is Awesome?

    • Cross-browser compatible (IE6, yeah we got that.)
    • HTML5 ready. Use the new tags with certainty.
    • Optimal caching and compression rules for grade-A performance
    • Best practice site configuration defaults
    • Mobile browser optimizations
    • Progressive enhancement graceful degradation … yeah yeah we got that
    • IE specific classes for maximum cross-browser control
    • Handy .no-js and .js classes to style based on capability
    • Want to write unit tests but lazy? A full, hooked up test suite is waiting for you.

    Why it is Awesome-er?

    • Javascript profiling…in IE6 and IE7? Sure, no problem.
    • Console.log nerfing so you won’t break anyone by mistake.
    • Never go wrong with your doctype or markup!
    • An optimal print stylesheet, performance optimized
    • iOS, Android, Opera Mobile-adaptable markup and CSS skeleton.
    • IE6 pngfix baked in.
    • .clearfix, .visuallyhidden classes to style things wisely and accessibly.
    • .htaccess file that allows proper use of HTML5 features and faster page load
    • CDN hosted jQuery with local fallback failsafe.
    • Think there’s too much? The HTML5 Boilerplate is delete-key friendly. :)

    The HTML5 Boilerplate can be downloaded here.

    August 03 2010

    21:00

    40 Highly Customizable Commercial Admin Templates And Skins

    Preview-commercial-admin-themesBuilding a CMS from scratch can be hard and exhausting work, plus you need to have a good design stitched to it if you’re creating it for client. Sometimes it’s better to spend little money for a great quality product, these highly customizable admin templates could be a great starting point into new project and now there are really big assortment to choose from by.

    In this post you’ll find 40 customized, user-friendly and fluid themes to integrate in your CMS. Enjoy!

    1. Admintasia ($14)

    Admintasia is a complete backend administration user interface that has the flexibility to house any kind of application. It loads last, it’s intuitive and easy to use, it uses only three small images and it also looks good.

    Admintasia’s layout is very customizable. With the help of my helper CSS classes you can, for example divide the main content area into one big box and two small ones, or three smaller one, or two big ones. You want two notification boxes side by side? No problem, just add a css class and you’re done and this goes for almost all elements. Everything is fluid. Also, there is an option in the sidebar from which you can set a fixed page width.

    Admintasia-commercial-admin-themes

    2. Simpla Admin ($22)

    Simpla Admin is a professional template with a beautiful and user-friendly interface. With various smart and intuitive jQuery functions, navigating the interface is a breeze.

    Some features:

  • Semantic, valid XHTML and CSS
  • Well commented code
  • Liquid layout – content resizes to the user’s window
  • Powered by jQuery
  • Cross-browser compatible
  • WYSIWYG Editor on any text area
  • Simpla-commercial-admin-themes

    3. Complete Liquid ($22)

    Complex Liquid Admin template that contains a login page as well as a modular content page that includes all the elements you could possibly need in your admin. From these elements you should be able to generate any required page.

    Liquid as opposed to a fixed size means all the screen real-estate is used in the most efficient manner possible and also eliminates compatibility issues with non-standard, very low or very high screen resolutions.

    Complete-liquid-commercial-admin-themes

    4. Profi Admin ($22)

    Profi Admin is a clean and simple style template but it’s complexity and expansibility goes beyond expectations. The big visual menu creates the intuitive navigation while the tabbed and the hidden submenu expands the structure to 3 menu levels. Inspired by the WordPress Administration layout.

    Profi-commercial-admin-themes

    5. Boxie ($14)

    Modern looking design, easy to use user interface (UI) and cool user experience (UX). Made in terms of progressive enhancement (using CSS3 properties in order to get as clean code as possible with less images etc.) and with graceful degradation in mind = looks great in modern browsers and good in older browsers as well (just take a look at live preview).

    Boxie-commercial-admin-themes

    6. Cleanity ($17)

    This professional looking and highly flourished skin is suitable for almost any kind purpose. Cleanity is a compilation of all features you might need on an administration theme.

    Some features:

    • Valid XHTML / CSS
    • Flash Like Animated Drop Down Navigation
    • Rounded Corners with No Images
    • Quick Visual Links with Graphical Navigation
    • Visual WYSIWYG Editor on Desired Textareas
    • Works in all Major browsers both in Windows & Mac OSX

    Cleanity-commercial-admin-themes

    7. Wide Admin ($14)

    Wide admin is a powerful lightweight backend interface application, ready to use for any software / CMS you want.

    Some features:

    • Sortable and togglable dialog windows
    • Liquid (fluid) layout, the content resizes to user’s window up to 1600px
    • Two skins – Smooth gray, and silk black
    • Valid XHTML and CSS , crossbrowser compatible. CSS3 (for rounded corners and shadows) is optional
    • Tooltips available for any item
    • Full support / assistance included

    Wide-commercial-admin-themes

    8. Ultra Admin Full ($22)

    Advanced yet easy to use administration panel template. It includes 4 color schemes (the very hot aurora graphic skin, white, blue and dark skins) and is divided in a login page and two content pages that includes all the elements you could possibly need in your admin. From these elements you can generate any required page.

    Ultra-full-commercial-admin-themes

    9. Adminus ($22)

    Adminus is a stylish admin panel template, ready to be implemented as the back-end interface of your application. The template uses smart jQuery scripts and effects, which degrades perfectly.

    Some features:

  • Valid code
  • Liquid layout
  • Implemented WYSIWYG editor
  • Working AJAX / PHP file upload
  • Image preloading
  • Custom font with @font-face
  • Easy skin customization with the provided PSD files
  • Adminus-commercial-admin-themes

    10. Flexy ($17)

    Advanced and easy to use administration theme which comes in 7 different colour variations. The theme is liquid, which means the width of the content area adapts to your browsers window size.

    The template is divided into a login page and a content page that uses 4 different tabs to display the commonly used interface elements, needed to create an admin panel. It comes with many easy to use javascript effects like tabs, datepicker, message dialog, rich text editor, closable elements etc. Allof these elements can be applied with the simple use of html classnames, no need to ever edit the javascript.

    Flexy-commercial-admin-themes

    11. Meta Admin v1 ($17)

    Advanced yet easy to use administration panel template. It includes 4 color schemes (blue, green, grey, red) and is divided in a login page and a content page that includes all the elements you could possibly need in your admin. From these elements you can generate any required page.

    Meta-commercial-admin-themes

    12. Element ($14)

    Element Admin is a static html template that can be used as a starting design for your next web application or cms admin template. It includes the necessary elements to give your backend admin section a modern web 2.0 look.

    Some features:

    • Valid XHTML & CSS
    • Includes several styles including forms, tables, alerts, and more!
    • Code is well documented and comes complete with ReadMe file
    • PSD files included

    Element-commercial-admin-themes

    13. Fresh CMS ($22)

    FreshCMS is a fresh kind of skin/theme, there is no similar kind of skin/theme here on ThemeForest! This skin/theme is almost complete(about 80%). This means that you can save some time in designing and building of a CMS . FreshCMS is packed with jQuery stuff like toggle, styleswitcher, delete content, sortable and more.

    Fresh-cms-commercial-admin-themes

    14. Admin Theme ($12)

    You’re a great PHP programmer, but you find your web applications not really visually appealing? Ultimate Admin Theme is perfect solution for you and your web applications.

    Some features:

  • Tableless
  • Full CSS and xHTML design
  • Dropdown menu
  • Two color schemes
  • Layered PSD included
  • Theme-commercial-admin-themes

    15. Smooth Admin ($14)

    Smooth Admin is a user-friendly administration panel that comes in 6 premade color schemes which include blue, green, brown, purple, red and a greyish light blue. Additionally you can style it any color you like using the included PSD file.

    Some features:

  • Valid XHTML and CSS
  • Cross-browser compatible
  • Date Pickers, Styled Select Lists and Styled Submit Buttons
  • Quick Tabs located at the top of the page for quick navigation with drop down menus
  • TinyMCE Rich Text Editor for text areas
  • Charting and Graphs which is powered by jQuery
  • Smooth-commercial-admin-themes

    16. Pro Manager v2 ($17)

    This theme is a flexible liquid layout with two columns and three menu options. This site is best suitable for a custom admin skins for a corporate business template. For navigation Colors and content background color Settings please follow below mentioned CSS files.

    Pro-manager-commercial-admin-themes

    17. See Admin Interface ($22)

    See Admin Interface is a new theme with a beautiful and accessible interface based on Jquery framework to make user interaction more pleasant.

    Some features:

  • Semantic and valid code (XHTML & CSS )
  • Well commented code (XHTML & CSS & Javascript)
  • Easy to use & customize
  • Two levels main menu
  • Cross browser compatible, IE6 support also
  • Tooltips for errors/notifications/information animated with Jquery
  • See-interface-commercial-admin-themes

    18. Broom Cupboard ($22)

    Broom Cupboard is a simple, stylish and novel back-end theme for any custom dynamic website. Built using valid XHTML and CSS with a few jQuery flourishes (form validation, datepicker), this admin skin is easy to customise and intuitive to use.

    Broom-cupboard-commercial-admin-themes

    19. Admin Control Panel ($17)

    This is a very user-friendly admin template you can very well use for your own clients.

    Some features:

  • Fully HTML5 compliant
  • Crossbrowser compatible
  • Easily switched to a liquid layout
  • WYSIWYG editor
  • Tab-based navigation
  • Control-panel-commercial-admin-themes

    20. Visual Admin ($14)

    Visual Admin is a stylish template designed for both front end and back-end projects. It comes with a separate login page, and being designed with the 960 grid system if offers endless layout options. Using Google Charts, the template shows off how this template could be used as a dashboard or even a front-end application.

    Some features:

  • Semantic, valid XHTML and CSS
  • Well commented Code and detailed Help Documentation
  • Based on 960 grid system – endless layout options
  • Super Clean and Lightweight
  • Date Picker
  • jQuery UI integration – Accordion, Tabs, Slide, Progress Bar
  • WYSIWYG on any Textarea
  • Image Gallery
  • Visual-commercial-admin-themes

    21. Admin Base ($14)

    Admin Base is a complete professional admin user interface that is both functional, stylish and flexible.

    Some features:

  • Clean Functional Design
  • Fluid Grid Layout
  • Customizable Graphs
  • Cross Browser Compatible
  • Well Commented Code
  • Base-commercial-admin-themes

    22. Administry ($17)

    “Administry” is a complete solution control panel template. It is best for content management systems, website backends or as a standalone skin for a web application.

    Some features:

    • Fully  HTML5 + CSS3  compliant
    • Crossbrowser compatible
    • WYSIWYG editor
    • Sortable datatables
    • Charts and graphs
    • Styled forms, headings and tables
    • Well commented code

    Administry-commercial-admin-themes

    23. WeAdmin ($14)

    WeAdmin is a clean and modern admin theme, ready to be structured as your software’s control panel. This template also uses well-known jQuery, jQuery UI scripts and effects.

    Some features:

  • 4 Skins: Dark blue, Black, Red and Green
  • Hide able menu
  • Fluid layout
  • WYSIWYG text editor
  • Images preloading
  • Unobtrusive jQuery powered effects
  • Valid HTML standard
  • Free Icon Pack
  • We-commercial-admin-themes

    24. ProAdmin ($17)

    This Admin Template is a web 2.0 skin for web-based applications and CMSs. It’s just a HTML template. This theme is easy to integrate into existing projects or
    you can start new from scratch. Needs php/html/css skills.

    Some features:

  • Valid HTML and CSS
  • Includes sidebars, tables, form fields, buttons, attention, text styles and more.
  • jQuery DropDown box
  • Tabbed InterFace Using jQuery
  • Code well documented and multipage read_me.pdf
  • Pro-commercial-admin-themes

    25. ForestCP ($14)

    ForestCP is a great and easy to customize backend administration user interface.

    Some features:

  • Valid XHTML 1 .0 Strict
  • 3 Color schemes: Green, Blue and Red
  • jQuery Stylesheet Switcher
  • Notifications can be closed
  • jQuery WYSIWYG Editor
  • Cross-browser compatible
  • PSD Included
  • Forestcp-commercial-admin-themes

    26. Black Admin v2 ($14)

    Black Admin v2 is a nice and beautiful BLACK admin skin to integrate to your CMS or whatever you feel like integrating it to.

    Some features:

  • Valid XHTML / CSS
  • Commented code for easy integration
  • Jquery with Jquery UI for powerful management
  • Cross browser compatible
  • Jquery effects and animations
  • Well documented
  • Black-commercial-admin-themes

    27. Equinox ($22)

    This is a cool admin template that can also be used for business or general purpose sites. It contains all the possible elements you need. Combining these elements can turn out any page useful in an admin panel. It has a cool login page with remember me, forgot password, ajax validation and example php login script.

    Some features:

    • Three levels top main menu
    • Separate windows design for increased flexibility
    • Dropdown action select menu
    • Photo gallery design with lightbox support
    • Event calendar design
    • Messages (5 styles : positive, negative, neutral, tips, warnings)

    Equinox-commercial-admin-themes

    28. Full Admin ($12)

    Full Admin is a complete solution for your admin control panel template. Shipped with both web and mobile templates. Mobile support: iPhone, iPod Touch, Android 2.2 and Opera mini.

    Some features:

  • Complete templates for web and mobile version
  • Cool top menu, support touch screen device eg. iPad.
  • Ready to use Left Shortcut menu
  • WYSIWYG text editor
  • Stylish notification boxes with fade in and fade out effect
  • PSD included
  • Valid HTML standard
  • Full-commercial-admin-themes

    29. Azure Admin ($14)

    Azure Admin is a clean admin template designed for front end and back-end projects. The theme was built to be flexible with six different color options and both fixed width & fluid width layouts included.

    Some features:

    • Semantic & Valid XHTML 1 .0
    • Fixed & Fluid width layouts
    • Well Commented Code and detailed Help Documentation
    • Mega Dropdown Menus
    • Notification Boxes with closing animation
    • Super Clean and Lightweight

    Azure-commercial-admin-themes

    30. iAdmin ($10)

    iAdmin is a powerful mobile admin template which you can run as a web app fullscreen on your iPhone or iPod Touch.

    Do you have a custom website and you would like to be able to quickly check new comments, new users or post an article on the go with your iPhone? Are you building a website for a client and you would like to offer the same functionality along with a standard admin panel? Then iAdmin is the perfect solution for this job as it offers you all the essential features you need and even more to quickly build your mobile admin panel.

    Iphone-commercial-admin-themes

    31. Easy Admin ($14)

    EasyAdmin is a clean and easy to integrate or code with, admin template. It is well commented, documented and designed with the developer in mind.

    Its jquery powered sidebar with custom code, can help you have really quick and easy in front of you the functionality you want to use often in the admin panel, such as adding a user, a post or even updating status on Twitter.

    Some features:

    • Unique widget sidebar
    • Character limit script for Twitter widget
    • 4 colors
    • Markitup editor
    • Tested & works great with all popular browsers (IE, FF, Safari, Chrome, Opera)

    Easy-commercial-admin-themes

    32. Lite Admin ($17)

    LiteAdmin is a backend admin template. This web application template was built with Web 2.0 in mind and will give you all of the elements to jumpstart your backend web application skin. LiteAdmin includes heading styles, tables styles, error and success message styles and much more. This admin theme will easily integrate into existing web applications or be a great start as a theme for your upcoming application.

    Lite-commercial-admin-themes

    33. Control Admin ($14)

    Control Admin is a fluid full-page admin panel with a flexible interface. It utilises all the space on the screen to create a fantastic user experience for the backend administration of your web application / cms. It features clever jquery, multiple colour schemes, and cross browser compatibility. Setting it up, and creating your own pages is a breeze, with a multitude of features available at your fingertips.

    Some features:

    • Semantic, valid HTML5
    • Easy to read, commented code
    • In-depth documentation
    • Cross Browser Compatible
    • Smart ‘Check All’ Checkboxes
    • WYSIWYG Editor
    • Multiple color schemes
    • Fully layered and named PSD’s

    Control-commercial-admin-themes

    34. Admin Panelz ($14)

    Some features:

    • 5 Color schemes (blue, green, orange, red, gray)
    • jQuery powered
    • Change panels position, easy drag and drop
    • Horizontal content slider
    • Select box and upload box new style
    • Fully layered PSD + extra files
    • Valid xHTML/CSS

    Panelz-commercial-admin-themes

    35. Admin UI ($14)

    AdminUI is a great and easy to customize backend administration user interface, ready to use for any software / CMS you want.

    Some features

  • jQuery/UI Powered
  • Based on 960 grid system – endless layout options
  • Custom select form element
  • Cross browser compatible
  • WYSIWYG text editor
  • CSS3 Enhancements
  • Valid XHTML 1 .0
  • Ui-commercial-admin-themes

    36. Dark Admin ($14)

    Dark Admin is a lightweight, easy-to-use, dark HTML admin template. It does not include any CMS features or backend coding. The theme is based on the layout of collis’ Quik v1 Admin Skin, but, it really is a whole different theme because of the color scheme.

    Dark-commercial-admin-themes

    37. Pink Diamond ($17)

    A very clean and unique admin theme with a touch of pink. It ships with an easy-to-use, very flexible six-column CSS grid system (similar to 960.gs). You lay out the content the way you want using valid XHTML 1 .0 Strict. Two-column-width left sidebar? Three right sidebars? No problem. Just look at the preview to get an idea of the endless possibilities.

    Pink-diamond-commercial-admin-themes

    38. Murano Admin ($14)

    Murano Admin is a modern admin template designed for front end and back-end projects. The theme comes with 10 different color options, plus custom colors can be easily integrated.

    Some features:

  • Semantic & Valid XHTML 1 .0 (transitional)
  • Available in 10 colors (blue, red, orange, green, purple, black, grey, navy, maroon, yellow)
  • Well Commented Code and detailed Help Documentation
  • CSS3 Enhancements
  • Cross Browser Compatible
  • Notification Boxes with closing animation
  • Login Page included
  • Murano-commercial-admin-themes

    39. Admin Skin ($17)

    AdminSkin is a back-end theme for any dynamic web site. It uses the latest and greatest of the jQuery library to create a usable and degradable site, while using good code practices and valid code. Plus, it includes a detailed color PDF Manual and screencast support to help anyone use this theme to its full potential. While relatively simple, it can support many layers of navigation.

    Some features:

  • Custom jQuery
  • Pre-styled elements allow easy customization
  • 3 Color Schemes Included
  • Date Picker Form
  • Pre-Styled Code Highlighting
  • Skin-commercial-admin-themes

    40. Karamel Admin ($22)

    Karamel Admin is an administrative panel with a flexible interface and a set of interface elements, which among other things contains a calendar with backlight days with events and statistics of visitors from Google Analytics.

    Some features:

    • jQuery / UI Powered
    • Google Analytics stats
    • Hide able and resizable sidebar
    • CSS3 buttons (8 styles)
    • WYSIWYG text editor
    • PHP files included
    • Cross browser compatible
    • Well commented code

    Karamel-commercial-admin-themes

    July 20 2010

    10:00

    50 Exclusive Commercial Business And Corporate Wordpress Themes

    Preview-corporate-business-commercial-wordpress-themesIf you need a great, working WordPress theme, but don’t have or necessary skills, then these commercial themes are just for you. They’re completely ready to use, easy customizable and you are getting support too. This post assembles 50 good-looking corporate & business themes, so if you want to start a commercial site, this is the best option available. You get quality stuff with modern features for cheap price. Plus almost every theme has a help documentation so you don’t need to be a WordPress geek to set up and use them.

    1. inFocus ($37)

    inFocus is a Powerful Professional Premium WordPress theme. It comes with an impressive fully customizable jQuery homepage slider with 3 different staging effects.

    Whether you’re a WordPress pro or just a beginner, this theme has you covered. With a huge custom back-end area you have complete control over the look and style of your theme. Add images to your homepage slider, add as many sidebar widgets as you like, pull in your latest tweet from Twitter and much much more, all without having to touch a single line of code!

    For your convenience inFoucs comes with 10 skins to choose from. Click on color name below for a full preview. Also below is a full list of inFocus’s features.

    Some features:

    • jQuery Slider
    • Custom Sidebars
    • Custom Widgets
    • Portfolio Gallery
    • Huge Tabbed Admin Area
    • Layered PSDs are included for easy modification

    In-focus-corporate-business-commercial-wordpress-themes

    2. Display 3 in 1 ($42)

    Display is a Wordpress theme, best suited for business and portfolio sites. It comes with a fantastic 3D Image slideshow that can be controlled from your backend with a custom tool. The theme has a huge wordpress custom backend (8 additional Admin Pages) that make customization of the theme easy for those who don’t know much about coding or Wordpress. Display also has 3 fantastic skins to choose from.

    Some Features:

    • Valid XHTM Strict1.0 and CSS 2 .1, tableless Design
    • Multiple Page templates
    • jQuery Support
    • Huge admin area to customize the theme from your Wordpress backend

    Display-corporate-business-commercial-wordpress-themes

    3. Unite ($37)

    Unite is a merger of crisp design and powerful communication. It takes a clean, organized approach to presenting content so it’s easier to find what you want.

    This is a premium WordPress theme with 5 pre-made skins including a dark theme and textured background theme. The theme is easy to modify and ready to be up and running out of the box. The PSD files included have been customized to allow fast skinning.

    Some features:

  • Valid XHTML Strict and CSS
  • 2 slide show options: jQuery cycle and Gallery View
  • Superfish Dropdown Menu
  • PSD files included
  • 5 pre-made skins
  • Unite-corporate-business-commercial-wordpress-themes

    4. Luxury ($32)

    Luxury is a clean, feature packed Wordpress theme designed to make your life easier. You can check out video tutorial how to set up custom home page.

    Some features:

  • Multiple column layouts, controlled site wide or per post/page
  • Extensive Theme Settings Page
  • Custom Post Category Page
  • Multiple Home Layouts
  • Multiple Widget Areas
  • Luxury-corporate-business-commercial-wordpress-themes

    5. Prosto ($37)

    Prosto is a professional developed, clean designed Wordpress Theme with powerful CMS features. That is well suited for personal portfolio, blog, or any kind of business website. Easy to customize with extended admin panel for any kind of users. You can simply control your theme look and content without any special knowledge. Setup layout and choose custom sidebar for each page. Make unlimited portfolios in 3 different layouts that is give you a great flexibility and much more.

    Some features:

    • Unlimited sidebars
    • Unlimited portfolios
    • Translation ready
    • WP3 support
    • Layered .PSD files included
    • Customer support

    Prosto-corporate-business-commercial-wordpress-themes

    6. Centita ($27)

    Centita is Wordpress Theme with minimalist and elegant look that suitable for your professional corporate website, easy to customize and rich of features.

    Some features:

    • jQuery image slideshow
    • Widget ready
    • Built in AJAX contact form
    • Customizable homepage and sidebar area
    • 7 layered PSD files included

    Centita-corporate-business-commercial-wordpress-themes

    7. Pandora ($32)

    Pandora is a WordPress Template, designed to promote anything from a corporate business to a portfolio site.

    Some features:

    • Valid XHTML Strict 1.0 and CSS 2 .1, table-less layout, 960 Grid System
    • jQuery Support
    • Code optimized for getting the top results in the Search Engines
    • WordPress related Features
    • All PSD files are included
    • Documentation Included

    Pandora-corporate-business-commercial-wordpress-themes

    8. Hyperion ($37)

    Hyperion is a clean and stylish Wordpress Theme well suited for any business, portfolio, blogger, or anyone needing a beautiful website. Hyperion comes with 3 jquery slideshows, many page templates, 3 widget areas, over 80 theme options, and 6 color styles, 2 custom widgets for your Twitter feed and Flickr images.

    Hyperion-corporate-business-commercial-wordpress-themes

    9. BossPress ($32)

    BossPress is a Wordpress theme which is suitable for web developers, designers, photographers and small corporates.

    Some features:

    • Full width showcase
    • Absolute positioned logo & navigation
    • Cool portfolio page
    • Full widget ready
    • Black & white, 2 theme color option

    Bosspress-corporate-business-commercial-wordpress-themes

    10. Barely Corporate ($32)

    Barely Corporate is a clean Wordpress theme that couldn’t be more easy to use. With a beautiful exterior and a backend that gives you ultimate versatility and freedom, Barely Corporate will have your website up and running in no time.

    It may look similar on the outside with just a few visual tweeks, but on the inside it’s the smoothest Wordpress theme you’ve ever used. The main goal was to give you the maximum amount of control, but at the same time not throw a million options and meta boxes in your face. Barely Corporate’s new framework will truly allow you to get that new website up and running for you or your client successfully without all the hassle.

    Some features:

    • 12 styles
    • 4 dynamic widget areas
    • Full lightbox integration in pages and posts, including

      shortcode

    • Insert jQuery slideshows in your pages and posts with a simple shortcode
    • Unlimited portfolio pages, with flash and video capability
    • Wordpress 3 navigation menus supported

    Barely-corporate-corporate-business-commercial-wordpress-themes

    11. Realist ($27)

    This is woking right out of the box. Make your own property listings that can be searched, and filtered. This is a property website ready to go!

    Some features:

    • Colour variations
    • Smart searching
    • Fading banner
    • Property previews
    • Automatic image attachment
    • Google maps

    Realist-corporate-business-commercial-wordpress-themes

    12. Universal Business ($27)

    Widgets loaded template with an extremely easy configuration of the homepage, header, footer, sidebar and many others. You can launch a nice an clean customer’s website in no time. Our goal was to create a template that you will be able to use for any client you have, no matter if you are creating a car business website, hotel website or website for carpenters. You can use it for your own company as well.

    Some features:

    • Valid XHTM Strict1.0 and CSS 2 .1, tableless design
    • Multiple templates
    • jQuery elements
    • Simple administration
    • PSDs included

    Universal-business-corporate-business-commercial-wordpress-themes

    13. Vision ($37)

    Vision is a Wordpress theme designed with corporate businesses  in mind. It has a custom CMS integrated into the Wordpress administration area that allows you to build a fully functional professional website in minutes. The theme is also well suited for online portfolios and blogs.

    Some features:

    • PDF documentation with screenshots to help you through the installation and customization process
    • Lots of Video Tutorials to help you install and customize the theme
    • 5 Skins with one layered PSD file for the light skin
    • Full width home page jQuery slider with fading animation supporting images up to 1920px width
    • CSS and jQuery drop down Menu
    • Full width page template
    • 125×125 ads ready

    Vision-corporate-business-commercial-wordpress-themes

    14. BVD – Beautiful Website Design ($37)

    The WP version of very popular BVD – Beautiful Website Design. Any modern web browser will make this theme work with no issues! PC or Mac system does not make the difference as well.

    Some features:

    • jQuery Slider
    • Auto resizable thumbnails
    • Built In Twitter widget
    • Footer widgetized
    • Sidebar widgetized

    Bvd-corporate-business-commercial-wordpress-themes

    15. Real Estate ($27)

    Real Estate Theme is a professional Wordpress Template, that is suitable for real estate type websites or for showcasing your work and/or products. The Real Estate Theme comes with an easy to set up “featured” image slider (with it’s own admin options), a colour switcher with 3 colour schemes and a built-in contact form.

    Some features:

    • Supports Wordpress 3.0 menus
    • Theme admin panel
    • Three separate colour schemes
    • Built-in contact form
    • Share/social network buttons on posts and single page
    • Add recent Twitter and Flickr posts to your homepage
    • Google analytics integration

    Real-estate-corporate-business-commercial-wordpress-themes

    16. Silver Business ($32)

    SilverBusiness is a premium wordpress template designed for companies, products, or individuals. It provides great solution for small businesses, because it combines great corporate design with functionality of WordPress. It comes jam packed with a lot of features. This site will really make you stand out!

    Some features:

    • jQuery powered top rotator, which can be adjusted simply via wordpress admin
    • Lavalamp jquery menu
    • Cufom powered custom heading in Anivers font
    • Featured services section which can be adjusted via wordpress admin, or turned off
    • Valid XHTML 1 .0 Strict and CSS
    • PSD files included

    Silver-corporate-business-commercial-wordpress-themes

    17. Web Lider ($32)

    WebLider is a Simple And Elegant WebSite Template. It is great to emphasize and present your products and your business.

    The theme is easy to customize- options settings are included. This means that the options (such as images in slider, pages to show etc.) can be set in admin panel, without the need to edit the code.

    The theme is widget ready. It has multiple dynamic sidebars for the different pages and widgets can be easy dragged and dropped into them from the admin panel.

    Some features:

    • Featured Stylish Images Slider on the homepage
    • Multiple Dynamic(widget aware) Sidebars included
    • Tableless Design
    • Works and looks similar in all major browsers
    • Working jQuery/PHP contact form with validation

    Web-lider-corporate-business-commercial-wordpress-themes

    18. C3 ($37)

    Beautiful theme with a complex and customizable WP framework on top of it. Taking aside the unique, massive back end CMS , that gives you almost unending possibilities of making changes for your needs we’ve added something that no one on Theme Forest has so far: One click auto install.

    Sit back, relax, drink your coffee, and watch how our work frame does its magic and auto installs the Creative Juice WP theme to the version that you see on the live preview. This theme requires php 5.0

    Some features:

    • One click auto install
    • Jquery image slideshow
    • Dynamic sidebar widget creation
    • Feedburner ready
    • Cross browser compatible

    C3-corporate-business-commercial-wordpress-themes

    19. Centivio ($27)

    Centivio is clean web 2.0 style wordpress theme for business, company and corporate website. This theme comes with 10 color options for this theme for you can easily choose the color base on your business brand.

    Some features:

    • 10 color options
    • jQuery Cycle for rotate images in the homepage
    • jQuery Sliding Box in the portfolio page
    • 10 page template with its own right sidebar position
    • Home alternative with cu3er 3D Slider and 5 sidebar position

    Centivio-corporate-business-commercial-wordpress-themes

    20. Durable 5 in 1 ($32)

    Some features:

    • The Homepage includes Custom Cu3er Slider with ease of editing and changing category option. You can modify it by setting things via admin cu3er options
    • Homepage 3 columns with 3 pages Option which can be selected via Admin
    • Highly customized About Page, Blog Page, Portfolio Page and Services Page, you are able to edit the coding if needed as i have well commented the coding
    • Multilevel Dropdown Menu by Superfish
    • Portfolio page with prettyphoto mixed order for video options
    • Multilevel threaded comment lists
    • Custom Page selection for welcome content

    Durable-corporate-business-commercial-wordpress-themes

    21. Greatio ($32)

    Greatio is a Premium Wordpress Theme, best suited for Business, Portfolio, Interior and Architecture sites. It comes with some JQuery scripts which makes it better view. Also 7 color theme available (Red, Violet, Green, Blue, Orange, White and Wood).

    Some features:

    • Valid xHTML
    • Crossbrowser compatible
    • Cufon font replacement
    • 7 different styles (added 4 more color variations)
    • 3 different homepage sliders
    • Portfolio pages with LightBox

    Greatio-corporate-business-commercial-wordpress-themes

    22. TekNium ($22)

    TekNium is a clean modern business wordpress theme.

    Some features:

    • Valid xHTML/CSS
    • jQuery image slider
    • Admin options page
    • Option to show latest news and blog posts on home page
    • Widget ready

    Teknium-corporate-business-commercial-wordpress-themes

    23. Koncept 10 in 1 ($32)

    This theme has all the popular and common features which used by the current trend sites and more over this site has a lots of features built and customized user friendly and easy loading less weight hand coded and full functionality. Works in all the major browsers. For more details see features list below.

    Some features:

    • 2 Columns CSS Layout
    • Sidebar Widget ready Layout
    • Highly customized About Page, Blog Page, Portfolio Page and Services Page, you are able to edit each block as I have well commented the coding.
    • Multilevel Dropdown Menu by Superfish.
    • Portfolio page with full ease of customizing options.
    • Switch Colors From Admin Theme Option Page

    Koncept-corporate-business-commercial-wordpress-themes

    24. Universum ($27)

    Universum is clean and modern template designed for companies, small business and individuals. It combines fresh modern look with great functionality. It is really easy to set – up and comes with in-depth help file. Purchase it now and impress your customers today.

    Some features:

  • Top billboard rotator
  • Custom styling for all general wordpress widgets
  • Adjustable rotator slides and feature services – through theme options
  • Cool jQuery powered Lavalamp menu
  • Many subpages – blog, team, services, gallery, working contact form
  • Valid XHTML 1 .0 Strict and CSS
  • Universum-corporate-business-commercial-wordpress-themes

    25. New Sense ($32)

    NewSense is a Simple And Clean Business WordPress Theme. It’s great for any business and is designed in corporative and modern style. The home page is designed to emphasize your products.

    The theme is easy to customize- options settings are included. This means that the options (such as images in slider, categories to show etc.) can be set in admin panel, without the need to edit the code.

    The theme is widget ready. It has a dynamic sidebar and widgets can be easy dragged and dropped into it from the admin panel. The theme also goes with 3 styles- blue, orange and green and it is very easy to change between each other from the admin panel.

    Some features:

    • Featured Stylish Images Slider on the homepage
    • Dropdown menu support
    • Tableless Design
    • Advanced Admin Panel
    • Working jQuery/PHP contact form with validation
    • 7 PSD Files included

    New-sense-corporate-business-commercial-wordpress-themes

    26. Blitz ($32)

    Blitz is a premium business wordpress theme that suitable for business, company, corporate and portfolio. The design is clean and professional and comes with 5 color variations.

    Some features:

  • Clean and Professional Design
  • 5 Color Variation
  • 10 Pages Template
  • jQuery Slider and Lightbox
  • Cufon font replacement
  • Blog Page with custom category, just create a page and tell it which categories to include. Perfect for multiple blogs
  • Blitz-corporate-business-commercial-wordpress-themes

    27. Complexity ($37)

    Complexity is a simple business and portfolio theme that is easy to customize and will get you or your client’s website up and running in no time. It’s everything it’s name isn’t, which is simple. This theme takes advantage of the power of Wordpress 3 with the use of custom post types, navigation menus, background image control, post thumbnails, and much more.

    Some features:

    • 12 unique styles
    • 5 dynamic widget areas
    • Full lightbox integration in pages and posts, including

      shortcode

    • Timthumb image cropping with easy on/off setting
    • Unlimited portfolio pages, with flash and video capability
    • Wordpress 3 navigation menus supported
    • 6 Page Templates

    Complexity-corporate-business-commercial-wordpress-themes

    28. Web Explorer ($32)

    WebExplorer is a simple and elegant premium business WordPress theme. It’s great for any business and personal sites.

    The theme is easy to customize- options settings are included. This means that the options (such as images in slider, pages to show etc.) can be set in admin panel, without the need to edit the code.

    The theme is widget ready. It has multiple dynamic sidebars for the different pages and widgets can be easy dragged and dropped into them from the admin panel.

    Some features:

    • 3 Featured Stylish Sliders on the homepage
    • Multiple Dynamic (widget aware) Sidebars included
    • Advanced Admin Panel
    • Very descriptive help file with screen shots and examples
    • Working AJAX contact form with validation
    • 15 PSD Files included

    Web-explorer-corporate-business-commercial-wordpress-themes

    29. Vivee ($32)

    Vivee is clean web 2.0 style web template that suiable for business, company, corporate and portfolio website. There are 7 color version of this template.

    Some features:

    • 7 Color Variations
    • jQuery Cycle
    • 10 Pages Template with its own sidebar position
    • Portfolio page with jQuery Lytebox
    • Blog Page with custom category

    Vivee-corporate-business-commercial-wordpress-themes

    30. Small Business ($32)

    Small Business Theme is perfectly suited for business or portfolio site types. The theme has classic blog features as well as special portfolio section for displaying works or products.

    The built-in options panel (over 20 options), provides advanced theme customization to fit your or client requests.

    Update 1.4 brings support for Wordpress 3.0. The theme is backward compatible with Wordpress 2.9 but I highly encourage you to upgrade to Wordpress 3.0+ version as theme setup is much easier, only 4 steps! The new custom menus are supported and there is support for Google Analytics as well (or any other script/html that you want to add before end of the page). There is also jquery.easing plugin file permission fix that was causing trouble with slider.

    Some features:

    • Portfolio and Blog Functions (option for disabling blog feature)
    • Easy Installation
    • Easy Customization
    • XHTML 1 .0 Strict Valid
    • 5 Custom Widgets
    • No Boring Custom Fields

    Small-business-corporate-business-commercial-wordpress-themes

    31. Vanilla ($27)

    Vanilla Wordpress CMS Website Template is best suited for corporate, Business and Personal websites along with Blog facility

    Some features:

    • Auto thumbnail resize
    • Dropdown menu for categories and pages
    • Well commented code for all pages.
    • Well documention for speed and easing options customization for Featured Projects Slider
    • Valid XHTML and CSS
    • Designed with “960 GRID ” System
    • Read me file included for easy customization.

    Vanilla-corporate-business-commercial-wordpress-themes

    32. Andromeda ($37)

    Andromeda is a clean theme with functional CMS and unique features. A massive pack of backend CMS options was created for this product to give you full control while creating and editing the site and its features. The main idea behind this theme was to create a something clean and simple, useful, nice looking and easy to modify.

    Some features:

    • 3 Skins: Light Grey, Dark Grey and Mixed
    • 6 custom option modules
    • 12 widgets (8 custom) and unlimited sidebars
    • Accordion slider
    • Full control over sliders via CMS Options
    • Working AJAX contact form
    • Extensive documentation PDF file included

    Andromeda-corporate-business-commercial-wordpress-themes

    33. Transformer ($27)

    Transformer is a (CMS) wordpress theme that includes all the needed features that would give your website a great look with many administrative options to help you customize as you wish. For example, you can choose one of two scrollable styles and manage scrollable options like effects, speed, autoscroll and much more.

    Some features:

  • Valid xHTML and CSS
  • Huge theme admin panel to control your theme
  • 9 color schemes
  • Scrollable for featured posts with 2 styles and all the options needed for customization
  • Home page recent posts / Using mouseover to switch tabs
  • 404 page
  • Gravatar support
  • SEO Metadata ready
  • User’s manual guide – step by step with imageS
  • Transformer-corporate-business-commercial-wordpress-themes

    34. Colosseum ($37)

    Colosseum is the ultimate fusion of wordpress, creativity and great futures. This premium theme can be used for just about anything, from corporate websites to personal portfolios. It uses a lot of advanced css3 and jQuery effects, yet it still works on browsers that don’t support it.

    Some features:

  • CSS3 and jQuery powered billboard
  • 10 color options
  • Huge admin interface
  • Featured services with animated CSS3 tooltips
  • Robust, animated portfolio
  • 5 custom widgets
  • Social bookmarks
  • Integrated contact form
  • Colosseum-corporate-business-commercial-wordpress-themes

    35. Freshfolio ($32)

    Freshfolio is a Wordpress theme with a clean interface and awesome jQuery custom slideshow perfect for use with portfolio and business websites.

    Some features:

  • Custom jQuery Slideshow
  • Translate the theme into any language without touching any code
  • Custom newsticker on frontpage
  • Dynamic script adds lightbox to all images that links to images
  • Custom scroll follow script in all posts
  • Customize the whole theme from the admin panel and enable and disable almost anything
  • Available in millions of colors instantly.
  • Freshfolio-corporate-business-commercial-wordpress-themes

    36. Corporate Folio ($27)

    CorporateFolio is an elegant theme aimed at companies who need a quick and serious web presence setup. The homepage is perfectly suited to showcase your services, previous work or products while the blog is there to publish important company news and promote engagement through it.

    Some features:

    • Valid code
    • Custom homepage
    • Content Slider (either pages or posts)
    • Portfolio page template
    • 7 widgetised areas
    • Auto Image resizing

    Corporate-folio-corporate-business-commercial-wordpress-themes

    37. Explict ($37)

    Some features:

    • All Fundamental Page Templates (main page, full-width page, search results, 404, contact, archives, author pages, post pages)
    • 6 Additional Page Templates (blog, 3 portfolios, left sidebar page, right sidebar page)
    • Animated portfolio with category filtering
    • 30+ custom easy to use Shortcodes
    • Accordion Content Slider
    • Different Sidebar Per Post/Page
    • Layered PSD files

    Explict-corporate-business-commercial-wordpress-themes

    38. Kinetic 3 in 1 ($37)

    Kinetic Template has been designed to suit any kind of wordpress site. It comes with 3 color schemes at the moment, 2 Image sliders and several page templates.

    The theme provides total control over your content and lets you decide how you want to show your site’s content to your visitors. However, author is always open for suggestions for more features or designs.

    Some features:

  • 3 Unique Color Schemes
  • 6 Dynamic Widget Areas
  • Easy addition of Posts or Images in the Homepage Slider
  • 2 Image Sliders: Nivo Slider and Kwicks Accordion
  • Custom Write Panel to Extra info to every Post
  • 5 PSD files for easy Customization
  • Unlimited Support
  • Kinetic-corporate-business-commercial-wordpress-themes

    39. Good Business ($37)

    Good Business is a very clean Premium Business Wordpress theme. It can be use for 1 or 2 column layout. Has a beautiful sidebar navigation and breadcrumbs of every inside page for you to easy to navigate.

    Good Business comes with an impressive fully customizable jQuery and 3D slider, it has a 6 color style variation. This wordpress theme is fully customizable and well documented. Whether you’re a WordPress pro or just a beginner, this theme has you covered. With a huge custom back end area you have complete control over the look and style of your theme.

    Some features:

    • Conform to W3C standards
    • 2 Homepage sliders
    • 6 Page templates
    • Widgets sidebars
    • Ajax Contact Form
    • Huge Tabbed Admin Area
    • PSD files included
    • Extensive Documentation Included

    Good-business-corporate-business-commercial-wordpress-themes

    40. Podium ($32)

    Podium is clean and elegant business wordpress theme that can be switched as business, corporate, portfolio and blogging theme. there are 7 skins option available, also two slideshow type (3D and jQuery slideshow) and two homepage layout.

    Some features:

    • 7 skins option
    • 2 slideshow style
    • Custom Post type for slideshow
    • Support Wordpress 3.0 Menu System
    • Portfolio page with Pop up Lightbox
    • Widgetable homepage and footer area
    • Valid XHTML /CSS
    • Poweful Admin Theme Options
    • PSD Files included
    • Well Documented

    Podium-corporate-business-commercial-wordpress-themes

    41. Novatorix 10 in 1 ($37)

    Novatorix is a Wordpress Theme, best suited for Business and Portfolio sites. It comes with a fantastic 3D Image slideshow that can be controlled from your backend with a custom tool. The Theme has a huge wordpress custom backend (7 different option pages) that make customization of the Theme easy for those who don’t know much about coding or wordpress.

    Some features:

  • Multiple CSS Styles
  • Homepage 3D slider
  • Portfolio Gallery Templates
  • Page Templates
  • Custom Style Shortcodes
  • 5 custom widgets
  • 15 Custom widget sidebars
  • Breadcrumbs Navigation
  • All PSD files (with all 10 colors)
  • Detailed documentation included
  • Novatorix-corporate-business-commercial-wordpress-themes

    42. Aurora ($32)

    The Aurora WordPress version is author’s best project ever! Business site, Blog and Portfolio in one. Layout is designed for companys which love celan, crispy and professional designs. Each page was designed step by step with details. The package contains 6 full pages with 10 color schemes!

    Some features:

  • Layout schemes – here you have predefined columns (can be with or whitout header)
  • Quotes, paragraphs with images, headlines
  • Gallery – with tabbed navigation between galeries
  • Aurora-corporate-business-commercial-wordpress-themes

    43. Furu ($37)

    Some features:

    • All Fundamental Page Templates (main page, full-width page, search results, 404, contact, archives, author pages, post pages)
    • 6 Additional Page Templates (blog, 3 portfolios, left sidebar page, right sidebar page)
    • 30 custom easy to use Shortcodes
    • Custom Twitter Updates Widget
    • Contact Form Widget with all possible fields
    • Threaded comments ready
    • 100% Valid XHTML
    • Layered PSD files

    Furu-corporate-business-commercial-wordpress-themes

    44. Dabbe ($27)

    Some features:

  • jQuery graphic slider
  • Full editable slide text, box image and button
  • Clean design, clean CSS code
  • Featured news and business news on home page
  • Easy portfolio management
  • Full admin control
  • PSD files included
  • Well Documented
  • Dabbe-corporate-business-commercial-wordpress-themes

    45. Good Waves ($32)

    Goodwaves is a neat business and portfolio wordpress theme built to help you present your company, service or product in the easiest and most convenient way. It has an awesome 3D Image slider as well as some jQuery goodness to spice things up. The theme comes with an easy to understand and configure wordpress backend panel for quick customization and installation

    Some features:

  • Valid XHTM Strict1.0 and CSS3 tableless design
  • Multiple page templates
  • Dropdown Menu, improved with jQuery
  • jQuery and CSS3 effects that are unobtrusive and degrade gracefully if not supported
  • Documentation & e-mail Support provided
  • PSD file for customization included
  • Good-waves-corporate-business-commercial-wordpress-themes

    46. Avisio ($37)

    Avisio is a Wordpress theme that takes advantage with all the amazing new wordpress 3 features and is best suited for Portfolio and Business Websites. It has the ability to create unique skins right from your backend without the need to edit anything within your CSS files whith just a few mouse clicks and also offers the option to install content automatically when setting up the theme, so it will look like the theme preview.

    Some features:

  • Automatic content installation for a fast and easy setup, can be activated optionally
  • Style switching with color picker and multiple layout and font options.
  • New WordPress 3 Menu support
  • Unique Portfolio Sorting/Filtering with a custom jQuery script
  • Dropdwon Menu, improved with jQuery
  • Sleek Image preloader
  • Working AJAX/PHP contact form
  • PSD files included
  • Avisio-corporate-business-commercial-wordpress-themes

    47. Awesome Press ($27)

    Some features:

  • 4 color themes
  • jQuery framework
  • Multiple alternate page templates
  • 5 widget ready areas
  • Pagination for posts
  • Featured posts
  • Specially developed custom fields for easy posting
  • Admin theme options page
  • Step by Step installation PDF documentation
  • Awesome-press-corporate-business-commercial-wordpress-themes

    48. Quambizz ($27)

    Quambizz is an ultra clean and easy to use wordpress theme which can be used for a corporate purposes or if you want to set up a portfolio or even if you want a web site to represent your application.

    Do you like a clean style then this theme will be perfect for you. The theme comes with 3 color styles, a PSD for the slider and a PSD for the portfolio image preview, and many more cool features such as a theme admin panel to set up the homepage, featured category, portfolio category and more.

    Some features:

  • Well commented and clean CSS /XHTML Files
  • Tableless layout
  • 21 x layered PSD Files
  • Featured Slider
  • Dropdown Navigation
  • Multiple Page templates
  • Theme admin panel
  • Quambizz-corporate-business-commercial-wordpress-themes

    49. Biz ($27)

    Biz Template is clean style wordpress theme for business, company and corporate website. There are 3 color option for this theme that you can directly choose via “theme options” feature in the admin area.

    This theme comes with 8 page templates with its own sidebar widget. The pages template are Home, About, Services, Blog, Portfolio, Contact, Extra1 and Extra2.

    Some features:

  • Valid XHTML and CSS
  • Homepage jQuery Slider
  • jQuery Liquid Menu
  • 8 Page Templates
  • 20 Sidebar Position
  • Theme Options
  • Biz-corporate-business-commercial-wordpress-themes

    50. Crescento ($37)

    This site is best suitable for a business, Company, Blog, Portfolio, or freelancer Portfolio website as well. Theme works in all the major browsers, and has massive features to use for your next projects. For most of the part you can just follow the HTML with commented codes. The font used for the logo in case you are wondering is Myriad Pro, which comes with your Adobe Photoshop Installation. You can create new logo using the PSD file included.

    Some features:

  • 2 Columns CSS Layout.
  • Full width portfolio page
  • 3 Mainpage Sliders
  • Fancy Nivo Slider
  • Services page 2 blocks
  • Portfolio page with sidebar
  • Blog page and Single page with multilevel comments coded CSS
  • Layered PSD file included smart objects for ease of editing and saving the files
  • Compatibility ( IE 7 , IE 8, Firefox, Opera, Safari, Chrome)
  • Crescento-corporate-business-commercial-wordpress-themes

    May 17 2010

    10:00

    61 High Quality And Free xHTML Templates Part 2: Year 2010

    We discussed importance and usefulness about such free templates few days ago, but today we will present updated Part 2 with even more free xhtml templates! How cool is that – check out this article and get more 61 new and free template right now!

    Study code, design, style – how templates work in different browsers, what makes them look good – great case study! Evaluate it and bookmark for later use, when you’ll need to complete quick project or check some nifty effect with some cool code.

    1. Particle

    Preview | Download

    2. YIW Minimal

    Preview | Download

    3. Outliers

    Preview | Download

    4. Business Solutions

    Preview | Download

    5. Design Style

    Preview | Download

    6. Link Your Souls

    Preview | Download

    7. ABC Company

    Preview | Download

    8. Corporate

    Preview | Download

    9. Company Website

    Preview | Download

    10. Bussiness Company

    Preview | Download

    11. Black & Blue

    Preview | Download

    12. Dropex

    Preview | Download

    13. Design Style

    Preview | Download

    14. Creative Studio

    Preview | Download

    15. Blueyo

    Preview | Download

    16. DesignHQ

    Preview | Download

    17. Stylissimo

    Preview | Download

    18. Studio

    Preview | Download

    19. Minimalist

    Preview | Download

    20. Web Design Studio

    Preview | Download

    21. Skipopia

    Preview | Download

    22. Lily Pads

    Preview | Download

    23. Rambling Soul

    Preview | Download

    24. Design Style

    Preview | Download

    25. Design Style

    Preview | Download

    26. Portfolio

    Preview | Download

    27. Coffee Maker

    Preview | Download

    28. Newsy Universe

    Preview | Download

    29. Industrial Construction

    Preview | Download

    30. Pro Business

    Preview | Download

    31. Dzine

    Preview | Download

    32. RealOne

    Preview | Download

    33. Construction Company

    Preview | Download

    34. Portfolio

    Preview | Download

    35. Business Company

    Preview | Download

    36. ZooCroo

    Preview | Download

    37. UltimateWeb

    Preview | Download

    38. TV Archade

    Preview | Download

    39. Health Life

    Preview | Download

    40. Wise Business

    Preview | Download

    41. GreenScreen

    Preview | Download

    42. RS Garden

    Preview | Download

    43. Exquisite

    Preview | Download

    44. Lawyer & Attorney

    Preview | Download

    45. My Portfolio

    Preview | Download

    46. Digital Web

    Preview | Download

    47. Clean Pro

    Preview | Download

    48. BroadSheet

    Preview | Download

    49. CompleteWeb

    Preview | Download

    50. Design Studio

    Preview | Download

    51. Home Of Projects

    Preview | Download

    52. CleanInterface

    Preview | Download

    53. Corporate Black

    Preview | Download

    54. Company Name

    Preview | Download

    55. Construction Group

    Preview | Download

    56. Company Name

    Preview | Download

    57. Creative Mind

    Preview | Download

    58. Your Company

    Preview | Download

    59. Complete Collection

    Preview | Download

    60. Design Style

    Preview | Download

    61. Design Garden

    Preview | Download

    May 12 2010

    10:00

    100 Fresh And Free xHTML Templates Of Year 2010

    If  you remember some long time at 1stwebdesigner we published huge 2-part article (part 1, part 2) with 202 free HTML templates there, time has been passed and this is follow-up articles. This time you will find here just really new templates, mostly created in this year 2010!

    Hopefully this article will be good success as well, because I think these templates can really help if you need to complete any fast project, see how things work and finally get inspired! Enjoy!

    1. Aquatic

    Preview | Download

    2. HTML5

    Preview | Download

    3. BizGroup

    Preview | Download

    4. IT Website

    Preview | Download

    5. Solitude

    Preview | Download

    6. Inter Craft

    Preview | Download

    7. Catch Info

    Preview | Download

    8. Metamorph Nightsky

    Preview | Download

    9. Metamorph Outerspace

    Preview | Download

    10. Free xHTML & CSS3 One-Page Template

    Preview | Download

    11. Liqidity Graph

    Preview | Download

    12. 2 Breed

    Preview | Download

    13. Green Web

    Preview | Download

    14. Shape

    Preview | Download

    15. Projection

    Preview | Download

    16. New Rise

    Preview | Download

    17. Resume

    Preview | Download

    18. Studio 980

    Preview | Download

    19. Classic Luxury

    Preview | Download

    20. Flash Web

    Preview | Download

    21. School

    Preview | Download

    22. Rainbow Consultant

    Preview | Download

    23. WaterColored Portfolio

    Preview | Download

    24. Ntech Blog

    Preview | Download

    25. Happy Print Shop

    Preview | Download

    26. Intech Growth

    Preview | Download

    27. Green Solutions

    Preview | Download

    28. Metamorph Imaginary

    Preview | Download

    29. Simple

    Preview | Download

    30. Mac Style

    Preview | Download

    31. Jet 30

    Preview | Download

    32. Business Template

    Preview | Download

    33. MyBusiness

    Preview | Download

    34. Metamorph Black On Red xHTML And CSS Template

    Preview | Download

    35. E16 Fashion Club

    Preview | Download

    36. iPhone App

    Preview | Download

    37. Metamorph Alien Sun

    Preview | Download

    38. Online Education

    Preview | Download

    39. Consultant

    Preview | Download

    40. Book Store

    Preview | Download

    41. Speaker Blog

    Preview | Download

    42. Coporate Profiles

    Preview | Download

    43. Ubly

    Preview | Download

    44. Alexx C.

    Preview | Download

    45. Turrion development

    Preview | Download

    46. H Free Software

    Preview | Download

    47. Pink Shop Template

    Preview | Download

    48. Black Beat

    Preview | Download

    49. Photo Portfolio

    Preview | Download

    50. Shoe Store

    Preview | Download

    51. Metal Full

    Preview | Download

    52. Education

    Preview | Download

    53. Black Wave

    Preview | Download

    54. Grid System

    Preview | Download

    55. Simple Blue

    Preview | Download

    56. Our Work

    Preview | Download

    57. Global Business

    Preview | Download

    58. Light Gray

    Preview | Download

    59. Fruit Site

    Preview | Download

    60. Web Tech

    Preview | Download

    61. Particle

    Preview | Download

    62. Corporate

    Preview | Download

    63. Xtreme

    Preview | Download

    64. StudioClick

    Preview | Download

    65. Magazine

    Preview | Download

    66. Jeans

    Preview | Download

    67. Fruit Art

    Preview | Download

    68. Photographer

    Preview | Download

    69. Cloudy

    Preview | Download

    70. Real Estate

    Preview | Download

    71. Scene

    Preview | Download

    72. Fashion Blog

    Preview | Download

    73. MCUBE Solutions

    Preview | Download

    74. Gadget

    Preview | Download

    75. Metamorph Lilium xHTML And CSS Template

    Preview | Download

    76. Company

    Preview | Download

    77. Steak House

    Preview | Download

    78. Showcase

    Preview | Download

    79. General

    Preview | Download

    80. Travel

    Preview | Download

    81. Paper Blog

    Preview | Download

    82. Brown

    Preview | Download

    83. Metamorph Japanese Garden

    Preview | Download

    84. Blog Division

    Preview | Download

    85. Green Black

    Preview | Download

    86. Sport Center

    Preview | Download

    87. Night Dream

    Preview | Download

    88. Urban Gear

    Preview | Download

    89. Ornare

    Preview | Download

    90. Wine Social Network

    Preview | Download

    91. Distinctive

    Preview | Download

    92. Graphite

    Preview | Download

    93. Metamorph Cats World

    Preview | Download

    94. Unite

    Preview | Download

    95. Nova

    Preview | Download

    96. One Page Portfolio

    Preview | Download

    97. Mondays

    Preview | Download

    98. Earth Day

    Preview | Download

    99. YIW Folio

    Preview | Download

    100. Metamorph Peacefull

    Preview | Download

    April 15 2010

    14:00

    60 Web Design Photoshop Layout Tutorials From 2010

    Preview-web-design-layout-tutorials-from-2010 copyWant to get some new web designing skills right now? Ever wondered how latest trends in web design are actually created and want to discover it?
    Spare several hours of your time and go through this huge list of web design Photoshop tutorials! And you don’t have to worry about those tutorials being outdated, because all of them are created in this year 2010! Time to keep up with latest trends and learn something new! Let’s go!

    1. Business Layout

    Business-layout-web-design-layout-tutorials-from-2010

    2. Web Design Layout #14

    #14-web-design-layout-tutorials-from-2010

    3. Create a Clean and Professional Web Design in Photoshop

    Create-clean-and-professional-web-design-in-photoshop-web-design-layout-tutorials-from-2010

    4. Create a Slick and Minimalist Web Layout in Photoshop

    Create-slick-minimalist-in-photoshop-web-design-layout-tutorials-from-2010

    5. Create a Wooden Grunge Portfolio Web Layout in Photoshop

    Create-wooden-grunge-portfolio-in-photoshop-web-design-layout-tutorials-from-2010

    6. Design a Dark Business Layout

    Design-dark-business-web-design-layout-tutorials-from-2010

    7. How to Create a Web Hosting Layout

    How-to-create-hosting--web-design-layout-tutorials-from-2010

    8. Create a Business Web Template

    Business-layout-web-design-layout-tutorials-from-2010

    9. Design a Clean Business Layout

    Design-clean-business-web-design-layout-tutorials-from-2010

    10. How to Create a Software WebLayou

    How-to-create-software-tweb-design-layout-tutorials-from-2010

    11. Portfolio Lyout Ceated Wth Jeans Texture

    Portfolio-created-with-jeans-texture-web-design-layout-tutorials-from-2010

    12. Create a Smple Yet Attractive Web Layout

    Create-simple-yet-attractive-web-design-layout-tutorials-from-2010

    13. Create a Professional Web 2.0 Layout

    Create-professional-2-0-web-design-layout-tutorials-from-2010

    14. Create a Grungy, Translucent Web Portfolio Design

    Create-grungy-translucent-portfolio-web-design-layout-tutorials-from-2010

    15. Design a Bold and Vibrant Portfolio

    Design-bold-vibran-portfolio-web-design-layout-tutorials-from-2010

    16. Design a Sleek Bokeh Styled Portfolio

    Design-sleek-bokeh-styled-portfolio-web-design-layout-tutorials-from-2010

    17. Design a Sleek Textured Blue Portfolio

    Design-sleek-textured-blue-portfolio-web-design-layout-tutorials-from-2010

    18. Create a Chalkboard Style Wordpress Layout in Photoshop

    Create-chalkboard-style-wordpress-in-photoshop-web-design-layout-tutorials-from-2010

    19. Deep in Space Portfolio Layout Design in Photoshop

    Deep-in-space-portfolio-in-photoshop-web-design-layout-tutorials-from-2010

    20. Create a Clean and Classy Web Design in Photoshop

    Create-clean-classy-in-photoshop-web-design-layout-tutorials-from-2010

    21. Clean Textured Wordpress Style Layout in Photoshop

    Clean-textured-wordpress-style-in-photoshop-web-design-layout-tutorials-from-2010

    22. Clean and Minimalistic Portfolio Layout in Photoshop

    Clean-minimalistic-portfolio-in-photoshop-web-design-layout-tutorials-from-2010

    23. Beautiful Music Streaming Website Design in Photoshop

    Beautiful-music-streaming-website-in-photoshop-web-design-layout-tutorials-from-2010

    24. Simplistic Black and White Portfolio Layout in Photoshop

    Simplistic-black-white-portfolio-in-photoshop-web-design-layout-tutorials-from-2010

    25. Clean and Creative WordPress Style Theme in Photoshop

    Clean-creative-wordpress-style-theme-in-photoshop-web-design-layout-tutorials-from-2010

    26. Photo Gallery Website Layout in Photoshop

    Photo-gallery-website-in-photoshop-web-design-layout-tutorials-from-2010

    27. Light and Colorful Grunge Portfolio Layout in Photoshop

    Light-colorful-grunge-portfolio-in-photoshop-web-design-layout-tutorials-from-2010

    28. Beautiful and Clean Portfolio Layout in Photoshop

    Beautiful-clean-portfolio-in-photoshop-web-design-layout-tutorials-from-2010

    29. Simple Business Style Portfolio Layout in Photoshop

    Simple-business-style-portfolio-in-photoshop-web-design-layout-tutorials-from-2010

    30. Simple iPhone Application Website Layout in Photoshop

    Simple-iphone-application-website-in-photoshop-web-design-layout-tutorials-from-2010

    31. How to Create a Distinguishable Textured Web Layout in Photoshop

    How-to-create-distinguishable-textured-in-photoshop-web-design-layout-tutorials-from-2010

    32. Learn How To Create A Clean Layout In Photoshop

    Learn-how-to-create-clean-in-photoshop-web-design-layout-tutorials-from-2010

    33. Designing Cool Interface for Magazine Portal

    Designing-cool-interface-for-magazine-portal-web-design-layout-tutorials-from-2010

    34. How to Make a Vibrant Portfolio Web Design in Photoshop

    How-to-make-vibrant-portfolio-in-photoshop-web-design-layout-tutorials-from-2010

    35. Create a Simple Layout For Architecture Or Real Estate

    Create-simple-for-srchitecture-or-real-estate-web-design-layout-tutorials-from-2010

    36. Create a Hosting Layout In Adobe Photoshop

    Create-hosting-In-adobe-photoshop-web-design-layout-tutorials-from-2010

    37. Design an Elegant Rustic Layout For Hotels Or Restaurants

    Design-elegant-rustic-for-hotels-restaurants-web-design-layout-tutorials-from-2010

    38. Design a Light WordPress Theme In Photoshop

    Design-light-wordpress-theme-in-photoshop-web-design-layout-tutorials-from-2010

    39. How to Create the Interior Design Layout

    How-to-create-interior-web-design-layout-tutorials-from-2010

    40. Create a Racing Website

    Create-racing-website-web-design-layout-tutorials-from-2010

    41. How To Create a Rockin’ Website Layout In Photoshop

    How-to-create-rocking-website-in-photoshop-web-design-layout-tutorials-from-2010

    42. Create a Portfolio Website In Photoshop

    Create-portfolio-website-in-photoshop-web-design-layout-tutorials-from-2010

    43. Create a Business Web Layout In Photoshop

    Create-business-in-photoshop-web-design-layout-tutorials-from-2010

    44. Learn How to Create a Marketing/SEO Web Layout In Photoshop

    Learn-how-to-create-marketing-seo-in-photoshop-web-design-layout-tutorials-from-2010

    45. Create a Modern Photoshop Template For Joomla, WordPress or Drupal

    Create-modern-photoshop-template-for-joomla-wordpress-drupal-web-design-layout-tutorials-from-2010

    46. Create Portfolio Web Layout In Photoshop

    Create-portfolio-in-photoshop-web-design-layout-tutorials-from-2010

    47. Create a Classy Web Template In Photoshop

    Create-classy-template-in-photoshop-web-design-layout-tutorials-from-2010

    48. How to Create an Amazing Grunge Layout

    How-to-create-amazing-grunge-web-design-layout-tutorials-from-2010

    49. How to Create a Layout For Your One-Page Portfolio?

    How-to-create-for-your-one-page-portfolio-web-design-layout-tutorials-from-2010

    50. Create Stylish Retro Website Template Using Photoshop

    Create-stylish-retro-website-template-using-photoshop-web-design-layout-tutorials-from-2010

    51. Design a Corporate Business Layout

    Corporate-business-web-design-layout-tutorials-from-2010

    52. How to Do a Fancy Layout For a Graphic Design Blog Using Photoshop

    How-to-do- fancy-for-graphic-blog-using-photoshop-web-design-layout-tutorials-from-2010

    53. How to Find Inspiration and Design the Layout of a Website

    How-to-find-inspiration-website-web-design-layout-tutorials-from-2010

    54. Create a Wooden Background Website Layout in Photoshop

    Create-wooden-background-website-in-photoshop-web-design-layout-tutorials-from-2010

    55. Design Clean and Colorful Web Layout

    Clean-colorful-web-design-layout-tutorials-from-2010

    56. How to Design a Photolog Theme For WordPress

    How-to-photolog-theme-for-wordpress-web-design-layout-tutorials-from-2010

    57. Create Landscape WordPress Theme

    Create-landscape-wordpress-theme-web-design-layout-tutorials-from-2010

    58. Create a Beautiful and Creative Blog Design in Photoshop

    Create-beautiful-creative-blog-in-photoshop-web-design-layout-tutorials-from-2010

    59. Create a Clean Blue Portfolio Design in Photoshop

    Create-clean-blue-portfolio-in-photoshop-web-design-layout-tutorials-from-2010

    60. Create a Gnarly Snowboarding Themed Web Design

    Create-gnarly-snowboarding-themed-web-design-layout-tutorials-from-2010

    06:02

    34 Various Templates And PSDs To Ease Daily Workflow

    Title-creator-templates-for-designersTemplates can help you when you don’t really know how to start your design or don’t know the exact size of, for example, business card. Templates can be useful to show off your DVD, T-shirt etc design very fast – take advantages of already premade templates and files you can find freely over the Internet!

    In this article you will find templates for web designers and templates for average photoshop users as well. You can exploit, customize and improve those designs easily to suit your specific needs.

    1. 960 Grid System

    The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

    960-grid-system-templates-for-designers

    2. Business Card Template

    10 layer 350 dpi business card template with bleeds and margins.

    350-dpi-business-card-templates-for-designers

    3. A4 Business Card Template

    300 dpi PSD file.

    A4-business-card-templates-for-designers

    4. Huge Collection of T-Shirt Design Mockup Templates

    Huge collection of T shirt mockups. Photos and vectors.

    T-shirt-mockups-templates-for-designers

    5. Skateboard Template

    Detailed psd with natural, natural with trucks and colored deck.

    Skateboard-templates-for-designers

    6. Twitter Background Template

    Template with guides that match up with different resolutions.

    Twitter-background-templates-for-designers

    7. Curved Bill Baseball Template

    Layered PSD file.

    Curved-bill-baseball-templates-for-designers

    8. Film Strip Template

    Psd file containing a short film strip with guides set to lay out 7 small images.

    Film-strip-templates-for-designers

    9. DVD Case Template

    Customizable PSD for DVD case preview.

    Dvd-case-templates-for-designers

    10. DVD Plastic Case PSD

    Great template to show off your DVD covers.

    Dvd-plastic-case-templates-for-designers

    11. DVD Box Creator

    PSD and photoshop action to create DVD boxes. Easy understandable and great tool.

    Dvd-box-creator-templates-for-designers

    12. DVD Case Inlay PSD Template

    Inlay for an Amaray DVD case, 300 dpi, CMYK including DVD video logos.

    Dvd-case-inlay-templates-for-designers

    13. DVD Label Template

    Detailed PSD template, 300 dpi, CMYK.

    Dvd-label-templates-for-designers

    14. iPhone 3G PSD

    Useful for creating iPhone designs, themes.

    Iphone-3g-template-templates-for-designers

    15. Metal Can PSD

    Layered PSD file.

    Metal-can-psd-templates-for-designers

    16. Magazine Template

    Large PSD template.

    Magazine-psd-templates-for-designers

    17. Safari Template

    Editable PSD file. Handy for web designers.

    Safari-templates-for-designers

    18. Vector Safari Template

    PSD file, built using shapes and styles.

    Vector-safari-templates-for-designers

    19. Browser Templates PSD

    Lot of popular browser templates with address bar, favicon and more.

    Browser-templates-templates-for-designers

    20. Browser Templates PSD

    All the popular browsers in different OS and resolutions.

    Browser-templates-psd-web-safe-area-templates-for-designers

    21. Browser Form Elements

    Useful tool for web designers. Mac Firefox 3 and Vista IE7.

    Browser-form-elements-templates-for-designers

    22. Browser Screens and Website Elements

    Useful set of vector website assets you can use to mock up your client projects, present your work, or get a quick visual while laying out websites. Illustrator file.

    Browser-screens-website-elements-templates-for-designers

    23. Web Browser Elements

    Most popular web browser elements on different OSD.

    Web-browser-elements-psd-templates-for-designers

    24. iPhone GUI Elements

    Layered PSD files.

    Iphone-gui-elements-templates-for-designers

    25. Snowboard Template

    High resolution PSD file. Helpful creating iPhone themes.

    Snowboard-templates-for-designers

    26. Ski Template

    High resolution PSD file.

    Ski-psd-templates-for-designers

    27. Mouse Cursor And Hand Pointer Icon PSD

    Computer mouse cursors, arrow and hand pointer icons. Pixel style symbols isolated on white background. Windows 7 and Vista cursors recreations, white body shape with a black frame.

    Mouse-cursor-hand-pointer-icon-templates-for-designers

    28. Black Software Box PSD

    3D software box template in black color and a shiny orange details. Perspective view box with a nice gradients, soft edges and corners. The box can be easily customized with your text and images

    Black-software-box-psd-templates-for-designers

    29. Blank CD Template

    The top of a white CD/DVD disk. Blank CD photoshop template. Isolated on white background, psd file available for download, layered file. You can place your own logo, image, text or message.

    Blank-cd-psd-templates-for-designers

    30. Paperbag PSD

    Psd-paperbag-templates-for-designers

    31. HDTV Template

    Layered PSD and XCF file.

    Hdtv-psd-templates-for-designers

    32. Print Product Templates

    When you start with one of the templates, you can easily view product dimensions, layout, bleed, safety and more. PDF files.

    Print-design-pdf-templates-for-designers

    33. Blackberry PSD

    PSD file with 135 layers.

    Black-berry-psd-layered-templates-for-designers

    34. iPod Nano PSD

    Ipod-nano-4g-psd-templates-for-designers

    April 13 2010

    07:30

    How to Create a PHP Website Template from Scratch

    This is a tutorial on creating a PHP website template starting with HTML and CSS. We will start with the basics and you can also download the final product. Please remember that I am using very basic CSS styling in this example just for you to get the idea, and not so much to make it look pretty. The download will contain both the styled example as well as a complete blank template that you can use for your own starting point for any project personal or commercial. The demo files are released under GPL V2.

    This tutorial assumes you have basic understanding of html and css. At the end of this tutorial you should have a basic understanding of using php and converting an html site to php.You can also download the demo files here.

    The actual template will be created in 10 easy steps. I will then take it a step further to show you how to add variables to your template.

    Setting up the File structure and Folders

    Step One

    Let’s start by creating a new folder. I have named this folder php_site

    Inside of this folder we are now going to create two new files. One is index.html and the other file is going to be named style.css

    Step Two

    Now we are going to create two more folders inside of our main folder. The first folder is going to be named includes, and the second folder will be named variables.

    We should now have a setup that looks like the following:

    Step Three

    Now, using your favorite html editor open the index.html file. We are going to to create a basic html website document. This is the code I am using:

    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
    
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    
    <meta name="description" content="" />
    
    <meta name="keywords" content="" />
    
    <meta name="author" content="" />
    
    <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
    
    <title>1stWebDesigner PHP Template</title>
    
    </head>
    
    	<body>
    
    		<div id="wrapper">
    
    <div id="header">
    
    </div> <!-- end #header -->
    
    <div id="nav">
    
    </div> <!-- end #nav -->
    
    <div id="content">
    
    </div> <!-- end #content -->
    
    <div id="sidebar">
    
    </div> <!-- end #sidebar -->
    
    <div id="footer">
    
    </div> <!-- end #footer -->
    
    		</div> <!-- End #wrapper -->
    
    	</body>
    
    </html>
    

    Step Four

    Now I am going to open up the style.css file and add the divs we will be using. I have added very basic styling so you can see the site and get the idea of what we are doing. Remember that you can use your own styling when creating your website to suit your needs.

    This is the CSS I am adding to the stylesheet:

    
    body {
    background-color:#f1f1f1;
    font-family: georgia,sans-serif;
    color:#333;
    margin:0;
    padding:0;
    }
    
    #wrapper {
    width:960px;
    background-color:#f8f8f8;
    margin:0 auto;
    border-left:1px solid #ccc;
    border-right:1px solid #ccc;
    }
    
    #header {
    width:960px;
    height:135px;
    margin:0 auto;
    margin-bottom:25px;
    border-bottom:1px solid #ccc;
    border-top:1px solid #ccc;
    }
    
    #header h2 {
    padding:10px;
    }
    
    #nav {
    width:960px;
    height:40px;
    border-bottom:1px solid #ccc;
    }
    
    #nav a {
    display:inline;
    padding:10px;
    text-decoration:none;
    background-color:#f1f1f1;
    }
    
    #nav a:hover {
    background-color:#bababa;
    height:80px;
    }
    
    #content {
    width:675px;
    float:left;
    padding:10px;
    }
    
    #sidebar {
    width:200px;
    float:right;
    margin-bottom:25px;
    }
    
    #sidebar a {
    text-decoration:none;
    }
    
    #sidebar li {
    list-style:none;
    }
    
    #footer {
    clear:both;
    width:960px;
    height:135px;
    border-top:1px solid #ccc;
    }
    
    #footer p {
    padding:10px;
    }
    

    Step Five

    Next we will create some more files that we will be using when we start converting our template to php.

    Open up the folder we created inside of our main folder called variables. Next, create a blank file called variables.php

    Then go into the other folder we created called includes and create the following files:

    header.php
    nav.php
    sidebar.php
    footer.php

    Step Six

    Now we will need to add some content to our index.html file. I have filled in the header area with an H2 tag for the website header title. I will also be adding the links in the nav area, as well as some text in the content area, sidebar, and footer. The final index.html file now looks like this:

    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
    
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    
    <meta name="description" content="" />
    
    <meta name="keywords" content="" />
    
    <meta name="author" content="" />
    
    <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
    
    <title>1stWebDesigner PHP Template</title>
    
    </head>
    
    	<body>
    
    		<div id="wrapper">
    
    <div id="header">
    
    	<h2>1stWebDesigner PHP Template</h2>
    
    </div> <!-- end #header -->
    
    <div id="nav">
    
    	<a href="#">Home</a>
    	<a href="#">About</a>
    	<a href="#">Portfolio</a>
    	<a href="#">Contact</a>
    
    </div> <!-- end #nav -->
    
    <div id="content">
    
    <h1>Heading1</h1>
    <h2>Heading2</h2>
    <h3>Heading3</h3>
    <h4>Heading4</h4>
    <h5>Heading5</h5>
    
    <h3>Paragraph Element</h3>
    
    <p>
    
    Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.
    
    </p>
    
    <p>
    
    Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.
    
    </p>
    
    <h3>Another Heading Starting Point</h3>
    
    <p>
    
    Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.
    
    </p>
    
    <p>
    
    Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.
    
    </p>
    
    </div> <!-- end #content -->
    
    <div id="sidebar">
    
    <h3>Navigation</h3>
    	<li><a href="#">Home</a></li>
    	<li><a href="#">About Us</a></li>
    	<li><a href="#">Links</a></li>
    	<li><a href="#">Portfolio</a></li>
    	<li><a href="#">Contact</a></li>
    
    <h3>Box Two</h3>
    	<li><a href="#">Link Here</a></li>
    	<li><a href="#">Link Here</a></li>
    	<li><a href="#">Link Here</a></li>
    	<li><a href="#">Link Here</a></li>
    	<li><a href="#">Link Here</a></li>
    
    <h3>Box Three</h3>
    	<li><a href="#">Link Here</a></li>
    	<li><a href="#">Link Here</a></li>
    	<li><a href="#">Link Here</a></li>
    	<li><a href="#">Link Here</a></li>
    	<li><a href="#">Link Here</a></li>
    
    </div> <!-- end #sidebar -->
    
    <div id="footer">
    	<p>Copyright &copy 2010 <a href="http://www.1stwebdesigner.com">1stWebDesigner.com PHP Template</a></p>
    </div> <!-- end #footer -->
    
    		</div> <!-- End #wrapper -->
    
    	</body>
    
    </html>
    

    Step Seven

    Now we will start converting our template to PHP. We will need to take a brief look at the html code we have and decide which areas will be sliced. We will be removing specific areas from the index.html file and placing them into the php files we have created inside the includes folder.

    Let’s start with the top of the html document on the header. Copy the header div and cut it from the document. Then open your includes folder, and the header.php file we created and add the code to the header.php

    header.php

    
    <div id="header">
    
    	<h2>1stWebDesigner PHP Template</h2>
    
    </div> <!-- end #header -->
    

    Make sure this area has now been removed completely from the index.html file and placed into the header.php file. In place of this code, we will now add the following to the index.html file.

    
    <?php include('includes/header.php'); ?>
    

    Now our index.html should look like this: (Make a note that the header area has now been replaced with our php include function that is calling our external header.php file)

    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
    
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    
    <meta name="description" content="" />
    
    <meta name="keywords" content="" />
    
    <meta name="author" content="" />
    
    <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
    
    <title>1stWebDesigner PHP Template</title>
    
    </head>
    
    	<body>
    
    		<div id="wrapper">
    
    <?php include('includes/header.php'); ?>
    
    <div id="nav">
    
    	<a href="#">Home</a>
    	<a href="#">About</a>
    	<a href="#">Portfolio</a>
    	<a href="#">Contact</a>
    
    </div> <!-- end #nav -->
    
    <div id="content">
    
    <h1>Heading1</h1>
    <h2>Heading2</h2>
    <h3>Heading3</h3>
    <h4>Heading4</h4>
    <h5>Heading5</h5>
    
    <h3>Paragraph Element</h3>
    
    <p>
    
    Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.
    
    </p>
    
    <p>
    
    Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.
    
    </p>
    
    <h3>Another Heading Starting Point</h3>
    
    <p>
    
    Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.
    
    </p>
    
    <p>
    
    Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.
    
    </p>
    
    </div> <!-- end #content -->
    
    <div id="sidebar">
    
    <h3>Navigation</h3>
    	<li><a href="#">Home</a></li>
    	<li><a href="#">About Us</a></li>
    	<li><a href="#">Links</a></li>
    	<li><a href="#">Portfolio</a></li>
    	<li><a href="#">Contact</a></li>
    
    <h3>Box Two</h3>
    	<li><a href="#">Link Here</a></li>
    	<li><a href="#">Link Here</a></li>
    	<li><a href="#">Link Here</a></li>
    	<li><a href="#">Link Here</a></li>
    	<li><a href="#">Link Here</a></li>
    
    <h3>Box Three</h3>
    	<li><a href="#">Link Here</a></li>
    	<li><a href="#">Link Here</a></li>
    	<li><a href="#">Link Here</a></li>
    	<li><a href="#">Link Here</a></li>
    	<li><a href="#">Link Here</a></li>
    
    </div> <!-- end #sidebar -->
    
    <div id="footer">
    	<p>Copyright &copy 2010 <a href="#">Website Name</a></p>
    </div> <!-- end #footer -->
    
    		</div> <!-- End #wrapper -->
    
    	</body>
    
    </html>
    

    Step Eight

    Now we will continue to slice the html document and place the code in the proper php files we made.

    Next let’s move to the nav div. The same as above, we are going to copy and cut that piece of code and place it into our nav.php file that is located inside of the includes folder.

    This is what we are adding to the nav.php file:

    
    <div id="nav">
    
    	<a href="#">Home</a>
    	<a href="#">About</a>
    	<a href="#">Portfolio</a>
    	<a href="#">Contact</a>
    
    </div> <!-- end #nav -->
    

    Again we will replace the code removed from the html document with the following:

    
    <?php include(includes/nav.php); ?>
    

    Now our index.html document will look like this: (Again note that both the header, and the nav area are now replaced with php includes)

    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
    
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    
    <meta name="description" content="" />
    
    <meta name="keywords" content="" />
    
    <meta name="author" content="" />
    
    <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
    
    <title>1stWebDesigner PHP Template</title>
    
    </head>
    
    	<body>
    
    		<div id="wrapper">
    
    <?php include('includes/header.php'); ?>
    
    <?php include('includes/nav.php'); ?>
    
    <div id="content">
    
    <h1>Heading1</h1>
    <h2>Heading2</h2>
    <h3>Heading3</h3>
    <h4>Heading4</h4>
    <h5>Heading5</h5>
    
    <h3>Paragraph Element</h3>
    
    <p>
    
    Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.
    
    </p>
    
    <p>
    
    Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.
    
    </p>
    
    <h3>Another Heading Starting Point</h3>
    
    <p>
    
    Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.
    
    </p>
    
    <p>
    
    Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.
    
    </p>
    
    </div> <!-- end #content -->
    
    <div id="sidebar">
    
    <h3>Navigation</h3>
    	<li><a href="#">Home</a></li>
    	<li><a href="#">About Us</a></li>
    	<li><a href="#">Links</a></li>
    	<li><a href="#">Portfolio</a></li>
    	<li><a href="#">Contact</a></li>
    
    <h3>Box Two</h3>
    	<li><a href="#">Link Here</a></li>
    	<li><a href="#">Link Here</a></li>
    	<li><a href="#">Link Here</a></li>
    	<li><a href="#">Link Here</a></li>
    	<li><a href="#">Link Here</a></li>
    
    <h3>Box Three</h3>
    	<li><a href="#">Link Here</a></li>
    	<li><a href="#">Link Here</a></li>
    	<li><a href="#">Link Here</a></li>
    	<li><a href="#">Link Here</a></li>
    	<li><a href="#">Link Here</a></li>
    
    </div> <!-- end #sidebar -->
    
    <div id="footer">
    	<p>Copyright &copy 2010 <a href="#">Website Name</a></p>
    </div> <!-- end #footer -->
    
    		</div> <!-- End #wrapper -->
    
    	</body>
    
    </html>
    

    Step Nine

    Now it is time to do the sidebar. Copy and cut the sidebar div and place it into the sidebar.php file we created that is located inside the includes folder.

    This is the code we are adding:

    sidebar.php

    
    <div id="sidebar">
    
    <h3>Navigation</h3>
    	<li><a href="#">Home</a></li>
    	<li><a href="#">About Us</a></li>
    	<li><a href="#">Links</a></li>
    	<li><a href="#">Portfolio</a></li>
    	<li><a href="#">Contact</a></li>
    
    <h3>Box Two</h3>
    	<li><a href="#">Link Here</a></li>
    	<li><a href="#">Link Here</a></li>
    	<li><a href="#">Link Here</a></li>
    	<li><a href="#">Link Here</a></li>
    	<li><a href="#">Link Here</a></li>
    
    <h3>Box Three</h3>
    	<li><a href="#">Link Here</a></li>
    	<li><a href="#">Link Here</a></li>
    	<li><a href="#">Link Here</a></li>
    	<li><a href="#">Link Here</a></li>
    	<li><a href="#">Link Here</a></li>
    
    </div> <!-- end #sidebar -->
    

    We will again do the same thing for the footer area. Copy and cut the footer div and place it into the footer.php file we created in the same includes folder.

    Here is the footer.php code:

    
    <div id="footer">
    	<p>Copyright &copy 2010 <a href="#">Website Name</a></p>
    </div> <!-- end #footer -->
    

    Now with all of our elements taken from the index.html file and added to the different php files, the final index.html should look like this:

    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
    
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    
    <meta name="description" content="" />
    
    <meta name="keywords" content="" />
    
    <meta name="author" content="" />
    
    <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
    
    <title>1stWebDesigner PHP Template</title>
    
    </head>
    
    	<body>
    
    		<div id="wrapper">
    
    <?php include('includes/header.php'); ?>
    
    <?php include('includes/nav.php'); ?>
    
    <div id="content">
    
    <h1>Heading1</h1>
    <h2>Heading2</h2>
    <h3>Heading3</h3>
    <h4>Heading4</h4>
    <h5>Heading5</h5>
    
    <h3>Paragraph Element</h3>
    
    <p>
    
    Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.
    
    </p>
    
    <p>
    
    Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.
    
    </p>
    
    <h3>Another Heading Starting Point</h3>
    
    <p>
    
    Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.
    
    </p>
    
    <p>
    
    Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.
    
    </p>
    
    </div> <!-- end #content -->
    
    <?php include('includes/sidebar.php'); ?>
    
    <?php include('includes/footer.php'); ?>
    
    		</div> <!-- End #wrapper -->
    
    	</body>
    
    </html>
    

    Step Ten

    Now that our index.html is properly sliced, we can rename the index.html file to index.php

    Now that we have created this template, as long as the php includes are on any page we only have to modify the one single file to make it visible accross your entire website. This again is good for anyone with a lot of content and pages. Instead of having to edit the sidebar on every page of your site you can now just edit the sidebar.php file and it will reflect on all of your pages. This makes it a lot easier to keep up with large portions of website material.

    Our folder should now look like this:

    Creating PHP Variables for the template

    Now we will make it a little more dynamic and even easier to be able to modify when needed. Lets take a look at the header.php file inside the includes folder.

    
    <div id="header">
    
    	<h2>1stWebDesigner PHP Template</h2>
    
    </div> <!-- end #header -->
    

    We are going to modify this a little bit to change the H2 heading from a different file using a variable. Creating a variable is good for areas on your website that may change more than others. It may also be a good way to allow clients to edit a single file to change certain items on their website.

    Now let’s replace the text within the H2 heading to this:

    
    <h2><?php echo $heading ?></h2>
    

    Now our header.php file will look like this: Notice we placed the echo php command within the H2 brackets. This will give our variable output the H2 heading we want.

    
    <div id="header">
    
    	<h2><?php echo $heading ?></h2>
    
    </div> <!-- end #header -->
    

    Next we are going to open up the file inside of the variables folder that we created named variables.php

    We will add the variable that we are going to echo on the website heading. I have named this variable heading.

    variables.php

    
    <?php
    
    $heading='1stWebDesigner PHP Template';
    
    ?>
    

    Now, at any time we want to change what is titled on the heading of our template, we can simply open our variables.php file and modify what is between the quotes. This will always be the output on our header.php file where we placed the echo command.

    One step Further

    Now we will do the same thing to our footer.php file. Open the footer.php that we have in our includes folder and let’s take a look at it:

    
    <div id="footer">
    	<p>Copyright &copy 2010 <a href="#">Website Name</a></p>
    </div> <!-- end #footer -->
    

    Let’s change this like we did the header file, and add a variable to use.

    We will place our echo command within the paragraph brackets. You should now have the following in your footer.php:

    
    <div id="footer">
    	<p><?php echo $footer ?></p>
    </div> <!-- end #footer -->
    

    And again we will visit our variables.php file located in the variables folder we made and we will now update it with our new variable. The final should now look like this:

    variables.php

    
    <?php
    
    $heading='1stWebDesigner PHP Template';
    
    $footer='Copyright &copy; 2010 1stWebDesigner PHP Template';
    
    ?>
    

    Make note of the above. When using PHP variables we cannot use a regular quote. They should be replaced as you see above directly after the a href=

    This is to ensure the code is read properly by browsers. If you use a regular quote it will not work.

    Making it all work

    The last thing we need to do in order to make our variables work is to do one last php include within our template to call the variables file.

    Let’s open up our header.php file and add the following:

    
    <?php include('variables/variables.php'); ?>
    

    This will tell our template to use the variables file we have created.

    The header.php file should now look like this:

    
    <?php include('variables/variables.php'); ?>
    
    <div id="header">
    
    	<h2><?php echo $heading ?></h2>
    
    </div> <!-- end #header -->
    

    Next we will need to do the same to our footer.php file. Add the same include at the top. The footer.php should now look like this:

    
    <?php include('variables/variables.php'); ?>
    
    <div id="footer">
    	<p><?php echo $footer ?></p>
    </div> <!-- end #footer -->
    

    Now that these two files are calling the variables, you will see the reflected results in the final template. You can always create new variables, and create any type of php files you want. You can even change the folder directory in any way you wish as long as your php include function displays the correct path to the files.

    Playing with the PHP template

    To test it a bit further let’s duplicate the index.html file and make a second page that will also call the external php files. This way we will be able to see more exactly how this works.

    Make a copy of your index.php file and rename the new file to about.php

    Inside of this file you can change anything you want within the #content div inside of the website #wrapper

    I have created the following for testing purposes:

    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
    
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    
    <meta name="description" content="" />
    
    <meta name="keywords" content="" />
    
    <meta name="author" content="" />
    
    <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
    
    <title>1stWebDesigner PHP Template About Page</title>
    
    </head>
    
    	<body>
    
    		<div id="wrapper">
    
    <?php include('includes/header.php'); ?>
    
    <?php include('includes/nav.php'); ?>
    
    <div id="content">
    
    <h3>About Me Page</h3>
    
    <p>
    
    Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.
    
    </p>
    
    <p>
    
    Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.
    
    </p>
    
    <h3>Another Heading Starting Point</h3>
    
    <p>
    
    Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.
    
    </p>
    
    <p>
    
    Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.
    
    </p>
    
    <h3>Notice The Include Files</h3>
    
    <p>
    
    Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.
    
    </p>
    
    <h3>Another Heading Starting Point</h3>
    
    <p>
    
    Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.
    
    </p>
    
    <p>
    
    Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.
    
    </p>
    
    </div> <!-- end #content -->
    
    <?php include('includes/sidebar.php'); ?>
    
    <?php include('includes/footer.php'); ?>
    
    		</div> <!-- End #wrapper -->
    
    	</body>
    
    </html>
    

    Now make sure that we go inside of our nav.php file as well as the sidebar.php file and link the new page we have just created. Again using your html editor of choice, first open up your nav.php file.

    Updating the links should make your file now look like this example below:

    nav.php

    
    <div id="nav">
    
    	<a href="index.php">Home</a>
    	<a href="about.php">About</a>
    	<a href="#">Portfolio</a>
    	<a href="#">Contact</a>
    
    </div> <!-- end #nav -->
    

    Next we will need to do the same thing to our sidebar.php file to make sure the links now work.

    sidebar.php

    
    <div id="sidebar">
    
    <h3>Navigation</h3>
    	<li><a href="index.php">Home</a></li>
    	<li><a href="about.php">About Us</a></li>
    	<li><a href="#">Links</a></li>
    	<li><a href="#">Portfolio</a></li>
    	<li><a href="#">Contact</a></li>
    
    <h3>Box Two</h3>
    	<li><a href="#">Link Here</a></li>
    	<li><a href="#">Link Here</a></li>
    	<li><a href="#">Link Here</a></li>
    	<li><a href="#">Link Here</a></li>
    	<li><a href="#">Link Here</a></li>
    
    <h3>Box Three</h3>
    	<li><a href="#">Link Here</a></li>
    	<li><a href="#">Link Here</a></li>
    	<li><a href="#">Link Here</a></li>
    	<li><a href="#">Link Here</a></li>
    	<li><a href="#">Link Here</a></li>
    
    </div> <!-- end #sidebar -->
    

    Now we are complete. We have created a two page PHP website template that we can expand on more to make a completed project. We have learned how to use basic php includes and variables to be able to edit content accross many different pages at one time. I really hope you have enjoyed this post and learned something from it as well.

    Just to take a final look at the new file structure with the added page you can view the image below for reference:

    This tutorial was created to give you some basic knowledge on php and creating a php website template.

    If you have any questions I will do my best to answer them in the comments below.

    Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
    Could not load more posts
    Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
    Just a second, loading more posts...
    You've reached the end.
    Get rid of the ads (sfw)

    Don't be the product, buy the product!

    Schweinderl