WordPress themes are a great solution for website owners who do not excel in HTML coding. Instead of spending hours and hours on going through the boring lines of code, you simply search a theme you like (a lot of them are for free) and install it.
On the other hand, it might prove, shall we say, troubling to find a 100% optimized theme for your purposes. The theme itself can be perfect, but you may still want to tweak a few elements, such as:
- headline margin
- search bar position
- sidebar organization
Would you like to configure any WordPress theme you install in a way which completely meets your criteria? We like that too, and it will be our pleasure to share the most basic tips (and later on some advanced techniques too) with you.
As the title suggests, this article is dedicated to the basic tips, orientation and terminology when it comes to playing with your theme, so don’t feel offended if you find some of the things too primitive or elementary.
Let’s get started, shall we?
Step 1 – Basic Terminology
We’ll be not providing a complex course, far from it. Our goal here is to literally train your eyes to quickly identify some basic elements you may want to edit. That should start your learning curve and you’ll suddenly find HTML code not that hard.
What are the basic HTML code elements you need to know and work with?
Defines a fixed position for a chosen element (picture, text window,…). Examples of use:
It’s original purpose is to cite a portion of the text. We will use it especially when we’ll be investigating sidebars of WordPress Themes, because Blockquote has some handy functions (like automatic margins).
Every color got assigned a hexadecimal code which is then translated by HTML. No need to memorize the codes though, the Colorzilla Add-on for Firefox takes care of that for you – you’ll just pick a color you like and get a code you can implement right away.
Most of the websites typically have 6 headings, labeled h1, h2, … , h6. They all have different functions (please note that this information applies in general and can differ from site to site):
- h1 – used only once, the name of the website
- h2 – important headlines in the text body or other parts of the website
- h3 – less important and distinctive than h2
- h4 – less important then h3 etc.
You’d be surprised to learn that this part of the code actually represents – yes, the margin around the element of your choice. Usually can be seen as:
A shortcut for pixel, it is the basic measuring unit of distance in HTML. It is also the smallest piece of the screen that can be controlled. Pixels are in a very tight relationship with the “margin” we already described above, so as a rule you will be seeing something like:
- margin-left: 10px
Step 2 – Basic Steps of Theme Editing
The first question we need to ask ourselves is where is the very area we can perform any changes at all. Luckily, the answer is quite simple:
- log in to your dashboard
- in the Appearance menu, click the “Editor” button
You should see something similar to this screen on your monitor:
Now, obviously if you don’t know anything about HTML, your first reaction will naturally be “eeew, what the hell is this, I don’t want to do anything with it”.
Luckily, we’ve already gone through a few basic terms in order to make our first encounter a bit less hostile. Keep in mind that the HTML code you see is nothing but your servant; a way how to make stuff look how you desire.
There is a set of a few recommended steps you may want to follow before you start wildly changing everything you can see:
1. have a clear picture of what you want to change, e.g. “I need H2 to have a bigger bottom margin”
2. either find or come up with in which file could the element you want to alter possibly be – more about the files later
3. use the browser Search button to see whether the element is even mentioned in the file you chose and if it is, where exactly
4. before you alter anything, copy & paste the original code somewhere else! It is vitally important to always create a backup copy, especially when we’re HTML beginners and there is a high probability that we will mess something up.
5. make the desired changes, hit “Update File” and refresh your website to see what actually happened
These steps can be easily applied when performing most of the amateur (or advanced) changes we’ll be talking about, so make sure they become your natural way of approaching theme editing.
Step 3 – WordPress Theme Files
WordPress Theme Files are like blocks that form the foundations of every WordPress Theme. They are also the place where you can conduct your changes, so it’s necessary to understand the corelation of a particular php file and the part of the website it controls.
Let’s say we went back to the part when we clicked on the Editor button in the Appearance menu:
Notice the column on the right with blue text? That’s right, those are the files where you can perform your changes. Their numbers and names differ from theme to theme, but there are some files that:
- are common for all themes
- are the most important and you’ll be probably doing most of your work in them
We will also demonstrate the relation between a particular file & part of the website on the DesignZZZ layout, so that you get an idea what we’re talking about.
Takes care about the part when visitors are browsing through your older posts.
Allows you to modify the comments section of your website, e.g. disable comments or alter various captions.
Deals with the bottom part of your website; a word of warning is not to remove the official WordPress links if you’re using a free theme (been there, the whole domain then crashed, can’t recommend it).
An evil (good?) twin of footer, Header is used to determine the outcome of the top part of your website.
Side widgets represent a significant element and it would be folly to ignore it, hence the file sidebar.php comes in.
Single Post (single.php)
Your individual posts can look a bit different or accommodate some bonus elements; Single Post’s purpose is exactly for such modifications.
A very, very important file determining the design, formatting and looks of your text and graphic elements; in fact it’s so important the the second part of this serial will be dedicated entirely to the Stylesheet file.
What Have We Learned Here?
You should now:
- know that a WordPress Theme can be manually edited and where to do that
- understand basic terminology
- recognize the most basic theme files and their purpose
Stay tuned for the Part 2 concerning style.css, that’s when the real fun begins! In the meantime, feel free to share your feedback & suggestions in the comments…
Thank you for reading!