Edit WordPress Code
How to easily change HTML, CSS & PHP

Photo by Émile Perron on Unsplash

Learn the easy steps to access and edit WordPress code in PHP, HTML or CSS files.


WordPress runs almost 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 just 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; it's time to learn how to edit WordPress code for yourself.  

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

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

First, know your 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 my plan all laid out for you:

  • Know what you want to do
  • Get your tools lined up
  • Get any resources you might need on hand

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

  • Find where to make the change
  • Make the change
  • Test the change

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.  Of course, 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

Before you do anything you need to know what your plan is.  

Just what are you trying to do 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.

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.

filezilla ftp client

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!

notepad++ editor

3. A modern web browser like Chrome.

use chrome to edit wordpress code

3. Gather your resources

Next, prepare for disaster.  First, know where your backups are and how to restore them at a moment's notice.  If you don't make your own backups, you can often do this via your hosting provider’s cPanel.  Log in there, locate the backup you might need (e.g. last night’s) or make one right now.

Note: Not many people know that your hosting provider is not responsible for making backups available to you.  Check out the surprising facts from some host's terms of service in this article.  You must test your backups to be sure they’ll actually get your site back to where you want; some hosts' free backups don’t actually allow you to do this easily!

Now your tools are ready and you'll be able to recover from any unwanted outcomes at a moment’s notice.

Let's forge on!

A quick programming primer

PHP is the programming language that builds your website page’s HTML.
e.g. <?php echo $options['phone_no']; ?> might print the phone number

HTML is used to put the different elements of your web page into your browser.  It also used to give those elements names (tags) so that they can be identified with CSS.
e.g. <span class="phonenumber"><?php echo $options['phone_no']; ?></span> will gine the phone number from above a class name of "phonenumber"

CSS is then used to lay out those HTML elements.
e.g. .phonenumber{color:red;font-weight:bold;} will make the phone number above red and bold

4. Find where to make the change

find where to change wordpress code

Photo by Toa Heftiba on Unsplash

a. Making changes to layout, position and colour: CSS

CSS is the code used to position and lay out the different parts of your web page. Indeed, it’s what’s responsible for deciding how your web page will look on different devices. For an introduction to CSS check out the tutorial from W3schools.

To change the layout of your WordPress page elements, you will need to edit your website’s CSS file. 

To that end, check out this post that goes into the details of how to do this.

Once you know where to make the change, jump to the section on getting full access below.

WordPress CSS Changes

b. Making changes to a web page: HTML and PHP

Note that editing the HTML source code of your WordPress website will rarely be needed.  This is usually a job for yourWordPress website developer or other competent professional.

HTML lays the building blocks of your website elements in your browser.  In WordPress, the HTML is built by PHP so it's usually found in files that end in .php in your theme folder.  Find the name of this current theme from your dashboard by going to Appearance>Themes.

To find where to change something you can use the same method as finding which CSS to edit above. However, finding which file to change is a bit trickier.  Knowing how WordPress operates behind the scenes really helps here.

For example, anything that appears in your page header section is usually created in the theme’s header.php file. Likewise, your website's footer section is built by the file footer.php.

Changing a normal WordPress post or page

To change the HTML source code on a normal WordPress page just use the WordPress HTML editor itself.  Edit the page to see the visual editor as shown below on the left.  Next, clicking the Text tab will show you the HTML code behind what appears in this Visual tab.  Actually, this is a good way to learn how HTML works in WordPress.  You’ll rarely need to do this though as the visual editor usually does the job.

wordpress post visual editor

The WordPress visual editor

wordpress post html editor

The WordPress HTML editor

Changing a theme template file

More likely is that you want to change something like the text that appears in a certain location or where the logo is displayed.  This will involve changing one of your theme's template files.

For this you can use the WordPress code editor but I don't advise it.  Making a mistake here can make your website unreachable if you don't really know what you're doing.  Because of that, it's much safer to use the FTP method below.

But, in case you're curious, here's a brief explanation ...

You’ll find this editor under Appearance>Editor.  You’ll see the list of files in your theme on the right (2) and by clicking on them you can change what is output by that file.  So, going back to our header example, in my theme, clicking on header.php shows me the HTML source code (1) behind my header.  For my theme this is quite complex but for other themes it can be just a few lines of code.

