WordPress themes provide a fantastic way to create your own website. However, a unique website that matches and fulfils your own, or your client’s specific requirements is sometimes necessary. This is why so many web designers want to learn how to modify the themes.
A business website will always look better if it has its own branded design, along with ‘trust signals’ including reviews, contact details, high quality images and a professional logo.
Please note that the following tutorial works for WordPress hosted websites, and will not work on the free plan for wordpress.com websites and blogs.
Dev Tools in Google Chrome
Also referred to as “Inspect Element” – If you wish to edit any code and/or mark-up on your WordPress website, then it is a good idea to get familiar with the Dev Tools in the Google Chrome web browser.
Simply right click on the website that you are editing and then on the menu that appears, click “Inspect”.
Next click the arrow icon on the top left of the window that appears:
Now, whenever you click on a title, picture or any other element on your website, you should be able to see the relevant HTML code on the bottom-left:
You can even edit the code on that page in real-time, to test out what your site would look like with specific amends. Just double click on the HTML or the text within the dev tools panel and type over it with a new element or new text.
You can also right-click on the element (within the dev tools window) and delete the entire element. Don’t worry, this does not make any permanent changes to the website, amends will disappear as soon as the page is refreshed.
You can see the CSS on the right hand side of the dev tools window – make sure “Styles” is selected at the top of the window. This can also be edited in real-time. Simply untick the box(es) to the left of the CSS style element to remove it. You can also add elements by simply typing them in the box.
WordPress Customize Menu
Editing a WordPress Theme has become substantially easier in recent years. Modifying the CSS can be done directly via the Customize Menu – under “Additional CSS”. This is great for styling headers and navigation with CSS.
First, login to the WP-Admin or dashboard area of your website, then on the left-hand side-menu, click on “Appearance” and then “Customize”. You should then see a menu pop up on the left hand side, allowing you to add CSS to specific pages of your website. This is the easiest way to add and remove menu items from your navigation and change the logo, header and footer of the site.
Edit CSS Using the Appearance – Editor
Before you edit the CSS style sheet directly, it is a good idea to make a child theme or a backup of your site.
To make changes to CSS via the WordPress editor, go the “Appearance” menu once more, and this time select “Editor”. By default, the CSS style sheet is opened, if not select it from the right hand side.
Here you can edit the CSS directly in the style sheet. You can also connect to your website with FTP, download the stylesheet and edit it in a text editor such as Sublime Text. This makes it easier to undo and revert code – you cannot undo anything in the Editor in the WordPress dashboard.
Edit CSS Using a Plugin
Using a plugin such as Simple Custom CSS, you can edit the code in a much easier manner. Once the plugin is installed, there should be an additional menu item under the “Appearance” menu – “Custom CSS”.
Here you can enter your CSS.
Editing WordPress HTML
When you go to the WP dashboard however and look to modify some of the theme’s HTML, it can be very confusing as you are often confronted with several @ functions and not much else. Today we will have a look at some easy ways to access the website’s HTML and edit it.
As with editing any CSS, before you edit the HTML, it is advisable to install a child theme – this is so that you have a backup if you do anything incorrectly that you cannot revert for some reason.
How to Edit the HTML Code on a WordPress Page
This is the easiest way to edit any HTML – simply move from Visual Editor to Text Editor
Alternatively, if you are in the new version of Gutenburg editor, you can simply add a ‘HTML’ block and put the HTML markup in there:
Editing The Website’s Homepage HTML
This can actually be done via the “Appearance” menu in WP admin. Go to – Appearance > Widgets and then look for a widget named “Front Page 1”.
Unfortunately, this widget does not exist in all themes, but if it does – you can edit the HTML of the homepage here.
In other themes, you may have to go to “Pages” in the WP dashboard side-menu and then look for “Home”. If you still don’t see an option for editing the Theme, you may have to refer to the specific theme’s documentation.
Editing the Website’s HTML with a Plugin
At your own risk (some plugins can conflict with others and crash your site), consider using a plugin to edit your site’s HTML.
For example if you want to edit the header of your website to add tracking code – the Head, Footer and Post Injections plugin is much quicker and easier to use then editing the source code. It is also a lot less likely to crash your website than an inexperienced webmaster dabbling with the HTML source code is!
Another excellent plugin is called Ultimate Blocks. This works directly with the Gutenburg editor. You can’t edit the HTML directly, but it gives you double the number of blocks that you can use, to style and customize your site. For example, you can add reviews, styled ‘Calls to Action’ and more. You can also add click-to-call buttons, an excellent feature if you have a phone answering service from the likes of Moneypenny to handle calls and capture leads for your business 24.7
Editing the Website’s HTML in the Source Code Editor
Make some kind of backup of your website before editing the HTML code via the Source Code Editor.
Go to “Appearance” in the side-menu and then “Theme Editor” – which is normally near the bottom.
You then just need to navigate to the section you need using the right-hand menu’s Theme Files:
This has been a brief overview of the methods of editing HTML on WordPress websites. To learn more about HTML, a good place to start is the w3 Schools.
