Instructions Themes WordPress

Here’s How to Edit HTML in WordPress Without Breaking a Sweat!

WordPress is an incredibly popular platform, and the main reason for that is its modularity.

If there’s something you want to do, you can just download a plugin that does it and go on your way!

In case you’re more skilled than most, you can even write a plugin when none of the existing ones do exactly what you want.

However, while you can do most things by just using plugins and themes, sometimes you just have to dig a bit deeper to get what you want.

Editing the HTML code of your WordPress website is one of the ways you can do that.

Plenty of people are scared to do it, thinking they might break their website. It’s easier than you think through – and with this guide, you’ll be able to do it in no time!

So, let’s get going!

What is HTML?

Before we begin, you need to get at least a basic primer on what HTML is and how it works.

HTML is short for “Hyper Text Markup Language,” and it’s a computer language made for website creation. It’s made to be easy to learn but hard to master, with lots of different functions.

Most websites have HTML code somewhere in their roots and WordPress is mostly built on it.

All of the pages on a WordPress website are effectively just HTML text that a browser reads and then displays visually, according to what the text tells it to do. When it comes to it, you could make a complete HTML webpage in notepad if you wanted.

The tags are the most important parts – they are placed in angular brackets, like <this> for example. They tell the browser how to display things and place certain effects on the text within a page.

For example – <b>this phrase would be in bold </b> and this one would not.

The first part is known as a start tag and the latter part as an end tag. Most tags contain both, but some don’t require an end tag.

So, how does all of this apply to WordPress?

Well, in WordPress HTML code works closely with PHP code, relying on PHP to call up various information and content from your database or files from your template folder and more.

This way, the entirety of the HTML code doesn’t have to be in one single file – it can be across multiple ones, and PHP can be used to call it up for certain functions. This will be more important later on.

For now, let’s see what you’ll need to start working on those HTML edits!

The Tools You’ll Need

Coding seems kind of arcane and mysterious to a lot of people, and they think they need a lot of specialized programs to do it properly.

The truth is, you won’t need much more than some basics you already have.

You’ll need a text editing program for a start. Regular Notepad will do, but if you want something more you could use Notepad++ which has syntax highlighters for most common programming languages and can undo more than once.

At the start you’ll probably click the ‘undo’ button quite a few times, so you’ll probably need that.

You will also need an FTP client, which you probably already have. In case you don’t, there’s Cyberduck, FileZilla, Transmit and more.

Beyond that, you’ll also need a modern internet browser, but considering that you’re reading this page, you probably already have it.

How to Edit the HTML code of a WordPress Page

To start with, let’s talk about editing the HTML code of a WordPress page or post, which is the most straightforward thing to do.

Well, it seems that way when you know how to do it. We’ll go through it step-by-step with you.

Step 1: Go to the WordPress HTML editor

Just go to the normal page/post editor that you usually use and click on the “Text” tab in it.

That’s where you will see the HTML code of that page or post.

Step 2: Make the changes you want

In this inbuilt editor, you can make any changes you want to the content of the page or post in question. Once you’re done, click updated and the changes will go live. It’s as easy as that!

Well…not quite.

You see, with this method you can edit the contents of the page, but you can’t edit things like the look or the layout of the page. You’re also not allowed to use some pieces of code or certain tags.

To do more, you’re going to have to go deeper.

To do that, you’re going to have to find the .php file of the page through your FTP client. It will usually be under Appearance -> Editor -> page.php

You can then open the .php file with your text editing program, and make the changes.

However, it’s a good idea to make a backup of the file first, so you can restore it in case your changes go awry.

If something turns out badly, you can just replace the edited file with the backup you created, and everything should go back to normal.

You can also edit other parts of the page by accessing other .php files located in the same place. These are mostly self-explanatory – header.php, footer.php, and sidebar.php.

Just be aware that the changes to the header, footer and sidebar will apply to all posts on your website, not just the one you’re editing at the moment.

How to Edit the HTML code of a WordPress Theme

Editing a WordPress theme can be dangerous business, and it can potentially break your website. It’s also a bit trickier than editing a page.

Because of that, you have to know exactly what you’re doing before you start and take some safety measures.

So, let’s get into it!

Step 1: Creating a child theme

A child theme is a direct copy of another theme, called the parent theme, which retains everything about it.

However, it remains a completely separate instance, and any modifications made to the child theme do not affect the parent and vice-versa.

You can experiment as much as you like with a child theme without worrying about breaking the site or permanently losing your changes if the theme gets updated and so on.

There are two ways to create a child theme:

1 – With a plugin

2 – Manually

