Step 7 – Custom Code

If you're like me, after using a theme for a while, you're going to find a font you don't like or that the spacing between a header and the text is not quite right. People like us, we're nitpickers. We want things to be just right, and we obsess over it until it is. Okay, maybe I'm giving a little bit too much away about myself, but if you're the kind of person that feels comfortable, and perhaps even compelled to dig into the guts of things to understand how they work or to bend them to your will, this is the article for you. I'm going to talk to you about modifying themes, adding custom code, and even a little about creating your own WordPress themes.

Warning: The tips and tricks in this lesson have the potential to break your WordPress site. There is always risk in tinkering behind the closed doors of a developer's code. You don't know what cans of worms are waiting to explode on you in there. Follow the tips I'm going to give you at your own risk, and always, always, ALWAYS have a clean backup of your site to revert to should things go awry.

The Editor


When you visit the Appearance menu in your WordPress dashboard, you will see an option called simply The Editor. This innocuous settings panel gives you direct access to the master files for the themes installed in your WordPress site. Things like your 404 page, your master CSS file, your page templates, and your header and footer are all files accessible through the editor. These files allow you to make permanent changes to the look and feel of your WordPress site. They are CSS (style sheets) and PHP (templates) files.

Style sheets hold all the stylistic elements of a page. Attributes of font, color, lines, shape, and much more are all controlled through CSS. Style sheets can be referenced by an HTML page. Once it is, that page can draw on the styles defined within that sheet.

Templates are frameworks that can be used to call specific content and design aspects in to certain locations. They are what allow Content Management Systems (CMS's) to separate your design from your content.

Building Your Own Theme


If you are a really advanced user, you might also want to consider building a theme of your own. WordPress works much like a CMS in that regard. You can package all the necessary HTML, PHP, and CSS files along with images, fonts, and other resources into your own WordPress theme. If you're curious about exploring the possibilities, try looking for a free downloadable WordPress theme or make a copy of one of your paid themes. Unzip the theme file and take a look inside. You'll see many of the components of a website that's setup for a CMS.

If you're interested in learning more about building your own theme, checkout WordPress.org's page on the topic or do a web search. You will find endless resources out there to teach you how.

Learning HTML and CSS

There are a lot of great resources on the web to learn how to use HTML and CSS. It's really not that hard to figure out. I have many friends who'd consider themselves some degree of tech-tards, but who have learned and/or taught themselves HTML and CSS. Here are few great resources to help:

  • Mozilla Thimble is a completely internet-based HTML and CSS learning tool. It allows you to enter HTML and CSS code straight into a text box and see the resulting output right next to the code. It also has lots of little hints and tips to help you get started. If you are learning HTML and CSS for the first time, or just want to test some code out, I highly recommend using this little web app.
  • W3Schools is another great resource. It is a repository of code. If you are working with a specific HTML or CSS code and want to know the ins and outs of its attributes, this is a great place to check.
  • Google. Yes, I said Google. When I can't figure out how to do something in HTML or CSS, I go straight to google and start typing in keywords for what I want to do. There are countless free and paid resources out there to help you get the job done.
Last modified: Wednesday, 15 April 2015, 10:16 PM