Designs By Nick the Geek

Genesis Based WordPress Development and Tutorials for Everyone

Theme Customization Basic Skills

So, you have a nice new theme with tons of features, but you want to make changes so it will be uniquely yours. You are at a crossroad. Do you hire a developer or do you become a developer? There are risks and benefits for both. A skilled developer will know how to accomplish things you never thought possible, they will transform your site into what you want it to be, and it will happen much faster than your could do it yourself. A skilled developer is also an expensive option. Developer rates generally start at $50/hour and run up to $200/hour for this type of development, though some can charge more or less.

Quick Nav

This sends many into the “I can do this myself” camp. The most obvious benefit to developing the theme yourself is a potential savings of hundreds of dollars. This is certainly convincing, but be sure to consider the hidden costs. What is your time worth? If you plan on having a great looking and functioning site you will need to learn CSS, HTML, and enough PHP to understand how to alter the code you find. It is something you can learn, but jumping straight into the deep end isn’t advisable.

HTML

You will need to learn the basics of html or you won’t be able to follow the CSS tutorials or create links, insert images, or much else. I strongly recommend W3Schools.com as an incredible and free resource for learning HTML.

The most important concepts you will want to learn are:

  • Divs
  • Spans
  • Anchors (links)
  • Images
  • Headings
  • Paragraphs
  • Breaks
  • Lists

There are many other HTML elements, but if you can learn the ins and outs of these you will have a good foundation for moving forward.

CSS

Once you have a firm foundation in HTML you will want to understand how to make it look pretty. HTML without CSS is bland at best. CSS controls, size, color, background, layout, and pretty much every visual component of your site. Again, I recommend W3Schools.com. Not only do they have a basic explanation of every aspect of CSS, including some non standard uses that you have to dig for, they include a “try it yourself” feature that lets you change the CSS properties/values to see how it works.

There is a LOT to learn about CSS before you are a black belt, but if you can get the basics down you can go back to W3Schools for additional details as you go. Be sure to learn:

  • The Box Model
  • Backgrounds
  • Color
  • Fonts
  • Padding
  • Border
  • Margin
  • Floats

Again, there is a LOT more to CSS than that, but if you are proficient in these concepts, you can search for the rest of the answers pretty easily.

PHP

This is the single most difficult thing you will need to learn. PHP is about logic construction. It is unlikely you will need to learn enough PHP to actually create anything, but you will need to learn enough to alter the code you find in tutorials, and this means understanding what is happening. You can learn many of these skills at W3Schools.com (seriously this is a great site).

You will want to have a pretty good grasp of these concepts:

  • Strings
  • Arrays
  • Comments
  • Variables
  • If…Else
  • Loops
  • Functions

If you can learn this then you should be able follow most of what the code is doing and how to adapt it to your unique needs.

Recommended Tools

Developers all have their preferred tools. Many use very expensive software to make their jobs easier. If you are trying to save money, you probably want software in the inexpensive to free range. Fortunately there are a lot of great tools available for little to nothing. in fact, every tool I will recommend here is free.

FTP

You really need to learn how to access your site via FTP. Even if you do most of your editing in the WordPress editor, you will need FTP in case you break the theme and can no longer access your site. A few good FTP programs include:

Code Editor

File editors fall into a couple of categories. At the most basic you have plain text editors. Pretty much all operating systems come with some kind of plain text editor such as “Notepad” for Windows. You can open any web document in one of these editors, and this may be all you need, however, there are extended text editors available that will markup your text, set tabs, and even check for errors. Some will even connect via FTP to automatically update your files. A few include:

Image Editor

Most folks are familiar with Adobe Photoshop. This is very expensive software, but you can get most of the features with Photoshop Elements. Still I said I would be recommending free programs, so if you are on a shoestring budget check out Gimp. This is a free image editor that can be extended via free scripts and plugins into a very powerful image editor to rival Photoshop. It can also open Photoshop (PSD) files. If you need to work with vector art you can use Inkscape which works with Illustrator files.

Additional Tools

There are two other very important tools you need.

FireBug for FireFox is a Developers best friend. It can help you identify which CSS definition is affecting a given element and lets you test changes to a live site, though you still need to add the changes to your stylesheet to make it a permanent change. It has a lot of built-in functions you are unlikely to need, but it’s great to have them if you ever need them. Safari and Chrome also have a built-in developer tool set you can use. It functions much like FireBug. IE doesn’t have anything at this time(edit) IE has also jumped on the developer tools bandwagon. It is not as advanced as Chrome or FireBug, but you can use FireBug Lite to access some of the features from FireBug should you need them.

