Step-by-Step Guide for Editing HTML on WordPress Without Altering HTML Structure

IntroductionEditing HTML in your WordPress posts or pages can be daunting, especially if you're worried about breaking the structure of your content. This guide will walk you through a simple example to update the HTML without altering the structure. We'll use a real-life example from this published post to demonstrate how to make changes safely.

Example Scenario: Updating Product Information

You have the following CSS and HTML in your WordPress post:

html

Copy code
<style>
.Product_Image,.Product_Pros,.Product_Title,.prod_img{width:100%}
.Product_Left{float:left;width:35%;height:100%;padding-right:23px}
.Product_Rating{width:100%;font-weight:bold; min-height:50px;margin-top:10px}
.CTA_Button,.Product_CTA{width:100%;margin-top:15px}
.Product_Main_rating{width:100%;height:35px;line-height:25px}
.Product_Feature_Rank,.Read_All_Reviews{width:100%;display:inline-table; min-height:25px}
.Product_CTA{min-height:50px;text-align:center}
.CTA_Button{min-height:25px}
.Product_Right{float:right;width:65%;height:100%}
.Product_Text{width:100%;min-height:220px;display:flex}
.Cons_Title,.Pros_Title{width:100%;min-height:25px;font-weight:700}
.Pros{font-size: 14px;margin-top: 5px;}
.Cons{font-size: 14px;margin-top: 5px;}
.Product_Cons{width:100%;margin-top:29px}
.stars-rating,.stars-rating-main{--stars-width:calc(var(--star) * 5);--stars-height:var(--star);--gap:calc(var(--star) / 100);--rating:0;--rating-width:calc((var(--gap) * var(--rating)) + (var(--star) * var(--rating)) );position:relative;background-image:url("data:image/svg+xml,%3Csvg width='328' height='64' viewBox='0 0 328 64' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M32 0L39.1844 22.1115H62.4338L43.6247 35.7771L50.8091 57.8885L32 44.2229L13.1909 57.8885L20.3753 35.7771L1.56619 22.1115H24.8156L32 0Z' fill='%23C4C4C4'/%3E%3Cpath d='M98 0L105.184 22.1115H128.434L109.625 35.7771L116.809 57.8885L98 44.2229L79.1909 57.8885L86.3753 35.7771L67.5662 22.1115H90.8156L98 0Z' fill='%23C4C4C4'/%3E%3Cpath d='M164 0L171.184 22.1115H194.434L175.625 35.7771L182.809 57.8885L164 44.2229L145.191 57.8885L152.375 35.7771L133.566 22.1115H156.816L164 0Z' fill='%23C4C4C4'/%3E%3Cpath d='M230 0L237.184 22.1115H260.434L241.625 35.7771L248.809 57.8885L230 44.2229L211.191 57.8885L218.375 35.7771L199.566 22.1115H222.816L230 0Z' fill='%23C4C4C4'/%3E%3Cpath d='M296 0L303.184 22.1115H326.434L307.625 35.7771L314.809 57.8885L296 44.2229L277.191 57.8885L284.375 35.7771L265.566 22.1115H288.816L296 0Z' fill='%23C4C4C4'/%3E%3C/svg%3E%0A");width:var(--stars-width)}
.main_rating_num{font-size:14px;float:right;padding-right:6px}
.main_raiting_count{font-size:14px}
.feature_rank_title{font-size:12px}
.feature_rank_number{font-size:12px;float:right;padding-right:6px}
.one_feaure_rank{line-height:25px;height:30px}
.rating,.stars-rating,.stars-rating-main{background-repeat:no-repeat;background-size:var(--stars-width) auto;height:var(--stars-height)}
.CTA_Button_mobile{display:none}
.stars-rating{--star:14px;display:inline-block}
.stars-rating-main{--star:19px;display:inline-block}
.rating{position:absolute;overflow:hidden;transform:translate(0,0);background-image:url("data:image/svg+xml,%3Csvg width='1030' height='186' viewBox='0 0 1030 186' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M93 0L113.88 64.2614H181.448L126.784 103.977L147.664 168.239L93 128.523L38.336 168.239L59.2158 103.977L4.55174 64.2614H72.1202L93 0Z' fill='gold'/%3E%3Cpath d='M304 0L324.88 64.2614H392.448L337.784 103.977L358.664 168.239L304 128.523L249.336 168.239L270.216 103.977L215.552 64.2614H283.12L304 0Z' fill='gold'/%3E%3Cpath d='M515 0L535.88 64.2614H603.448L548.784 103.977L569.664 168.239L515 128.523L460.336 168.239L481.216 103.977L426.552 64.2614H494.12L515 0Z' fill='gold'/%3E%3Cpath d='M726 0L746.88 64.2614H814.448L759.784 103.977L780.664 168.239L726 128.523L671.336 168.239L692.216 103.977L637.552 64.2614H705.12L726 0Z' fill='gold'/%3E%3Cpath d='M937 0L957.88 64.2614H1025.45L970.784 103.977L991.664 168.239L937 128.523L882.336 168.239L903.216 103.977L848.552 64.2614H916.12L937 0Z' fill='gold'/%3E%3C/svg%3E%0A");width:var(--rating-width)}
.one_prod_item,.products_list{width:100%;float:left}
.container_roundup ul{margin:0;padding:0}
.container_roundup ul li{list-style-type: none;counter-increment: item;list-style-position: inside;padding: 0px 0 2px 36px;text-indent: -2.3em;margin-left: -4px;}
.container_roundup ul li:before{content:counter(item);margin-right:10px;font-size:80%;background-color:#2e2e30;color:#fff;font-weight:700;padding:3px 8px;border-radius:3px}
.one_prod_item{height:72px;border-bottom:1px solid #6c6a5c;margin-top:10px}
.one_prod_item:last-child{width:100%;float:left;height:72px;border-bottom:none;margin-top:10px}
.prod_item_list_img{float:left;margin-right:10px;height:60px;width:60px}
.prod_item_list_texts{float:left;width:58%;margin-left:10px}
.prod_item_list_bt{float:left;width:30%;text-align:right;margin-top:8px}
.prod_item_list_title{font-size:14px;font-weight:700;overflow:hidden;display:inline-block;text-overflow:ellipsis;white-space:nowrap;width:93%}
.prod_item_list_title a{color:inherit}
.Product_Rating p,.one_prod_item p{all:unset}
@media only screen and (max-width:768px){
.Product_Left,.Product_Right{all:unset}
.Product_Rating,.Product_Right{margin-top:15px}
.feature_rank_number,.feature_rank_title{font-size:14px}
.CTA_Button,.prod_item_list_bt{display:none}
.CTA_Button_mobile{display:block;text-align:center;margin-top:25px}
.prod_item_list_texts{width:75%!important}
</style>

<div class="Product_Text">
  <div class="Product_Left">
    <img class="Product_Image" src="baofeng-walkie-talkie.jpg" alt="Baofeng Walkie Talkies">
  </div>
  <div class="Product_Right">
    <h2 class="Product_Title">Baofeng Walkie Talkies</h2>
    <div class="Product_Rating">
      <p class="main_rating_num">4.4</p>
      <div class="stars-rating-main"></div>
    </div>
    <div class="Product_Cons">
      <p class="Cons_Title">Cons:</p>
      <ul class="Cons">
        <li>Limited range depending on the terrain.</li>
        <li>Chargers are not UL approved.</li>
        <li>Monitor button is not well understood.</li>
      </ul>
    </div>
  </div>
</div>

You want to update the product description and rating to:

  • Product Name: "Baofeng Walkie Talkies Pro"
  • Rating: "4.7"
  • Add a new con: "Lacks advanced features found in more expensive models."

Step 1: Access the WordPress Dashboard

  1. Open your web browser and log in to your WordPress admin dashboard.
  2. Navigate to the post or page you want to edit by going to Posts > All Posts or Pages > All Pages.

Step 2: Switch to the Classic Editor (if not already using it)

  1. Install and activate the Classic Editor plugin if needed:
    • Go to Plugins > Add New.
    • Search for "Classic Editor".
    • Install and activate the Classic Editor plugin.
  2. Go back to your post or page to edit it using the Classic Editor interface.

Step 3: Editing Content in the Classic Editor

Using the Visual Editor
  1. In the Classic Editor, make sure you are in the Visual tab.
  2. Locate the product description you want to edit.
  3. Update the product name and rating directly in the Visual tab:
    • Original: Baofeng Walkie Talkies
    • Updated: Baofeng Walkie Talkies Pro
    • Original Rating: 4.4
    • Updated Rating: 4.7
Using the Text Editor (HTML)
  1. Switch to the Text tab to edit the HTML directly.
  2. Carefully update the product name, rating, and add the new con without altering the HTML tags:
html

Copy code
<div class="Product_Text">
  <div class="Product_Left">
    <img class="Product_Image" src="baofeng-walkie-talkie.jpg" alt="Baofeng Walkie Talkies">
  </div>
  <div class="Product_Right">
    <h2 class="Product_Title">Baofeng Walkie Talkies Pro</h2> <!-- Updated product name -->
    <div class="Product_Rating">
      <p class="main_rating_num">4.7</p> <!-- Updated rating -->
      <div class="stars-rating-main"></div>
    </div>
    <div class="Product_Cons">
      <p class="Cons_Title">Cons:</p>
      <ul class="Cons">
        <li>Limited range depending on the terrain.</li>
        <li>Chargers are not UL approved.</li>
        <li>Monitor button is not well understood.</li>
        <li>Lacks advanced features found in more expensive models.</li> <!-- New con added -->
      </ul>
    </div>
  </div>
</div>

Step 4: Using the Gutenberg Block Editor (Optional)

  1. If you prefer using the Gutenberg Block Editor, navigate to your post or page and click Edit.
  2. Locate the HTML block containing your content.
  3. Edit the HTML within the block:
    • Click on the HTML block.
    • Click the three dots in the block toolbar and select Edit as HTML.
    • Update the product name, rating, and add the new con.

Step 5: Preview Changes

  1. Before publishing your changes, use the Preview feature to see how your post or page will look on the front end.
  2. Click the Preview button in the top right corner of the editor.
  3. Make sure everything looks correct and the HTML structure is intact.

Step 6: Backup Your Content

  1. Copy the current HTML content and save it as a backup in a text file before making significant changes.
  2. This will allow you to restore the original content if needed.

Step 7: Validate HTML

  1. Use an HTML validator like W3C Validator to check for any errors after making changes.
  2. Enter your post or page URL into the validator to ensure there are no HTML issues.

Tips for Safe HTML Editing

  • Avoid Changing HTML Tags: Only edit the text inside the tags, not the tags themselves.
  • Use Shortcodes and Blocks: Use WordPress shortcodes or Gutenberg blocks for complex structures.
  • Preview Frequently: Regularly check your changes using the Preview feature.
  • Backup Regularly: Always keep a backup of your original content before making changes.

Disclaimer

Gizzmo is not responsible for any issues that may arise from editing HTML in your WordPress site. We encourage you to seek assistance from professional WordPress developers for any complex or "hard" editing tasks to ensure your website functions correctly and securely.

By following these steps, you can safely edit the HTML content of your WordPress posts and pages without disrupting the HTML structure.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us