Struggling To Edit WordPress Code? How To Happily Edit HTML, CSS & PHP

Learn the simple steps to edit WordPress HTML, PHP or CSS code.

Last updated: November 2021

WordPress runs more than one third of websites on the World Wide Web and that’s for good reason.  It’s hard to find a free platform that offers such flexibility, ease of use and stability right out of the box. Amazingly, you can do all of this without touching a line of code!

Indeed, for most people with a self-hosted WordPress website (i.e. on your own hosting account), the flexibility provided by plugins and themes is more than enough to make your website do exactly what you want.

However, sometimes you just need a bit more flexibility.  Maybe the way something is displayed isn’t exactly to your liking. Maybe a plugin update broke your site. Or maybe you’re just one of those curious folk.

Whatever the reason, these are the times you need to go one step further and tweak things; that’s when it’s time to learn how to edit WordPress code for yourself.  

In this article I’ll describe a full plan for editing whatever part of your WordPress website source code you care to dive into.

Before you begin, take note: this is for the adventurous!

First, Have A Plan

Any code change to your site has the potential to cause problems or even bring down your website.

Therefore, before you start diving into making code changes and risk bringing your website down, you should prepare your work environment.

Here’s a simple plan I use before I make any code changes:

  • Know what you want to do
  • Line up your tools
  • Collect any resources you might need e.g. images, code snippets

Once that’s done, go ahead and do the work:

  • Find where to make the change
  • Make the change
  • Test the change
prepare to edit wordpress source code

Photo by Alexander Mils on Unsplash

See, nothing fancy going on here.  These steps are simple but by keeping the big picture in mind before you start, you’re already setting yourself up for success.  As a result, if anything does go wrong, you can recover immediately.

Note that making the actual changes and testing them are the last steps!  That’s the importance of good preparation.

A Warning

Editing the source code of your WordPress website can have serious consequences.  It can break your site, cause the white screen of death, print garbage in the browser or cause endless loops that result in your hosting account being suspended.  I can’t be held responsible for the outcome: you do so entirely at your own risk.

But let’s not be totally pessimistic:  there’s also a big chance that there will be no adverse effects whatsoever, that everything goes smoothly and that your changes do exactly what you intended!

1. Decide what you want to change

As obvious as it sounds, before you do anything you need to know what you’re trying to do.

Just what is the result you want here?  

Maybe you just want to experiment so you can learn something?

Or maybe you want to alter your site layout or change some text that’s presented on-screen?

Usually you’ll have spotted something you don’t like and decided you need to change that.

Photo by Glenn Carstens-Peters on Unsplash

Whatever it is, it’s worth asking yourself if this is really worth your time?  Is it necessary to spend time learning to edit WordPress code or do you have more important things to do in your business?  If the latter, do yourself a favour and hire someone who can do it much quicker than you can while you get on with your real work.

Must you really spend time tweaking your site’s code or do you have more important business things to do?Tweet this!

Ok, you’ve decided to go ahead.  Now you can line up your tools.

2. Gather your tools

The only tools you’ll really need are the three listed below.  Any they’re free, of course.

WordPress Tools

1. An FTP client to get direct access to your files on your webserver,  to download them and to upload the changed file.

Filezilla is a great free choice.

2. An editor to make changes to the downloaded file.Notepad++ is a great free option as it has a syntax highlighter for the most common programming languages.

Plus, it has an infinite undo function, which, you’ll discover, comes in really handy!

3. A modern web browser. My preference is to use a privacy-focused browser that’s based on Chrome but much more respectful of everyone’s privacy, Brave. Firefox is another good open-source option.

If you don’t really care about privacy – yours and otheres’ – just use Chrome or Edge.

Spread the Word
Click Here to Leave a Comment Below

Leave a Comment: