How to modify an existing theme

- by

All WordPress Themes are released under the GNU, which means you’re free to amend and modify them as you please. That’s good news if you come across a layout that you like to 90%, and you’re up for the challenge to get down and dirty with some code.

The WordPress Codex is very good at explaining in detail how to modify a theme, but it’s fairly complex if you’re starting out. Let me give you a quick overview on what WordPress does to display your page in a browser:

Display your favourite WP site in your favourite browser. Then right click and display the source code of that site. What you see now is what your browser turns into something nice to look at: your page.

Even though all this code gets displayed at once, it is sent to the browser “on the fly” by WordPress if a user requests the page. This process happens in snippets of code, which is made up for several files that make up “the theme”.

If you have a look at a theme directory (usually wp-content/themes/youthemehere/), you’ll see several files. One of them (index.php) is the first file that’ is used to display a theme. This file calls other files, such as header.php, sidebar.php, footer.php and many others.

Part of the challenge is to find where the piece of code is that you’d like to modify. Your navigation menu at the top may be called in the header.php file,  or it may be called from index.php. You have to play detective to figure it out.

You can do this from within WordPress by navigating to Appearance – Editor. Select the theme you want to modify at the top right your current theme is already selected. On the right side you see all the files your theme is made of. Have a look at Anatomy of a Theme to find out more about those.

If you want to make a change, your files need to be writable on the server (do this with an FTP client such as FileZilla, and set your theme files’ permissions to CHMOD 777).

Before you start to modify any code, I highly reccomend to copy your entire theme folder to a safe place. You’d be surprised what a missing </div> tag can do to your design…

Have fun!

If you enjoy my content, please consider supporting me on Ko-fi. In return you can browse this whole site without any pesky ads! More details here.

Leave a Comment!

This site uses Akismet to reduce spam. Learn how your comment data is processed.