When it comes to quick, efficient and good-looking web development, we always seem to end up talking about WordPress development —with good reason, too! WordPress is simply one of the most powerful, most user-friendly, and most accessible content management systems around. As such, we tend to dwell on what it can do more than say Drupal or Joomla.
However, it’s not always smooth sailing when you’re trying to establish a WordPress site on your own—especially if you haven’t got much by way of formal code training. If you’re struggling to get your theme up and off the ground, or even just to wrangle its looks into place, then you’ve come to the right place. It’s easier than you might think to customize the specific elements of a WordPress theme, even without adequate PHP or CSS experience. With all of that in mind, let’s get cracking!
Below you’ll find Top Tips on how to customize the look of your WordPress theme
Have A Plan In Mind
Now, before we start telling you where to poke the code and how to go about it, we have to first make sure you’re coming to this fight armed. You see, you’re going to want to have a good idea of how the site will look before you start mangling the code. As with any extensive (and possibly expensive) project, it’s always best to go in with a clear understanding of what’s required, as well as where it all ends.
This safeguards you from painting yourself into a corner, so to speak. To be more specific, it keeps you from accidentally creating changes that you’re not into, only to be stuck with them because of a lack of corrective knowledge. Have a clear goal in mind when piecing together your site, and you’ll be alright. Additionally, remember to be cautious with any and all changes, and to frequently double or triple check your work. With experience comes lenience, but until then, keep an eye on the target, Soldier!
Code The Important Bits
Okay, now that we’ve give you our fair-weather warning and feel you’re prepared to continue, let’s crack into a few of the items that will help you change the code of your theme to match your aspirations. To begin with, we’ll be dealing entirely with CSS, as this is the main framework behind the look of your WordPress page.
CSS uses a thing called a stylesheet to dictate how your site looks. This is like the body of your car: It’s the outer covering that comes with colors, corners, curves and lots of other nouns to make peoples’ heads turn. By changing specific portions of your site’s CSS stylesheet, you can achieve different results.
Color Changing Chameleons Are Cool
One of the main reasons you’ll want to be here is to modify the color of some part of your site’s theme. To do so, you’ll need to find the CSS controller defining that portion of the template. This will be marked with a hashtag (#) and will usually be named by the part it controls. For instance, look for items like #nav, #header and #footer.
Once you’ve located the appropriate controller, you’re looking for something called a hex code. This is a six digit RGB number sequence that tells browsers what color things aught to be. Each color in the spectrum has a specific code unique to it, and by chaining this code in the stylesheet, you can change the color of that section. As such, if you’re looking to change the color of your nav bar—just as an example—you’ll need to find the #nav controller, locate the hex code, and then change it to the color you prefer.
Feel free to play around with this, as you’re not likely to get it perfect straight out of the gate. Instead, take your time and check your results on the actual live preview, just to see how the hues stack up.
Change Font Size
Here’s another way in which you might need to attack the CSS stylesheet. Let’s say you’ve changed the color of your navigation bar, but now you want to increase the font size of your primary menu: Just as an example, we’ll say it’s going from 12 point to 14 point.
To do this, you’ll need to repeat a few of the steps from above. Find the appropriate controller (in this case it will be something like #primary-menu or perhaps #nav primary-menu. Once you’ve located it, look for a font dictation, as well as a point dictation. These will be rather obvious, and aught to be right below the identifying controller tag. Here, you’ll see a string of code that says something about 12 point font size—we’re skipping specifics, but we promise you’ll be able to spot this.
To change this font to the size you want, simply replace that 12 with a 14. It’s that simple! Hit the update button within WordPress, go check your results, and then apply changes as needed. You’ve just bumped up the size of an important part of your WordPress ensemble, and it wasn’t even that hard, now was it!
When in Doubt Comments Are Your Mate
If you’re feeling stuck, remember that you can always look for the theme developer’s comments within the code editor. Often times a developer will leave small non-coding strings of texts called comments within the entirety of the theme. These act as small notes. They usually either tell the developer something about his creation (we’re sort of forgetful, us code monkeys) or it identifies what’s going on for you. Either way, you stand to benefit from taking a peek.
On a similar and final note, if you’re absolutely stuck modifying your WordPress theme, contact the developer! They’re usually friendly and appreciate you asking for coding help: If you’re lucky, they may even create the changes you need for you.