How to Install and Set-Up AgentPress Theme

How to Install and Set Up AgentPress ThemeAgentPress is a child theme of  the StudioPress Genesis Framework. It is a solid choice for a theme for a real estate website as well as when you need a site to display a variety of types of directory listings. Below is an explanation of child theme, directory sites, and a tutorial on how to install and set-up AgentPress theme.

Benefits of Using Child Themes

To use AgentPress, you upload the theme to your theme folder and activate it, but before it will work [Read more...]

How to Use Firebug – Customize .css in WordPress

Want to learn how to use Firebug for Firefox?

How to Use Firebug   Customize .css in WordPressIf you want to edit .css you should learn how to use Firebug. Firebug is a free open source Firefox add-on that is an essential tool  for anyone wanting to customize a WordPress theme.  It allows you to find the exact place in the .css code that has to be changed for a particular issue. With firebug, you can identify the precise location of whatever you intend to change and it even allows you to do and view the changes in real-time. Unfortunately, you cannot make a permanent change in Firebug but you can copy the code and go change it in your text editor like Programmers Notepad. Oh, and be sure to add the addon to Firebug, called Firepicker which makes it easier to actually pick a hex color and see the change right there.

Watch the Firebug tutorial below to learn how to use Firebug.
This tutorial shows you how install Firebug and preview edits to .css  (cascading style sheets).

How to Install and Use Firebug for Firefox (preview edits to .css) from Judi Knight on Vimeo.

How to Choose a WordPress Theme: Oh My! There Are So Many!

I did this presentation at both  WordCamp Birmingham and WordCamp Atlanta. I have included the video and the slides below. What are your favorite ways to choose a theme?

View the Slideshow:

 

How to Use Thesis Theme to Customize Your Website

How to Use Thesis Theme to Customize Your WebsiteIn this post, I am going to walk you through making some of the customizations that we used to create the Isvari Yoga site with Thesis Theme for WordPress. So here we go…

  1. First you will have to purchase Thesis from DIYthemes. It is available for 87.00 for a single site and 164.00 for a developers license. There is a thirty day money back guarantee if you really can’t use it.
  2. Download the Thesis theme from DIYthemes site to your desktop and unzip the folders.
  3. Using an FTP program like Filezilla, you will need to upload the theme to your WordPress installation. You put it in the “Theme” folder that is you will find located in the “wp-contents” folder for your site.
  4. While in your FTP program, you have once important thing to do in order to take advantage of all the controls that Thesis offers. Since this is a new installation of Thesis, you need to change the name of your custom-sample folder to custom. (If you have been using Thesis and Upgrade you would not do this step or you would overwrite your customizations).
  5. Now you are ready to Login to your WordPress site and Go to the dashboard to Appearance . Under Appearance, you will find, “Themes” and Thesis should be one of the choices on the page and you can activate Thesis now. [Read more...]

Using the Genesis Theme Framework to Build WordPress Sites

Using the Genesis Theme Framework to Build WordPress SitesGenesis is the parent theme of a Theme Framework by Studio Press that comes with a boatload of child themes. Wondering what the heck is a Theme Framework and how does it differ from a regular WordPRess theme? I just happen to have a post on that exact subject which you may want to check out first. I also have a couple of posts on other theme frameworks such as Thesis Theme.

The Genesis theme’s child themes,  were based upon the theme files of the Genesis Parent theme. The child themes are available from StudioPress to purchase and are ready to use as is or to customize and make Grandchildren theme designs.

When you use a Genesis Child theme you must upload both the parent, Genesis and the child theme to the wp-content/theme folder though FTP. You then must activate only the child theme. As long as the parent is in the wp-content/theme folder it will be ready for you to start working with it. Once the theme is active you can go to the theme options and select the options that you will need. [Read more...]

What the Heck Are WordPress Theme Frameworks?

The buzz around the WordPress Meetup Groups no longer is which theme should I use but rather, which theme framework is the “best” to use to learn to develop WordPress sites. But before we can even get into that, lets answer the question, “What exactly is a “framework”?

What the heck does that mean?  The official WordPress Codex definition  is “a theme that is designed to be a flexible foundation that can serve as a parent theme for building child themes.” [Read more...]

How to Build an Elegant Photography Website That Sells