Validator This is an online web resource that will validate your website for proper HTML. Many errors between browsers are not actually CSS related, but improper validation. Run your site through this validator and then resolve the errors.

After reading this, you may decide that spending countless hours learning HTML, CSS and programming, could be better spent creating your site’s content and that you would like to expedite your website’s launch. If so, it is worth the investment to hire a skilled developer from StudioPress’ Approved Designer list of great developers, many of which are also part of our Moderator team. You can find the two lists here and also here.

Related Posts

Comments

  1. Hi Nick. Thanks much for this post – especially for the resource links! As you might have seen on the StudioPress forum, I’m getting back into customizing themes and this is super helpful.

  2. HI Nick,

    Nice post you got here.

    By the way I can’t help but love the way you have placed your next, previous post as well as the related post. Are you using a specific plugin for that ? If so do you mind us tellling the specific plugin(s) that you are using?

    And if you customize that then if it is okay with you to give us the steps on how you did it.

    Again I checking your site often since I learned a lot from your site.

    • Alvin,

      Thanks. The code is full custom, and I’ll probably be writing a tutorial up on it. Several people have asked about getting my Related Posts code done as a plugin, so I’m looking into making a plugin that will add my related posts, the next/previous posts, and a related/trending posts widget. Though that is not likely to come out for a few months based on projects I’m working on right now, but the tutorial should be coming out sooner.

  3. If you ever want to make a separate related posts plugin, and need a tester, let me know! I’ve actively been looking for something that’s less SQL intensive than what I’m currently using on dragonpage.com and sliceofscifi.com and a couple other sites I manage (and will be designing!)

    • Now that Production and the Genesis Media Project is out there door this plugin is closer to the top of my list. I just changed themes, which meant I had to copy all of that over to the new theme. Not difficult because of the way I commented it and put the code together, but it would have been even easier if I just used a plugin to handle it.

  4. Hi Nick,
    Your advice is always right on.

    Question: In a Prose theme, how do you get this comments box to show up at the bottom of the most current post on the home page. Right now, all there is on the main page is a feeble “leave a comment” at the top of the post.

    By the time someone reads to the end, there’s no comment box to grab them.

    Thanks,
    Bart

    • Bart,

      Thanks for commenting. This is really better suited to the support forums rather than the comments on this post. Please start a thread there.

  5. Hey Nick,

    What is the actual way to start creating your own theme from scratch with the Genesis framework?

    Am I supposed to install the Sample Child theme and start from there?

    Thanks in advance!
    Sergio

    • I always start with the latest version of the Sample theme, then start pulling in components from other themes or writing my own components and change the CSS. That way I know I’m starting with the best CSS available at the time.

  6. When you use the Genesis theme are you able to resize the header image? I have added this line to my child theme CSS but it wont show the header image.

    background: url(images/header-gold-centered-forlogo.png) no-repeat;

    I know when you upload a header image using “Sample Child Theme 1.8” custome header it restricts you to 960x 100

    • You can, but you also need to edit the functions.php file to change the header size there. For more details please start a thread in the support forums.

  9. Nick,
    Thank you for your advice and tutorials.
    Two questions-
    1. I hate IE so wish to change anyway. Can’t decide on Chrome or Firefox but want/need something like firebug. This decision is purely to support my website building.
    2. W3Scools.com. 4-5 hours per day for a week or so. Will that give me enough time to grasp the basics? I’m pretty smart and have done some very basic html years back.

    Thanks again.
    Charles

    • Charles,

      I use to be a die hard FireFox man, but about a year and a half ago they switched to a rapid update cycle and I think this has really hurt things. They keep releasing broken stuff to fit an update schedule and some of the things they broke haven’t even been fixed many releases later. I’m so over FireFox. Chrome and Safari are my new “always open” browsers. I only open FireFox when I have to check things there.

      20-30 hours is enough time to learn basic HTML and CSS, but most importantly you should be able to learn how to quickly find the reference details you need while working on things. It takes years to be able to hand code HTML and CSS without looking values up. I’m pretty sharp and have been doing HTML and CSS for longer than I’d like to admit. I still find myself looking up some CSS rules and HTML attributes from time to time to make sure I’m doing it right.

  10. One last question before I order today, please.
    Prose theme-

    It is a minimalistic based theme but if I wanted to add some pages that had more of a magazine style to it with media widgets and so on could that slow it down or create additional issues?
    Don’t really want the hassle of building a site with lots of CSS/PHP
    Thanks,
    Charles

  11. Hi Nick,
    Found your blog from studiopress.com.
    I really need your help now. I used streamline theme too, but I don’t want to use its featured image before the post and homepage (645×250). How to do remove that? Because my site look really a mess.

    I hope you’re understand what I said. Sorry for my bad English.