WordPress Debugging Tools & Techniques

noel saw
Verified List
  • (0 votes)
  1. noel saw says:

    Theme coding guidlines

    best practices

    • semantic markup and classes
    • use long, descriptive class and id names rather than shorter obscure classes
    • keep all classes and id’s lowercase and separate words by dashes
    • keep scss from getting too narrow of scope with too much nesting
    • keep similar structures on different pages using the same markup and classes whenever possible.
    • Use h1, h2, h3 tags consistently on different pages
    • Don’t target elements using already existing classes that are being used for other reasons and might need to be changed. Add new classes to elements that need to be selected.


  2. keep variables semantic, lowercase and separate words with underscores
  3. use a prefix specific to the project in variable names to keep there from being collisions with the theme, WordPress or plugins.
    in this case ‘gr_’
  4. function names should be prefixed with something specific for the theme. It will make is easier or avoid name collisions and make custom functions easier to spot in the code.
    in this case ‘gadget_’
  5. move any reused or really complicated chunks of code to functions.php settings for functions should be passed to by function argument rather than global variables.
  6. check functions.php for already existing functions that perform the same task.
  7. only edit the scss files for css changes. Don’t use custom css plugins during development. Others developing locally won’t have that css available.
  8. If two pages have structures that are the same, we should move that markup to reusable template parts and then included in all the needed pages.
  9. When including php files or referencing theme paths use get_stylesheet_directory_uri() rather than get_template_directory_uri()
  10. use get_template_part() instead of php include() or require()
  11. generating img markup.
    use the alt=”” attribute as well as width and height. There are many javascript and WordPress plugins that rely on the width and height attribute in img tags.

    Theme folder structure

    Keep images, javascript and css in folders below.
    I’m going to split up the style.css file into uncompressed components and compiled back in to style.css from the scss folder. So we need to edit or add any css in the style.scss included components


    If we need to extend the theme with any additional custom frameworks for metaboxes or theme option we should just use a /frameworks folder.

  • Leave a Comment