Creating  photography websites is easy for the designer and the end user if you build it using WordPress. With a photographer or an artist who is constantly creating new work, it is very important that they be able to add their new pieces and update their photography website themselves.  Too often they have someone build a static website for them and are left with a site that they cannot update themselves. Even if they got the site for free this is no bargain when they have to pay a web designer  $50 to $100.00  a pop to go in and add new work.  Now, there is technology  such as WordPress that allows an end user to go in and add photos and write content as easily as adding a post to Facebook or writing an e-mail.

WordPress is open source, so that means it is a free and the code is available to developers and designers to extend its functionality with  plugins and themes. You can certainly have a custom theme developed but [Read more...]

Get Creative With Aviary -The Free Google Apps Graphics Suite

Many of you are designers who have access to the entire Adobe Creative Suite that includes Photoshop to manage and manipulate graphic images.  But non-graphic designers who have been at a real disadvantage when they want to make even quick tweaks to images. Now, using Aviary,  you non-graphic design folks can work on or create a new  graphic or even an audio file!

Get Creative With Aviary  The Free Google Apps Graphics Suite

reigndeer.egg by betsapp91 on Aviary

I have been using Aviary for a couple of years to take quick screenshots of websites or images from the web.  I noticed recently that they are now affiliated with Google Apps and the entire web-based software is totally free!  This powerful suite of design tools includes such apps as an: [Read more...]

Nine Posts You Need When Learning to Customize WordPress Themes

Back when I got into WordPress, I learned the hard, slow way to customize my WordPress sites. There just weren’t as many resources as there are today and the program was not as evolved as it is now.  Back then, you had to know how to FTP files to WordPress rather than uploading themes and plugins through the admin as you can do now.  For the life of me, I couldn’t figure out how to FTP a file to my WordPress Installation. I rejoiced when someone finally told me to do it with Filezilla.  Yup, I learned the slow painful way. At the time I was just working on my own sites and if I couldn’t figure out how to do something,  I would just skip that idea and do it another way. And there are still plenty of ways to get to the same result with WordPress, which makes it a really fun development platform.

To save others from my frustrations, I thought I would pull together some of my posts that may fill in some gaps for you and get you further down the road to beginning to customize WordPress themes. Graphic designers  especially should learn to modify existing WordPress themes and create customized sites for their clients. Most small business clients these days would rather have their site built from a theme customized by a designer than to pay the price of a designer to design a site psd file and then pay a developer to code it. [Read more...]

Thesis Theme Customizations From New Tricks

Customizing WordPress With Chris Pearson’s Thesis Theme

I often use Thesis Theme for WordPress which is a premium theme by DIY Themes. Thesis comes rather plain vanilla out of the box but comes with a great theme options admin panel which makes putting a site together go very quickly. Thesis is regularly updated and it has been tested to the hilt. Because so many people use this theme as the bones for their site, there are a lot of tutorials and thesis hacks out there,  just a quick Google Search away. Graphic designer’s  like to use it because it is somewhat of a blank slate.  But a lot of folks use it as is, right out of the gate.  Clients love this theme since it has a lot easy to use options and it never breaks. Here are  just a few of our  New Tricks website customizations using Thesis Theme. [Read more...]

Newbies Guide to Customizing WordPress Themes

These are the slides from my presentation at The Atlanta WordPress Users Meetup Group on August 19th. The format and content of the presentation goes like this: [Read more...]

Using Programmer’s Notepad to Edit WordPress Files

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

Uploading WordPress Themes and Plugins through FTP with Filezilla

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.

[Read more...]

Tips for Graphic Designers Customizing WordPress Themes

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.

Tips for Graphic Designers Customizing WordPress Themes

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 Tips

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.

  1. I sketch out the design. One column. Magazine Style, Header, Footer,  Static round corners, hand drawn elements, etc…. I don’t get too precise.
  2. I will find a theme that has the “bones” that I am looking for.
  3. 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.
  4. 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.
  5. If there are no design options, I look at the site in Firebug and see where the elements I want to change are located.
  6. 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.
  7. 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.
  8. 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
  9. 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.
  10. I  upload, activate and setup the plugins, widgets, forms and galleries that give the necessary functionality that my clients site needs.
  11. I test the site in Firefox, Safari, Internet Explorer and I-phone.
  12. 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.

Margo Geller

Atlanta Nutrition

Urban Oasis Bed and Breakfast

Gerogia State Inspections

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.

Sign up for the Free Video Training Series, Getting Started wIth WordPress
Join Us!