Setting up the static front page

The most widely used application of static page is on the front page as the main landing page is often custom. So let’s setup a static front page and a blog page.

1. Create two new pages call them “Home” and “Blog” (you can name them whatever you like).
2. In your Wordpress “Settings” go to “Reading” and Front page displays “A static page” and then select the page you want as your front page and another page for your normal blog (you don’t have to include a blog).

That is all there is to it now you will see the static front page whenever you visit www.yoursite.com and the blog whenever you visit www.yoursite.com/blog. Using this solution you can now edit your front page in the admin area of Wordpress via the Page Edit WYSIWYG editor.

Custom front page

Now that we have got our head around the static front page let’s go a bit further and add a completely new layout.

1. Create a new PHP file in your theme directory and call it myfront.php
2. At the top of the PHP file add:

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

3. Add in all the HTML/CSS/PHP you want on that page. You can call other PHP scripts the header, sidebar and footer just like normal if you need them.
4. Go to the page you want to display this custom file for example the “Home” page and on the right hand side there will be an Attributes box with “Template” inside it. Use the drop down box to select “MyFront” and click update page.
5. You should also use this opportunity to add a number to “Order” which will determine in which order your pages are listed so for Home we will put 1 as we want that as the first item in our menu.
6. To edit any changes on your frontpage you will go into the myfront.php file unless you have coded your template to be fully customizable from the Wordpress admin.

Hopefully the above will help you when designing your own CMS solutions in Wordpress or you can try it on an existing theme like Blog Business.

Blog

Web Projects

Case Study

Standard Page

Using the Milky icon set and screenshots from the Envato network.

Or download the theme.

Leave a comment with any bugs or features you would like to see.

PSD file and design tutorial coming soon.

You can view the demo.

Download the code. Version 1.1.

View the tutorial and grab the original PSD.

Wordpress theme coming soon.

I used Coda-Slider and 960 Grid for this project.

This theme is released under the GPLv3. All icons and stock images remain the property of their respective owners and fall under their own licenses.

Grid setup and the header area

First open a Photoshop template of the 12 grid 960 grid system which you can download here. Increase the Image>Canvas Size width to the size of your screen. I use 1920px so I can see how it will look on larger screens (but this isn’t necessary, it is just a preference).

Use the Paint Bucket Tool to fill the background with a dark colour, we have opted for the darkest #000000 and you should have something like the below image visible. Save your Photoshop file with a different name for this tutorial.

Create a new group and call it header and place the title and navigation we are about to create inside it. Select the text tool and put the title of your company or theme, for this example we will just put Dark. The font we are using is 48pt MgOpen Moderna Bold. Give it a Gradient Overlay going from black to white with opacity 30%, it should be the first gradient selected.

Create some navigation using a common font like Arial 18pt. Place it up against the right side of the grid. Select the rounded rectangle tool (radius 10px) and create a rectangle around the Home text. Give it a Gradient Overlay going from #de1c1c to #fe6161.

Creating the Featured area

Create a new folder called feature and use the rectangle tool to create a feature area that is the width of the page and 250px in height. Also give it a Gradient Overlay going from #de1c1c to #fe6161.

Insert an image to the left of the feature area up against the edge of the grid, I chose this pencil image. Use Magic Eraser to cut out the background and flip it 180 degrees. Then choose free transform and make it approx 17% of its full size so it fits in the feature area. I also removed the brown pencil using the eraser.

Leave a space of one bar between the pencils and your text box and create a feature text headline using the following settings. I have used a small size and non bold for the text underneath as well as some enlarged key words.

You should have something like this.

Use the selection tool to create a box the length of the page like this and create a new layer that is below the main feature rectangle.

Use the gradient tool on the new layer with the black to white gradient to create a glow like below.

Duplicate the layer by right clicking it and selecting this option. Go to Edit>Transform>Rotate 180 degrees and then move the duplicate layer to the top of the box. I just renamed the template also as you may have noticed and lowered the feature text a bit.

Creating the content area

For the content area start off by creating a text box 6 columns wide. Create a heading and some text telling us about your company or product. Then create a slider area using the rounded rectangle tool 300px high and taking up another 6 columns, apply the same red gradient we used before #de1c1c to #fe6161.

Use an image of your product or a portfolio piece and trim it to fit inside the slider. At some arrows beneath the slider and a description of your image. Optionally add a Jquery bar inside the slider image. I used the Milky Icon set.

Creating the footer area

For the footer area we are going to be making another page long rectangle and using the fantastic origami icons from Icon Dock (48×48png). Create your footer group folder and a rectangle approx 120px high and the length of the page. Leave about 300px to the bottom of the page under it. Apply the same red gradient we used before #de1c1c to #fe6161.

Now it is just a matter of filling out the footer content. Put your titles in the red bar along with an origami or other icon that fits. We also used the social media icons from jwloh.

Select View>Extras to view the grid layout and show the 12 Col Grid layer to make sure nothing is overlapping another areas space. This will make it easier to convert to HTML/CSS which we will be doing in an upcoming tutorial.

All done, if you need any help just drop a comment in and I will do my best to get back to you.

You are free to use this file in either commercial or personal projects.

Download the PSD

Update: get the code.