Firebug or such development tool

  • I’m new to WordPress and managing website coding. I have what’s probably a “duh” question. I use Firebug or the Google tool to identify a piece of web content and its underlying CSS and HTML code. I can figure out the CSS as there is just one CSS stylesheet file to deal with. But how do I know which template file is being referred to in the HTML side of the screen? How do I know if the code is part of index.php, or header.php etc.?

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hey Jim,

    That’s definitely not a “duh” question at all! There are stacks of template files and it just takes a bit of time to work it out. Usually the header.php and footer.php are the easiest ones to track down but it’s the content in the middle that can be a be tricky for newcomers.

    What I normally do is look at the CSS classes on the body tag as they normally give a bit of insight.

    They’ll have classes like ‘page’, ‘single’, ‘page-template-showcase-php’, ‘archive’, ‘404’ etc and they’ll give you a good idea of what file name you probably want to look for.

    Hope that gives you a bit more help!

    Okay that is good advice. But what “development tool kit” can you efficiently use to track and step through the code PHP scripts ?

    Is there no IDE that wraps around WP code and traces, maps everything etc

    Zend ?

    Hey bollocks187,

    You’ll be after https://xdebug.org/ for that. It let’s you live trace php code. That combined with a code editor such as PhpStorm will do the trick.

    There is a great video on the PhpStorm site showing how to do that. Check out the Remote Debugging with PhpStorm video on this page

    Good luck!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Firebug or such development tool’ is closed to new replies.

Tags