Locating the HTML piece of code in wordpress

I am new to wordpress and I am currently working on modifying a wordpress built website. I am trying to find the exact HTML location of the web page using inspect options in chrome and then trying to find that particular piece of code in the pages. Currently i am trying to find a particular piece of code to add a new class to it to include some CSS styles. But String locator did not work and I cant find the HTML section in my edit page list. Instead its View and Text.

Can someone please guide me on how to locate the exact code using inspect?

Answers 1

  • HTML is output either by your theme or your plugin. So first what you need to do is understand WP's template hierarchy. If you're having trouble following the hierarchy and you need a code snippet to figure out which template your page is using (it sounds like you're talking about a WP Page?) you can also add this to your theme's header.php file, located in /wp-content/themes/your-themes-name/header.php:

    <!-- <?php global $template; print_r($template); ?> -->

    This will show you which theme file is being used to render the HTML of your page. For a Page, most likely it is page.php located in /wp-content/themes/your-themes-name/page.php.

    Once you find the right file, open it in a text editor. You may find the code you need to change right away. But, depending on your theme and plugins, you may also find that you actually need to edit another file. WP allows Template Parts, which are separate, reusable PHP files in your theme folder. There are also hooks throughout themes that let plugins inject and alter code. And, once you find the part you want to edit, don't edit a theme or plugin file directly. You'll want to create a Child Theme so that whenever your theme is updated, your customizations aren't lost. Sometimes it's as easy as adding a quick filter and other times you'll need to copy the template in question, it just depends on how it was coded.

    If you can provide more context about what type of HTML you're trying to locate and add a class to, that may help us to help you figure out where the code is and how best to edit it.

Related Questions