Here’s how to do it with a plugin:

  • Download a plugin like One-Click Child Theme
  • Go to the Plugins -> Add New section of your admin area
  • Click on the Upload Plugin button and upload the plugin you just downloaded
  • Click Activate Plugin
  • Go to Appearance -> Themes and activate the theme you wish to duplicate
  • Click on the thumbnail of the theme, then click on the Child Theme button
  • Add the theme name, description, and other info
  • Click on the Create Child button
  • Congratulations, you now have a child theme

Doing it manually can be a bit trickier – here’s how it’s done:

  • Create a new folder and name it anything you want – for example, “ThemeName Child,” where ThemeName is replaced with the name of the intended parent theme
  • Now create a file and name it style.css
  • In that file write the following piece of code:
    /*
    Theme Name: ThemeName Child
    Template: ThemeName
    */
  • Now create a file and name it functions.php
  • Put the following code into that file:
    <?php
    add_action( ‘wp_enqueue_scripts’, ‘enqueue_child_theme_styles’, PHP_INT_MAX);

    function enqueue_child_theme_styles() {
    wp_enqueue_style( ‘parent-style’, get_template_directory_uri().’/style.css’ );
    }
    ?>
  • Put the folder into a zip file
  • Go to Appearance -> Themes -> Add New and upload the file there
  • Activate the theme, and you’re ready to go

Using either method is fine – just use the one that feels better to you.

Now that you have a child theme of the theme you want to edit, we can move on to the next step.

Step 2: Editing the theme through an FTP client

Before you ask – yes, there are other ways to edit a theme, but editing it through your FTP client is one of the best and safest ways to do it.

The basics of it are this – you need to locate the right files, download them, edit them, then re-upload them. Or, edit them through the FTP client itself if you have the option.

Here are some of the commonly edited files and where to find them:

wp-config.php  will be under  /public_html/<WEBSITENAME> 

header.php, footer.php, sidebar.php and style.css  will be under  /public_html/<WEBSITENAME>/wp-content/themes/<WEBSITENAME>

Remember to always keep backups of all the files you want to edit so you can put things back in their place if everything goes wrong.

That’s the basic gist of things.

HTML Tips and Tricks

Here we’ll tell you about some basics edits you can do to the HTML code of your WordPress site and what the intended results are. Hopefully, it will all go through without a hitch.

Let’s dive right in.

1. Common text formatting tags

To start out with, here are some common tags for text formatting that you can use.

Italics <em> Example text </em>

Bold<b> Example text </b>

Underline – <u> Example text </u>

Headings – <h1> Example text </h1> or <h2> Example text </h2> and so on

2. Links

If you want to create a hyperlink, that’s also something you can do with an HTML tag.

<a href=”http://www.example.com”>Example Text</a>

In this case, the link would be anchored to the example text.

If you want the link to stand on its own, you can do that by replacing the ‘example text’ part with the URL itself, like so.

<a href=”http://www.example.com”> http://www.example.com </a>

3. Numbered/Bulleted lists

These are the tags needed to create a numbered list

<ol>
<li>Item One</li>
<li>Item Two</li>
</ol>

The bulleted list is created with almost the same tags

<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>

4. Tables

Tables are a bit more complex, but if you follow some basics, you will be able to code tables in HTML without much of an issue.

Here’s what you need to remember:

  • The opening and closing tags for tables are <table> and </table>
  • The opening and closing tags for individual cell are <td> and </td>
  • The opening and closing tags for individual rows are <tr> and </tr>

You can place whatever you like in each of the cells.

Here’s an example of a simple table:

<table>
<tr>
<td>Day</td>
<td>Chores</td>
</tr>
<tr>
<td>Monday</td>
<td>Buy eggs</td>
</tr>
<tr>
<td>Thursday</td>
<td>Go to the Dentist</td>
</tr>
</table>

The width of columns, in this case, is dictated by the amount of text contained in the first cell.

If you want to manually dictate the width of columns you can do so by adding a simple command to the first td tag:

<td width=300>

The width is measured in pixels.

5. Images

To place an image on your site, you first need to upload it.

To do that you need to go to Dashboard -> Media -> Add New and upload the image – we’ll call it example.jpg.

Once it is uploaded, you need to reference it with HTML code, like so:

<img src=”/files/example.jpg” alt=”Example” />

The latter part is the alt text, which pops up when you hover over the image with your mouse pointer. It is used by search engines and certain programs and browsers.

In case you want to format your image further and move it to one side of the text, you can do that as well by adding class=”alignright” or class=”alignleft” at the end of the code before />.

There’s Always More…

You have to be aware that all of this is just the beginning. There’s much more to editing HTML in WordPress than just what was in this article.

However, this should give you a good starting point, and you can explore by yourself if you want to move on to some more complex stuff.

You now know just enough to start experimenting on your own, and you’re website can stay safe while you do it.

So, go out and edit the hell out of some HTML code! You can do it!