13 Sep HTML & CSS as it Relates to WordPress
An introduction to HTML & CSS looks at the basis of HTML & CSS. But, now lets look at how it relates to WordPress, how you can edit your theme to make it do exactly what you want it to.
It’s important to have a basic understanding of the anatomy of a WordPress theme. There can be a ton of different files, but the most important is style.css and then whichever file the HTML needs changing in. Understanding the anatomy of a WordPress theme will help you quickly decide which file needs to be edited to change the layout.
If you’re looking to change the way something looks (color, font, line height, etc.) we can just edit the style.css file. However, if you’re looking to change the layout of something (two columns instead of three, for example) we need to change the HTML. But, first lets look at the style.
To edit your stylesheet go to appearance > editor from your WordPress dashboard. From there, you’ll see a list of rules, that make your site looks the way it does. These rules can be edited. You should however, set up a child theme and copy and paste the rules you want to change. The child theme, by default, will override the parent theme.
To edit the structure, or HTML, is a bit trickier. You should still be using a child theme, but this time you’ll have to copy the entire file (really just the file name) in order for the child theme to override the parent.
You’ll need to set up an FTP client to download and upload files and create a directory for your child theme. Once you’ve copied your files from parent to child, making sure to name them exactly as they were in the parent, you can begin to edit.
Since there are a million and one scenarios, I won’t go over them all, but make sure to use appropriate classes and tags, and close all HTML tags (if you don’t your formatting will appear broken).
In general, you should only be editing HTML tags, and leaving the PHP alone. All PHP starts with “<?php” and ends with “?>” Editing things within those PHP tags can generally be risky as it may cause WordPress to load something it’s not supposed to. Or start an action and not finish it. Either way, you can change the structure of your site, without touching the PHP.