Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Web Designer Team
9th April 2009

Create your own WordPress theme

We uncover the secrets of a WordPress theme and show you how to add elements to create a personal design

We uncover the secrets of a WordPress theme and show you how to add elements to create a personal design

Final

WordPress has become the web’s favourite publishing platform thanks to its simplicity, usability, aesthetics and undoubtedly, its gratis status. Its rise in popularity has seen the proliferation of hundreds of sites offering thousands of themes to give users the look and feel they want in an instant. There are undoubtedly some very good themes on the market, but while a predefined theme offers simplicity and instant impact, it doesn’t offer complete personalisation. There are plenty of free themes that are perfect as a base for a blog, but modification and personalisation will take it to the next level.
WordPress themes are essentially a collection of PHP tags and a style sheet that can be modified to create a personal theme. We have taken the Coffee Desk theme found at http://wordpress.org/extend/themes/ and used this as the base of the new personalised theme. This is a two-column theme with a right sidebar, matching the layout we have designed for.

01 Download and set up


Step1

Head to http://wordpress.org/download/ and click the Download WordPress link and save to the desktop. Now unzip all the files in the WordPress folder. The next step is to create a database for WordPress on your web server. This may differ from account to account, but the principle is the same. We are using cPanel and phpMyAdmin, as supplied with the web account, to create the necessary database. In cPanel, go to MySQL Databases and create a new database. Give it a relevant name, ie ‘blog’, and at the same time create a new username and password. Now add the user to the database and assign it All Privileges.
Now head back to the unzipped WordPress folder and rename the ‘wp-config-sample.php’ file to ‘wp-config.php’. Open wp-config.php to view the following:

define(‘DB_NAME’, ‘putyourdbnamehere’); // The name of the database
define(‘DB_USER’, ‘usernamehere’); // Your MySQL username
define(‘DB_PASSWORD’, ‘yourpasswordhere’); // …and password

Enter the relevant details and save. Now upload the entire contents of the downloaded WordPress folder into a directory on the server, eg, www.mywebsite.co.uk/blog.

02 Install WordPress

Step2

With all the building blocks in place for WordPress, the next step is to start the “famous five-minute installation”. Open the browser of choice and run the WordPress installation script by accessing it via the URL, eg, www.mywebsite.co.uk/blog/ wp-admin/install.php. Remember to replace the web address and subdirectory with the ones you created. This will present the Welcome screen. Enter a Blog Title and Your E-mail and press Install WordPress to begin the process. This is all there is to it. Note down the username and password and press Log In to start. When using WordPress from now on, log in via www.mywebsite.co.uk/blog/wp-login.php.

03 Install a theme

Step3

After installing WordPress, the next step is to find a theme that best matches the style you wish to use. We have included a number of free templates on the disc, but for the purpose of this tutorial we have chosen to use the Coffee Desk theme found via www.wordpress.org. Download the theme before uploading the folder to the wp-content/themes folder found in the location used when installing WordPress, ie www.mywebsite.co.uk/blog/wp-content/themes. If you wish to keep the original theme in its original state within WordPress, simply copy and paste the same theme with a new name into the folder location mentioned above. Now to get started, head to Design>Themes, select the desired theme and click the Activate link to apply the chosen theme. Now when you view via the installation location, WordPress will have the new theme. Before continuing, any images that are to be applied to the new theme will need to be uploaded to the appropriate folder. Using an FTP client, upload the desired images to the images folder located at www.mywebsite.co.uk/blog/wp-content/themes/nameoftheme/images. Replace ‘nameoftheme’ with the name of the chosen theme.

Pages: 1 2 3 4

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.

    10 Comments »

    • Atlanta Web Design said:

      Nice article, thank you for the WordPress development tips! – Kate

    • tattoo said:

      Thanks for sharing, es ist großartig!

    • Ernest said:

      Does anyone know where I can downlaod the images that this tutorial requires?

    • Fastest Live Chat said:

      Thanks for sharing .. Creating own wordpress theme in less than 20 mins

    • online trading in india said:

      Awesome collection of wordpress themes

    • Adele said:

      Thanks for all of this! I am very new to WP and asked a WP designer to explain to me how it works and all I got was ‘it’s harder than programming. You’ll never get it right’! WELL! Guess what! Webdesignermag just made everything so clear and I’m working ‘behind the scenes’ on my website to convert to WP! Thanks guys!!! Thanks for the above and everything else!!

    Trackbacks

    What's your opinion?

    Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

    Be nice. Keep it clean. Stay on topic. No spam.

    * Required fields