I recently decided to link a blog into my site using WordPress. Sounds easy, right? Well, linking the blog into the site was easy, but for someone with just general programming and web development knowledge, creating a custom WordPress theme that coordinates with my site was another story! It’s not the most difficult thing in the world, but creating a custom WordPress theme to go with your current website design does take some time and at least basic web development knowledge. If you don’t know HTML, PHP, and CSS–Don’t try this at home!
Designing a WordPress theme is the foundation of your entire blog. You can’t post anything until you have designed that perfect them and integrated it into the blog so that everything works together and looks great! This guide will walk you through the steps of designing a custom WordPress theme. The best part about it? Most developers will charge you anywhere from $300-$1500 to build a custom WordPress theme and integrate it into your site–you can do it at home…FOR FREE!
Backup All WordPress Files
The first step is to backup all of your current WordPress files. These are located in a folder which you can access through your FTP site. Download and copy all files from the WordPress Classic theme on your site for future use and to resort back to in case of emergency.
Find Template
The next step in creating a custom WordPress theme is to find a template that is suitable for you to use as a starting point. Search you site for a page that you like the layout of most and think would work best for your WordPress blog. For instance, many choose the look of the About page because it tends to be strictly informational and the layout is usually simple and similar to a blog. The idea here is just to choose a layout that will easily integrate and coordinate with the rest of your site but have a bloggish design.
Create Duplicate WordPress Directory
Now, create a duplicate WordPress Classic directory in your FTP. You can either just duplicate the entire directory or you can work with the directory that you downloaded and saved to your computer and when you upload files through FTP you can give them a different directory such as your blog name.
Once you have saved the new theme into the directory you should log in to WordPress and change the current theme to the newly created backup file. These are the files that you will be working off of from here on out to create your own theme in WordPress.
Create Index File
Back to the page that you chose for the WordPress theme layout structure. If it was your About page that’s fine or whatever page you chose is great. Open that page and save it as index.php in the WordPress theme directory that you developed for your site. Now, delete all information from the page that you do not wish to be on the blog. For instance, you probably want to delete the about us content and any additional content that is on the page leaving basic columns and headers and footers to work with.
Now, save again as index.php and preview the page in your WordPress blog. It should look pretty simple with just the layout of the page and header and footers if you left them.
WordPress integrates headers and footers into the theme using PHP so you will have to work a little bit to create your current headers and footers in the WordPress theme. Begin by opening the file header.php in your WordPress theme directory. From you current index directory, cut the code that is at the very top of the page all the way down to the last closing head tag to create your header. Now paste this code into the header file that you have open. This code will replace any existing code that is already in place and create your new header for your WordPress theme. Save the new header.php file into your WordPress theme directory.
For the footer, you will open the footer.php file in your WordPress theme directory and cut the code from the index file which begins with footer all the way to the very end of the coding on the index file. Paste the code into the footer file replacing any existing code in the same manner as you did with the header file. Save the new footer.php file into your WordPress theme directory and also save the new index.php file with the header and footer information cut out of it.
Creating the WordPress Theme
Now, it’s time to put this all together. Things are pretty broken up right now but a few more steps and your new WordPress blog will be integrated and looking great. Begin by opening the classic index file from your original WordPress theme. Copy the first php lines and paste them into your new WordPress theme index, they will go directly before the body tags in your index file.
Now copy and paste the footer php from the classic index file and paste this block of information at the end of you new WordPress index file and paste it where you want your footer to show up in the blog. You can always save the file and preview the blog at any time to see if you placed it in the right place. Now, save the file and when you preview it you should be able to see you theme with a header and footer. What you won’t see at this time is a blogroll, search bar, or sidebar items.
To create the rest of the blog including the sidebar, you will copy the middle php section from the classic index which starts with header and ends with footer. Of course you won’t actually copy these words but everything in between these php blocks you should copy and paste into your current and new WordPress theme in the index file where you wish the blog to be.
Now open the original footer file and copy the information bar that contains get sidebar in it. It should look like this: paste this information where you would like the sidebar to be in your blog. This will be pasted into the new WordPress theme index file. Remember that you can paste it in and save then preview your blog to see if it is in the right place. If you are unhappy with placement, move the entire string of code to a new location and see if you like it there.
Completed WordPress Theme
This WordPress theme can be mirrored from many different options. While this is not a 100% original theme because it is mirrored off of an existing page from your website, I assure you that it is a great starting point for those of use who have little or no web development experience. Once you have created your new theme you can always tweak it and change it to make it more customized based on your likings. Just remember to back up all files and you can make all the changes you want without worrying about losing anything important. If things don’t work out–try again!
