How to Edit a WordPress Theme – Part 1: The Basics

AD

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?

Align

Defines a fixed position for a chosen element (picture, text window,…). Examples of use:

  • align-left
  • align-center
  • align-right

Blockquote

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

Colors

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.

Headings

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.

Margin

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:

  • margin-top
  • margin-bottom
  • margin-left
  • margin-right

Px

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:

  1. log in to your dashboard
  2. in the Appearance menu, click the “Editor” button

You should see something similar to this screen on your monitor:

wordpress theme editor

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:

screenshot wordpress theme editor

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.

full page designzz

Archives (archives.php)

Takes care about the part when visitors are browsing through your older posts.

Comments (comments.php)

comments

Allows you to modify the comments section of your website, e.g. disable comments or alter various captions.

Footer (footer.php)

footer

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

Header (header.php)

header

An evil (good?) twin of footer, Header is used to determine the outcome of the top part of your website.

Sidebar (sidebar.php)

wordpress sidebar

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.

Stylesheet (style.css)

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!

Join the 98,750+ Subscribers

Subscribe and grab Free Ebook! Photoshop Crash Course!

We promise not to spam!

Further Related Readings

Vogin

24y old visionary Czech.
All Articles by
14 Comments on “How to Edit a WordPress Theme – Part 1: The Basics” Join The Discussion!
  1. Tutorial Lounge says:

    fully helping training you sharing.

  2. Brian Reich says:

    One thing that needs mentioning is that when you begin with someone else’s WordPress theme, you should strongly consider creating a sub-theme (look it up for instructions). If you simply edit an existing WordPress theme, if you install any theme updates (which may be neccessary for security, enhancements, or bug fixes), all of your customizations will be lost. Sub-themes are a great way to enhance an existing theme in a safe way that preserves both the original theme as well as your customizations.

  3. Anuj@systech says:

    Hey NIce Tips man Good Luck

  4. Your Name says:

    Wow,Fantastic article,it’s so helpful to me,and your blog is very good,I’ve learned a lot from your blog here,Keep on going,my friend,I will keep an eye on it,One more thing,thanks for your post!

  5. Brian Reich says:

    FYI – Some sort of spambot must’ve picked up my previous comment and used my email address to post the second one. That “Wow,Fantastic article…” comment was posted using my address but it was not me. Just thought I’d let you know :)

  6. Ondrej Dyrka says:

    Thx guys, glad it helped.

    @Brian don’t worry about it, I’ve seen so many spam comments that I can immediately recognize what was written by an actual human ;)

    I have to say that creating a sub-theme has never crossed my mind, maybe because I have yet to do anything serious with a WP page. As far as I know though, DesignZZZ runs on a sub-theme, so at least Ayaz knows what he’s doing :)

  7. mubashir says:

    Dear still waiting for next part of WP editing i hope next one is more entrusting but any way this one is really cool tips and you know i already implemented most of them in my blog heheh thanks man waiting for next lesson :)

  8. chenui says:

    Thank for your guide, can I translate to chinese?

  9. Ondrej Dyrka says:

    @chenui Indeed you can (all three parts), as long as you will make a clear reference to me as an author…

  10. kita mason says:

    I am trying to make changes to the footer on the theme page i have followed the steps to go to the editor and make the changes and hit update file. when i do that the changes that i made disappear and no changes to my site are made what is wrong, what am i not doing am I missing something here. I thought wordpress was made to help people not may them go gray before their time.

  11. Ondrej Dyrka says:

    @kita mason – I’m afraid you’re going to have to be more specific. For now, I can only think of one occasion when the same thing happen to me; it was caused by wrong syntax of the changes I was performing.

  12. Bridget says:

    Hey, genius, i nean it… I am stuck to finish my site by 2 stupid things/
    the plugin contact m does not work it is floating aorund the site.
    Cant get the RSS to wrok
    Could help?

    I would so aprreciate.
    i think i have to go in to the php file contact page, but no quid about php!!!
    thanks

  13. Jan Zaškolný says:

    It is great that one can easily edit his theme. But when I update to new version of WordPress, everything goes to hell, every amend is lost. I have been searching for solution for the whole evening, but it looks like I am the only one who really edits something and have this issue. :(

    1. Ayaz Malik says:

      Hello Jan,
      When wodpress upates, all its core files and database core tables are replaced with a new copy due to which your changes are lost. for that there are filters available for every possible need. You can put those filters in your functions.php of your theme and your changes will not disappear with the upgrade of wordpress. google a little about wordpress filters regarding your query and you will find it helpful im sure :)
      cheers
      Ayaz

Comments are closed.

Copyrights © 2014 - Designzzz. All Rights Reserved