{"id":17179,"date":"2019-04-26T14:46:04","date_gmt":"2019-04-26T14:46:04","guid":{"rendered":"https:\/\/www.hostinger.com\/tutorials\/?p=17179"},"modified":"2024-03-26T12:33:51","modified_gmt":"2024-03-26T12:33:51","slug":"edit-html-wordpress","status":"publish","type":"post","link":"\/uk\/tutorials\/edit-html-wordpress","title":{"rendered":"How to Edit HTML in WordPress?"},"content":{"rendered":"

WordPress is an easy-to-use platform that you can utilize without touching a single line of code. But, knowing how to edit HTML in WordPress is a good skill to have under your belt.<\/p>

With the knowledge of editing code, you can troubleshoot issues or perform advanced customization to improve your WordPress site.<\/p>

This article will talk about why editing HTML in WordPress is needed and how to do it right.<\/p>

Download complete HTML cheat sheet<\/a><\/p>

\n\n\n\n\n\n\n<\/p>

Is It Necessary?<\/h2>

WordPress works amazingly out-of-the-box, meaning you can have a beautiful and functional website<\/a> without writing any code.<\/p>

In fact, WordPress has a huge collection of themes<\/a> and plugins<\/a> to tweak your website easily. So, you don’t really need to know how to edit HTML in WordPress.<\/p>

If you want to change the appearance of your website, you can use and customize the preinstalled theme or install a new one from the WordPress directory. In addition, to add more functionality to your website, installing plugins could be one of the best solutions.<\/p>

In short, leaving the WordPress source code alone is fine for most situations.<\/p>

However, there are times when you need to edit HTML in WordPress because it might be the only way.<\/p>

For example, when you want to do advanced theme customization or add HTML effects on your posts like attractive highlighted text.<\/p>

Keep in mind that editing code in WordPress incorrectly will cause more harm than good. Do it carefully<\/strong>.<\/p>

\n\n\n

\n

Pro Tip<\/h4>\n

You can check out our article about WordPress vs HTML<\/a> to understand the difference between them when creating your website.<\/p>\n <\/div>\n\n\n\n<\/p>

Things to Consider<\/h3>

Editing the WordPress source code is a serious task. You should minimize the risk whenever you can.<\/p>

To do that, you should consider what your goal is, what tools to use, and how much time you have.<\/p>

Ask yourself: what is your motive? Do you want to make changes for testing<\/strong>, learning purposes<\/strong> or advanced customization<\/strong>?<\/p>

If you want to test things out, creating a WordPress child theme <\/a>is highly recommended. In case anything goes wrong, it won’t affect your website. Apart from that, playing around with a child theme allows you to see if the modification is like what you expected.<\/p>

You can also try out certain WordPress functions for learning purposes. Remember, you should narrow down your scope, touching only the part you want to learn. Not only will it save your time but it will prevent you from stumbling into unnecessary problems.<\/p>

Editing the WordPress source code requires you to have a text HTML editor<\/a> like Notepad++<\/strong> for Windows or Text Wrangler<\/strong> for Mac. You also need to prepare an FTP client like FileZilla<\/strong> and a modern browser like Google Chrome<\/strong>.<\/p>

The last but most important thing is deciding how much time you want to spend on the task.<\/p>

Typically, editing the WordPress source code by yourself is fairly time-consuming. So, if you think you don’t have time to do it, hiring a professional can be a wise option.<\/p>

Editing Source Code in WordPress<\/h2>

As you might know, WordPress uses four different programming languages: HTML<\/a>, CSS<\/a>, PHP, and JavaScript<\/a>.<\/p>

Each language has its own code and serves different functionalities. For example, HTML handles the content structure and CSS manages the appearance. That being said, you might need to perform certain operations by using a specific set of code.<\/p>

Now, let’s explore more on how to edit code in WordPress.<\/p>

How to edit HTML in WordPress<\/h3>

As previously stated, HTML — stands for HyperText Markup Language — controls the structure of content.<\/p>

You can add any type of content like text, images<\/a>, videos into your WordPress posts. You would usually do this from the WordPress editor.<\/p>

\n
\"Switching<\/figure><\/div>

WordPress has two kinds of editors: a visual and text (HTML) editor. In the classic editor, you can switch from the visual editor to the HTML editor easily because they are located side by side. But, that is not the case with the newly introduced Gutenberg editor. There are two ways to switch to the HTML editor:<\/p>

    \n
  1. Clicking on the three-dot menu button on each block<\/li>\n\n\n\n
  2. Clicking on the three-dot menu on the upper left-hand side for editing the entire post<\/li>\n<\/ol>
    \n
    \"options<\/figure><\/div>
    \n
    \"Editing<\/figure><\/div>

    This is an example of how to edit HTML in WordPress using the Gutenberg editor: And this is the result:<\/p>

    \n
    \"The<\/figure><\/div>

    So, you can edit code in WordPress using the two ways above.<\/p>

    But, how to edit HTML on your homepage? Basically, you can add custom HTML from the widget areas. Go to Appearance<\/strong> -> Widget<\/strong>.<\/p>

    From the widget areas, you can edit the HTML of the available WordPress widgets<\/a> or add more from the Custom HTML<\/strong> menu.<\/p>

    \n
    \"Editing<\/figure><\/div>
    \n
    \"Adding<\/figure><\/div>

    To edit HTML, you need to choose the targeted widget first, make changes and save it. On the other hand, you can add new widgets from the Custom HTML menu. Depending on your activated theme, the options may vary. For example, using the Twenty Seventeen<\/a> theme, you have the options: Blog Sidebar<\/strong>, Footer 1<\/strong>, and Footer 2<\/strong>. Once you add the details, save it.<\/p>

    How to edit PHP and CSS in WordPress<\/h3>

    CSS (Cascading Style Sheets) applies the style to HTML. It is responsible for determining how the web page is presented.<\/p>

    When you apply a WordPress theme, your website will have a specific layout, color, and fonts. If you don’t like a certain theme, you can use another one.<\/p>

    But, what if you want to keep the theme layout but want to change the font? Then, you might need to edit the PHP and CSS in WordPress.<\/p>

    Be careful, this method might be not suitable for WordPress beginners<\/a>.<\/p>

    There are two ways to edit PHP and CSS in WordPress: using the WordPress code editor or FTP client.<\/p>

    1. The WordPress Code Editor<\/h4>

    The first method accesses the WordPress code editor. Please note that you can only use this method if your website runs well – meaning your website doesn’t crash because of any malware attacks or failed updates.<\/p>

    Once you created a child theme, activate it. Then, you can go to Appearance<\/strong> -> Editor<\/strong>.<\/p>

    Make sure you select the targeted child theme you want to edit. For example, if you want to edit the footer, you can select footer.php<\/strong> on the right side. Then, you can add or edit the code in the Code Editor.<\/p>

    After editing the code, click the Update File<\/strong> button.<\/p>

    2. FTP Client<\/h4>

    The next method uses an FTP Client.<\/p>

    While this might be a powerful method, we don’t recommend using it<\/strong>. It is unsafe and might put your website at risk if mishandling it. But, here’s how it’s done if you feel qualified, and trust your skillset.<\/p>

    First, you need to create an FTP credential login. Then, you can open your FTP client and enter the details of your FTP host, username, and password.<\/p>

    Once you manage to connect, you will have access to the WordPress source code. Select any files you wish to edit, right-click and choose edit<\/strong>. After you finish editing, you can save the changes.<\/p>

    \"\"<\/a><\/figure>

    Conclusion<\/h2>

    You need a strong reason to edit HTML in WordPress. Most of the time, it is enough to utilize themes and plugins.<\/p>

    If you need to fix any problems or want to perform advanced customization, you may edit the WordPress source code. There are things to consider before doing it: your goals<\/strong>, the tools<\/strong>, and your time<\/strong>.<\/p>

    There are different operations when editing the WordPress source code:<\/p>