WordPress code editor

I won’t go into detail of what you need to change here but the WordPress codex is a great reference for all those complex WordPress source code function in the source code.  Alternatively, you can just ask me something via the form here.

5. Make the change - Using FTP to get full access


get full access

Photo by Andy Omvik on Unsplash

To edit the CSS, HTML or PHP code of your website, use the following FTP method

If you've searched this topic before you'll have discovered several ways you can edit your source code; you can change it directly in WordPress (Appearance > Editor), you can open files in your cPanel's file manager or you can use FTP.

Do yourself a favour and use the safest and most robust method; FTP.  You have full control over how you edit your files outside your website environment and if anything goes wrong you can simply undo the changes and upload the file again, overwriting the changes that caused the problem.  In contrast, using the WordPress editor within your website, how can you undo your code if your change causes you to lose access to your website?  Using cPanel's editor is simply awkward, cumbersome and slow.  

Trust me, just use FTP!

Here's the process broken down:

  • Connect to your website's server
  • Locate and download the file you need
  • Make changes to that file
  • Upload the changed file to your website's server
  • Test your changes

1. Connect

Install Filezilla, get your FTP account details from your hosting provider, usually here in cPanel. 

ftp accounts

Get the connection details for your FTP account from the Configure FTP Client link

ftp accounts 2

Note the FTP username, server name and port

ftp account configuration

Run Filezilla and enter the details you noted above in the appropriate fields

filezilla ftp account connection

2. Locate

You should then see a listing of your website's files in the right hand pane.  Occasionally, you may need to move through the folders to find exactly the file you're looking for.  Below are the usual locations of some of the most common files you'll want to edit:

All your website files

WordPress configuration file wp-config.php

Theme files (PHP) such as header.php, footer.php
Theme style file (CSS) style.css


/public_html/ or /www/

/public_html/<YOURSITENAME>
or
/www/<YOURSITENAME>

/public_html/<YOURSITENAME>/wp-content/themes/<YOURTHEMENAME>
or
/www/<YOURSITENAME>/wp-content/themes/<YOURTHEMENAME>

Of course, your installation may differ. Once you've found the file you want to edit, right-click it in Filezilla and select Download.

3. Edit

Now you have a local copy of the file you can edit.  Next, open the file in your editor, make your changes and save the file.  In Filezilla's left pane, navigate to where the file is on your local machine.  Lastly, right-click and select Upload.  This sends the file back to your website server.  (If prompted, click on Overwrite.)

4. Test

Now you can test your changes in your browser by reloading the website (Press F5).

Hopefully at this stage everything has gone smoothly and you can see the effects of your source code changes in your WordPress website.

My Setup

Basically, I use exactly the same setup as described above.

As a website professional, I have a pretty robust setup.  A great hosting account with Siteground allows me to set up a copy of the website on a staging (test) server with a few clicks.  There I can make and test all my changes and later delete this staging server to save resources.

I use Filezilla to FTP in with a master FTP account and I use Notepad++ for editing.  (I used to use an IDE but it's overkill.)

Once I'm satisfied with the changes I've made on the staging site, I then go ahead and make those changes on the live site.

That's it, it's the same simple process.

Conclusion

All of this might seem like a very lengthy process but believe me you'll get pretty fast pretty quickly.  Without a doubt, there more efficient ways, such as using an IDE (Interactive Development Environment) but the above method is more than good enough for most people.

By the way, while this method is safer than using the WordPress editor, you should ideally have a test site to try out your changes on.  Once you’re happy your changes work fine on your test site, make the same changes on your live site. Otherwise you risk your live site going down.  If you need any help with this just let me know.

I hope this helps you rather than confuses.  Did I leave anything out?  Let me know in the comments below.

Thanks for reading and if you found this useful please hit one of the share buttons.  It would mean a lot to me and it helps others find the article.


Also published on Medium.

  • by Seán
  • |
  • November 2, 2017
Click Here to Leave a Comment Below

Leave a Comment:

$(document).on('click', 'a', function(event){ event.preventDefault();$('html, body').animate({ scrollTop: $( $.attr(this, 'href') ).offset().top }, 500); });
Share
Tweet
Share