Although there is a built in theme editor in WordPress, I tend tuse Programmer’s notepad to make all but the quickest of edits to my WordPress files. Programmer’s Notepad is a free editor which is easy to use. It has the ability to use search, line counting, and word wrapping. To use Programmer’s Notepad, download the free version and Install. Then using Filezilla or another FTP program, before you begin editing any theme files, make a back-up of your complete website theme file directory by downloading the files to a specific back up folder on your computer. Then make a working file and copy a specific file that you would like to edit, to that file. [Read more…]
When I first started working with WordPress, the version I was using did not come with a built in mechanism to upload new themes and plugins to WordPress, whereas now that process for uploads and updates is fully automated. Although I knew what FTP was, I did not know how to FTP a file from my computer to my site on my web host.
Finally someone said, “Just use Filezilla”. Bingo, problem solved. FileZilla is a free FTP ( File Transfer Protocol) program, which allows you to upload or download files from your computer to your web hosting account.
Though you won’t have to use it for updates or upgrades, there are times when Filezilla comes in handy for changing out a file in a theme or uploading an image for a header. Here is how to use it.
How I got into the WordPress Business:
I got into building WordPress websites five years ago when I put the name of my loft development business into Google and what came up was my dogs blog on Dogster.
I asked people about it and they said it was because Dogster was a blog. I thought “Whoa, I have to learn how to do those sites”, and I set about it. I went to the bookstore and perused the computer section and found a pink book that I grabbed called the It Girls Guide to Blogging With Moxie. This was a great marketing job to have a pink computer book. It worked on me and it was actually pretty good and it steered me towards self hosted WordPress. I started a site called Blog By Knight and I started blogging.
Over the years I have learned a lot. I made a bunch of mistakes and there were some things that I really needed some hand holding on and it was tough to find anyone five years ago to help me. At that time, I could have used some basic tips for graphic designers customizing WordPress themes! But, I persevered and by hook or by crook ended up doing this for a living!
Recently, I was in the bookstore buying a copy of WordPress for Dummies by Lisa Sabine Wilson, for one of my clients. I met a guy who was sitting on the floor with a stack of web design programming books next to him. I asked him what was up with the five inch PHP book and he told me he was the art director for a local department store that his dept was being dismantled and he had to get some new skills, I felt really bad for him that he was going about it that way and suggested that maybe there was an easier way and flashed the Dummies book his way.
People with some design background but without a programming background can really get started customizing WordPress sites on their own with a couple of books, Google and if you want to speed up the learning curve, a seminar or two.
So here are some highlights of things I wish I knew earlier in my learning process.
Cool Tip #1: Install Many WordPress Sites on one hosting account.
Little know fact. You can install many installations of WordPress on subdirectories off of one domain name. So when you are learning or you need a test site for a clients site till it goes live, you can go in and add another installation of WordPress with Simple Scripts. Just name the /name it something and then install on that subdirectory.
Cool Tip #2: You Must know how to Transfer Files from your computer to the server. One word: Filezilla . One of the things I didn’t know how to do when I started was HOW to FTP a file from the desktop to the server. This is important when customizing WordPress Sites. Let me just say that the free Fileszilla program is my good friend. A very simple Tutorial which includes the download links is at: http://www.w3hub.org/doc/filezilla/.
Cool Tip #3: Firebug You can examine every bit of the code of a website and basically deconstruct it. You can check out a 6 minute video Kristarella put together on using Firebug to look under the WordPress hood. http://www.kristarella.com/2009/02/how-to-use-firebug-for-css/
Cool Tip #4: WordPress is not just for blogs. You can create complete websites with the WordPress Software.
WP sites can have Static Front pages just like any brochure style website. Or, they can have Blog style front pages with some static pages such as About, Services and Contact but everything else can be categorized and tagged and look like it is a page but is really a Post and comes up on the blog page or by selecting a category then it comes up in its Category Archive page.
Cool Tip #5 : WordPress is open source which means lots of people work on the further development of the program ( which is free) and lots of people develop add-on goodies to work with it like plugins and themes.
Plugins are bits of code that extend WordPress functionality in some way. Some plugins do things like site wide like prevent spam on comments. Some increase search engine optimization and some create widgets which are doodads for the sidebars. Say I wanted to do a Triathlon site and have a blurb that said “Countdown the Days to the Event”. I would not have to write code for this. I would simply Google ” Date countdown WordPress plugin and find five of them. upload, activate, set the parameters and drag it into position on the sidebar. Cool and easy.
Themes in WordPress are amazing. There must be thousands. Some are good -some not so great. Secret time. I have never built a site from scratch. I was sitting next to Matt Mullenweg at a conference and told him that and he said he wondered why anyone bothered building them from scratch since there were so many to start from. I like to think of it like there are lots of houses already built and rather than start from scratch building a custom house why not use one of the free or low cost houses that are already built and then customize that. This saves a lot of time and saves the client a lot of money. The other thing is the house is built and has been tested and so you can pretty sure with some themes that the windows will not leak and the house won’t fall over.
Very Basic Under the Hood
Graphic Designers need to know whats under the WordPress hood before becoming proficient in customizing WordPress themes on their own. You have access to the regular theme files from your WordPress Dashboard. Go to Appearance and then select Editor. The various theme files will be there. A few other files you will need are not located though the dashboard, for example the theme Image files, you would have to see by going to the server. I recommend that you get some orientation through the WordPress Codex, a book or a class to understand how to find and manipulate these files safely. Trial and Error is a painful way to do it. I completely botched one of my sites when I was learning and didn’t know how to move the files. Thankfully, a WordPress angel put it back together again.
How I go about designing a site.
- I sketch out the design. One column. Magazine Style, Header, Footer, Static round corners, hand drawn elements, etc…. I don’t get too precise.
- I will find a theme that has the “bones” that I am looking for.
- I will get about five posts in different categories, about page info and photos, and some front page content. If you don’t have this your site will not look good. And it is only as good as the content. You can see a really plain site sings with great graphics and images.
- If the theme has design options, I set them up to get the site to look as close as I can to what I want through the Options section.
- If there are no design options, I look at the site in Firebug and see where the elements I want to change are located.
- If it is a site for a traditional business like an attorney or someone who wants a very plain site, then I will most likely use Thesis Theme. If it is something for an Indie-Crafter, I might find some other theme that already had the divs broken out with hand drawn images for the containers that can be redrawn. An example is, On the Go by Elegant Themes.
- I like using my favorite basic themes or premium themes where either I know the developer, or know of the developer. Sometimes you find bad code or code that misbehaves and if that happens after you have spent a lot of time getting it just right you want to kill. Some developers offer support and others let you fend for yourself.
- Another cool thing to know about when designing is the Plugin WP-Cufon . This plugin allows you to be able to use other fonts than the 13 web safe fonts. Here is an article that compares the three different methods. http://thinkclay.com/technology/cufon-sifr-flir
- I usually inspect the files using the Images button of the Firefox web developer tools> I can see if the background is one large image or is tiling or repeating and I can see how big it is. I then go to the theme image files using Filezilla and I download all of the images used to a working file in my client’s folder on my computer. I take a look at them and then may start changing them in Photoshop to work for the site that I have mocked up for my client. When you are first starting out, try and stay pretty true to the general sizes and positions of the existing divs and sizes of the images. Later, as your hacking leads to understanding about how things work, you can color outside the lines.
- I upload, activate and setup the plugins, widgets, forms and galleries that give the necessary functionality that my clients site needs.
- I test the site in Firefox, Safari, Internet Explorer and I-phone.
- Below you will find some easy examples of theme customizations, starting with two premium themes.
Customizing Press 75’s Urban Elements Theme
This is the theme from Press 75 that I started with to do Global Girl’s blog. I had looked for a theme that had a large background image that stayed stationary and also had rounded corners to go with the cartoonish logo: Urban Elements Theme . You can see how I changed just a few things, but the graphics are all different. A bit like playing paper dolls. This client was my daughter and after I had the graphics done, only took a couple of hours to put together. (Urban Elements is no longer available from Press 75.)
I then had a client whose site went down and I had to build another one quickly, so I used Urban Elements. He loves it. Check out Mirar Salon
Customizing Chris Pearson’s Thesis Theme
I often use Thesis Theme which is a premium theme by Chris Pearson. It goes together very quickly and has great support and lots of tutorials on thesis hacks by its large user base. I have learned a lot about theme customization and how to use child themes on any theme, by getting my feet wet with Thesis. Clients love thesis since it has a lot easy to use options and it never breaks. Here are just a few of our Thesis creations.
I hope this post had a few helpful tidbits and whet your appetite for more. Just don’t be afraid to dive in and start playing with themes. And for those with Photo Shop skills, if you and want to be a graphic designer customizing WordPress themes for your clients rather than sending your design over to someone else in order to create the site, then double your income by learning to customize themes yourself. New Tricks offers coaching where the designer, gets a web design client and pays us the fee to coach the designer to create the site for their client. Win Win Win. Drop me a line if you are interested.