Customizing A WordPress Theme for Designers

I’m not a programmer, I’ve tried coding but coding and I don’t mix. I wanted to learn to use WordPress as a Content Management System so I set up this blog to learn the WordPress basics.

Customizing a theme was a lot easier than I had thought. You don’t have to know PHP to customize a theme, a working knowledge of HTML and CSS is a must though.

Step 1: Install WordPress

Go to WordPress.org, download and install WordPress or check if your webhost has WordPress avaialble for download like mine.

fantastico-wordpress

Step 2: Copy the default theme

Using an FTP program like Filezilla go to the wp-content/themes directory. Make a copy of the default directory and rename it. I named mine craig, very original I know.2-ftp-screen

Step 3: Customizing the theme

All the files needed to display your blog are now located in the new directory. There are a lot of files but it’s easy to figure out. There are four basic files, the header, footer, index and sidebar.
layout

WordPress pulls the individual php files to make the blog.
I edited the header file and added in my own HTML and attached my style sheet. I deleted a lot of the PHP code that displayed the name of the blog since I want the header to have the same navagation as the rest of my site.

code-screenshot

Same with the footer, I deleted some of the PHP code, added in my own HTML and attached my style sheet again.

footer-screen

The index.php page is where your entry will be displayed again, I added some HTML attached my stylesheet and moved the PHP code for the sidebar so it would be inside my site wrapper.

index-1

index-2

Once you’ve edited the four files above you have a basic blog, I found attaching my style sheet to the rest of the PHP files helps them look like the rest of the site.

If you’re trying to learn WordPress install it on your own site and play around with the files, it helped me learn a lot.

Leave a Reply