Type a keyword and hit enter to start searching. Press Esc to cancel.

Currently Reading

WordPress Advanced: Modifying Themes with 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.

Backing Up Your Site

I am talking about backups in the Advanced section, but this is a topic that should be considered by any WordPress user. Backups are good. Backups keep your hard work safe. Many things in life come in threes, and so should your backups. I always have 3 versions of every file that’s worth anything:

  • One wherever it’s used (usually on my laptop)
  • One on a backup drive at home that archives old versions in case I corrupt a file
  • One that is at a different location from my computer and my primary backup. Sometimes it is the cloud; sometimes it’s in a safe deposit box, a friend’s house, or at work.
Backing up WordPress can be tricky. There are several ways to do it:
  1. Manually. This involves using FTP or your web host’s built in file manager to archive and download your entire WordPress site. If you are doing this, be sure to also backup your WordPress SQL database. Your web host will likely have a special tool for this purpose. Manually backing up and restoring your WordPress site can be tricky.
  2. Using Tools in your Web Host’s Control Panel. Your web host will likely have a tool specifically for backing up WordPress. It will likely include a several options, so be sure to consult the web host instructions for details.
  3. Plugins. There are several good plugins for automatically backing up your WordPress site on a regular basis. These will take care of backing up your files as well as your SQL database and packaging it all together. My favorite is WordPress Backup to Dropbox. This tool automatically backs my WordPress database to my Dropbox folder each week. This automatically takes care of the rules of 3s for backing up by having a copy in my WordPress installation, a copy online on Dropbox, and copies on any computers I have linked to it.

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 oftech-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.

Related Posts