In this tutorial you’ll learn how to edit HTML in WordPress so you can modify themes with whatever customizations you like. Let’s go!
In WordPress, the HTML is in PHP Files
You might be setting out to make some changes to a theme for the first time, and you might also know that you need to learn how to edit HTML code in WordPress.
However, the first hurdle you may run into is that if you’re looking for the .html files that hold that code, you’re not going to find any in a WordPress theme.
That’s because in a WordPress theme all HTML is contained within .php files instead.
PHP is the code that makes WordPress sites “dynamic”, i.e. enabling them change their content on the fly when posts are added or changed, as opposed to being “static", where content stays the same unless manual file editing is done.
Most of the .php files in a WordPress theme contain some of that dynamic PHP code, mixed in with regular HTML code. In short, they are just like regular HTML files, but with some little PHP snippets responsible for making your site dynamic.
So even though you won’t see any .html files, there’s plenty of HTML code to be found within a theme’s .php files.
Free and Paid WordPress Themes
If the changes you need to make to your current theme are beyond your comfort zone, it’s worth taking a look at the free and premium WordPress themes available on Themeforest.
But if you’re confident that you want to start editing things yourself, let’s get back to it!
How to Edit HTML in the WordPress In-Built Theme Editor
So now you know you need to edit HTML in a theme’s PHP files, but the next question is: how do you actually do it?
The easiest way is through the theme code editor that comes built into WordPress.
To access it go to Appearance > Editor in the admin area’s left sidebar.
Once there, on the right you’ll see a list of all the files the currently active theme contains. Click any one and it will open in the editing area.
You can now go ahead make your changes in the editing area, then click the Update File button when you’re done. This will immediately make changes to the live site, so be certain you haven’t made any errors before you save.
Note: in some sites the theme editor may be disabled for security purposes. If you don’t see the editor, ask the person who administrates the site if it’s disabled. If so, you might prefer to use one of the other methods described in this tutorial.
Clear Your Caches
After editing WordPress theme HTML you might find that even when you refresh your site it looks the same. If this happens it’s probably a sign the old version of your site is being loaded in from either your browser cache, or potentially a caching plugin in WordPress. Be sure to clear both such caches and your changes should show up.
Download, Edit Offline, Upload
Instead of using the theme editor, another option is to manually download the file you want to change, edit its HTML offline, then re-upload it.
To do this you’ll need an FTP (file transfer protocol) client, such as FileZilla for example, and FTP connection details for your hosting. Most hosts will provide this information in a welcome email, and include details in their documentation on how to find your access credentials again later.
Once you use these credentials to connect to your host via FTP you can navigate to find your theme files.
First find the root directory containing your entire site. If you have just one site on your hosting it will likely be a directory named www or public_html. If you have multiple sites it will likely be a directory matching your domain name. There is no fixed rule on exactly which directory your site will be in though so if you get stuck you may need to ask your host for help.
Once in your site’s directory, locate the sub-directory named wp-content. Inside that is a directory named themes, and inside that you will find a directory with a name matching your theme’s name.
Browse inside that folder to find the file you want to edit, then use the FTP client to download a copy to your computer. You can now edit it in any text editor of your choosing. While it’s possible to use a simple text editor like Notepad for editing, it’s much easier and less likely to cause mistakes if you use a purpose designed code editor, like the free VS Code or Atom.
When you’ve made your changes use the FTP client to upload the file back into the same location. You’ll be asked if you want to overwrite the existing version of the file, and as long as you’re confident you’ve made no errors in your edited file, you can go ahead and do so.
Edit Through Remote Connection
Instead of doing a manual upload and download process for offline HTML editing, you can automate the downloading and uploading part through a remote connection. For this you will need SFTP (secure file transfer protocol) connection details. These may actually be the same as your FTP connection details. Check to make sure your host allows remote connections.
You will also need a code editor capable of working on files remotely and saving changes directly onto the host. There are many to choose from, but to give you an example, the one I use myself for coding on the iPad is simply called Code Editor.
Once you have provided the editor with your SFTP details you should be able to connect to your host and browse your way to your theme files. From there you should be able to open files in the editor, modify them, and when you save your changes they should go directly onto your live site.
Edit Completely Offline via XAMPP
Another option is that instead of editing the theme installed on your live site, you run an offline installation of WordPress and do all your theme editing there. You would still have to manually upload your changes, either via FTP, copying and pasting into the theme editor, or reinstalling the whole theme.
However if you are planning on making extensive modifications this is still the best way, because you have no upload or download time to worry about each time you save, and if you make mistakes they won’t effect your live site.
We have another article on how to install WordPress locally with XAMPP to get you started down this track.
Consider Using a Child Theme
It’s also worth considering creating a child theme instead of making HTML edits directly to your main theme. This helps insulate your main theme from errors, and preserves your changes when your main theme updates.
You’re Good to Go!
Now you’re all set with a collection of different approaches for how to edit HTML in WordPress themes. Have fun customizing to your heart’s content!
No comments:
Post a Comment