How To Edit WordPress Source Code — HTML, CSS & PHP

Editing WordPRess source Code

How To Easily Change HTML, CSS & PHP

Photo by Émile Perron on Unsplash

Learn how to access and change all areas of your WordPress website by editing the PHP, HTML or CSS in easy steps.

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. And all this without touching a line of code!

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.

But sometimes you need a little 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.

These are the times you need to go one step further and tweak the code for yourself.

Here I’ll describe a full plan for editing any part of your WordPress website source code that you care to dive into.

This is for the adventurous!

Quick NavigationFirst, know your planA Warning1. Decide what you want to change2. Gather your tools3. Gather your resourcesa quick Programming primer4. Find where to make the changea. Changes to layout, position and colour: CSSb. Changes to what is on the web page: HTML and PHP5. Make the change — Using FTP to get full access1. Connect2. Locate3. Edit4. TestMy SetupConclusionWant more articles like this? Follow the WPStrands Journey to 100 Customers

First, know your plan

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

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

Photo by Alexander Mils instagram.com/alexandermils 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. And if anything does go wrong, you can recover immediately.

Note that making and testing the actual changes are the last steps! That’s how important good preparation is …

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 [LINK TO COMMON ERROR POST], print garbage in the browser or cause endless loops that cause your hosting account to be 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

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.

Often, 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 change your website source 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.

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 like Chrome.

3. Gather your resources

Next, prepare for disaster. Know where your backups are and how to restore from 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 facts from some common terms of service here. 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><?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

Photo by Toa Heftiba on Unsplash

a. Changes to layout, position and colour: CSS

CSS is the code used to position and lay out the different parts of your web page. 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.

Check out this post that goes into detail of how to do this.

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

b. Changes to what is on the web page: HTML and PHP

Note that editing the HTML source code of your WordPress website yourself will rarely be needed. This is usually left up to your WordPress 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 your 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. Finding which file to change though is a bit trickier and 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. Your website’s footer section is built by the file footer.php.

Change 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. Clicking the Text tab will show you the HTML code behind what appears in this Visual tab. 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.

The WordPress visual editor

The WordPress HTML editor

Change 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. Much safer is 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.

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. Or you can just ask me something via the form here.

5. Make the change — Using FTP to 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), y​ou can open files in your cPanel’s file manager or you can use FTP.

Do yourself a favour and use the 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. 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.

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

Note the FTP username, server name and port

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

2. Locate

You should then see a listing of your website’s files in the right hand pane. You may need to move through the folders to find exactly the file you’re looking for. Below are the normal 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.phpTheme 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>

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. 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. 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. I have a great hosting account with Siteground that allows me to set up a copy of the website on a staging (test) server with a few clicks. I can do all my changes and testing on this copy of the website and later delete this staging server to save resources.

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

I make changes and test them on the staging website. Once I’m satisfied with these changes I then make 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. There are perhaps 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. Then 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 hit one of the share buttons. It would mean a lot to me and it helps others find the article.

Want more articles like this?

Subscribe to get the latest posts from the blog …

Sign Up

Follow the WPStrands Journey to 100 Customers

__CONFIG_tve_leads_additional_fields_filters__{“group_id”:null,”form_type_id”:null,”variation_id”:null}__CONFIG_tve_leads_additional_fields_filters__Show me what you learn

I’ll be sharing what I learn as the orange grows.

0 100

Number of Customers


Originally published at WPStrands.