Creating a custom under construction template for your wordpress blog

Today I’m going to show you how to create a custom under construction template for your wordpress blog. WordPress is my favorite content management system and it is a very stable platform. I read some where that it can even handle up to 30-40 activated plugins with no problems. With over 28,000 plugins searching for the best plugin to suit your needs could be a bit time consuming.

So here’s the short cut steps to add a under construction sign to display on the home page of your new wordpress website. While you’re website is in the design phase of production. These steps are for intermediate wordpressers that are using WordPress.org. You should be familiar with using a ftp, code editor, html, php & css.

Open your code editor and paste the code below it  will be needed to create your under construction template or any custom wordpress template page  that you want to create in the future. Copy and paste the code below at the top of your file, name your file and save it (UnderConstruction.php) for example.

<?php
/*
Template Name: UnderConstruction Page
*/
?>

After you complete this step you can start to add your html and css to your file.  Add the code below to your file and then save your file.

<html>
<head>
<title>Your website title gose here it will display  on your browser tab</title>

Next we are going to add the style of the page to the head of the style sheet. Copy the styles below into your file and save your file.

<style type=”text/css”>

body {
font-size:16px;
font-family: ‘Arial’,sans-serif;
background-color: #ffab17;
}

#container {
margin-top: 1%;

}

.image {

margin: -26px 0 0 116px;
}

.text-container {
float:right;
margin: -59px 409px 0 0;
}

.text {
background-color: #ff7600;
padding: 55px 55px 11px;
font-size: 24px;
color: #fff;

}

</style>

</head>

After you add the style to the head of your file. Your going to add the body which will contain the information you want to display on your websites construction page. Start with the following code.
<body>
<div class=”container”>

<div class=”content”>

Lets say you have an image of your logo  that you want to add your template to keep the brand of your site. Use the following code from http://codex.wordpress.org/Function_Reference/get_template_directory_uri

<div class=”image”><img src=”<?php echo get_template_directory_uri();?>/images/yourlogo.png”></div>

<div class=”text-container”>

<p class=”text”>Add text here. Your website is coming soon!</p>

</div>

</div>

</div>

</body>

</html>

Save your  file, open your ftp and upload the file to your themes folder. Create a new directory for images and upload your logo image to your images folder. Once the files have been transferred. Now you can go back to your wordpress dashboard and create a new page ,  in the right side bar look for Page Attributes and select your template from the drop down list and click the blue Publish button right above the Page Attributes.

Its time to see your work, in the left sidebar select the settings tab then select readings. For the Front page displays. Choose  static page from the radio list and select the page you created, scroll down and click the save button.

Now you can visit your website to see your custom construction template on the home page of your website. Here is an example of what your custom construction template should look like http://arttherapymft.com/

Cheers,

dianedenise

 

 

 

 

Denise's is from sunny California, she specializes in front end development. Since 2011 Denise has used WordPress with 99% of her projects. For the last several years she has focused on building responsive custom WordPress website. Her diverse experiences has allowed her to be involved on all aspects of a project from start to finish.