I`m gonna show you in this tutorial how to edit HTML or CSS in your WordPress theme.
You can change HTML or CSS in different ways, but I`m gonna show you just two of them, which I consider easier.
First Method ( I think is the easiest one, and I recommend to have Chrome browser )
Before modifying any HTML or CSS let`s install one WordPress plugin
- Go to your WordPress dashboard and choose “Plugins” => “Add New”
- Search for String Locator plugin. Click on “Install” and “Activate”
- Now go to your website, on your Chrome browser. I will use netcrumb.com`s website for this tutorial
- Navigate to the place where you want to edit HTML or CSS
- For example, let`s say that you want to edit something in the footer this time.
- Go to your website, Right Click on your mouse and choose “Inspect”
- You will see now the HTML code from your website. You can play and modify anything you want, but it will not be live so don`t worry.
- Once you have decided on the piece of code that you want to be changed, save some part from it. Let`s say that you want to modify the Copyright text, just copy the text ok and save it for the moment.
- Return to your WordPress Dashboard and let`s search for the Plugin that we have installed before.
- Go to “Tools”=> “String Locator”
- You have to choose your theme in Search through and put the text in Search string.
- In the first box just choose your theme and on the second box insert just some part of what you are searching for. DO NOT insert big chunks of text. The plugin might not find what you need because some parts of the text might be written inside some code. Ex: I`m searching just for “NetCrumb is Proudly Hosted on”
- Click on “Edit” and you will be redirected directly to the piece of code that you are searching for.
- After you modify what you want, click on Save changes.
- Go to your WordPress dashboard menu
- Click on “Appearance” => “Editor” ( You might get a message like the one from the photo, but is just a warning and click on “Proceed”
- Select the theme you want to edit in the upper right and click on Select
- You will see a list of theme files, and once you click on it, you can see some code.
- What I advise you to do is save the file in a notepad before editing. You have to know what you are doing so take care.
- The PHP code is combined with HTML and also connected to CSS with what are called “Classes”
- For example, if you want to add some tracking code in the header, just click on header.php and so on
- To modify anything in the CSS, please go to the last file, and you will see style.css
- After you make any edits, just click on “Update file”, and you are done.
If you have any questions don`t hesitate to leave me a comment, send me an email or just request a tutorial for free.