High FX Media, Inc. » Watch Me Create a WordPress Theme

Finishing the Theme

Kurt @ HFXM — Sun, 13 Dec 2009 01:08:24 +0000

I finally had a chance to get back to working on the practice theme. Yeah, I’m just practicing with this one as I want to create one that I like better. Maybe someone will actually want to use the one I create. Who knows. Anyway, I discovered some problems as follows:

I decided I had to start over with the WordPress code & use what was provided on ThemeTation.com. Otherwise, the code wouldn’t match the theme.
The author forgot the DOCTYPE and head information in the header file.
The author didn’t show users how to create a theme name in the style.css file.
There were no instructions on how to put the style.css file together, upload all the files and make it all work.
The author didn’t include a link to home in the navigation.
The author included comments in many of his files using the wrong comment tags which caused the comments to appear on the site.
I had to make a number of CSS mod’s to make the theme display correctly.
The finished theme code provided by the author is different than what’s provided in the tutorial!
The author forgot to include the header.php in single.php, page.php and other pages.
The author had the div’s messed up causing the sidebar to appear at the bottom of pages & posts.
There was no 404 error page.
The content container (div) overlaps the header.
There was no sidebar on the search results page.
I added a pointer for the “Go” button on the search bar.

Well, I guess that’s about it. I learned a lot from going through this process. Most importantly, writing my own code for a theme would be a challenge as I’m not a PHP coder. I can use the standard WordPress files and modify them for a useful theme. Creating the graphics wasn’t too hard but I’m sure it will be more of a challenge to do it on my own. Slicing and dicing the graphics was a bit of a challenge. Writing a complete stylesheet will be a challenge. But, you don’t learn anything by copying and pasting. Get busy!

You can check out the finished theme here: High FX Test.com. I’ll leave the theme up for a while. Sometime in the near future I’ll get started on my own theme.

Oh yeah, I forgot to mention that you shouldn’t use a photo of yourself for testing. You’ll get tired of seeing your ugly mug all over the place!

Creating the WordPress Theme Graphics – Day 3

Kurt @ HFXM — Sat, 05 Dec 2009 00:09:43 +0000

Well, I finally had time to slice and dice the theme graphics. Not having done this before, I struggled with it a bit. I’m not sure I could explain it well but I was able to get what I needed. The author at ThemeTation.com posted a video on slicing graphics. I didn’t realize that it was grainy and had no sound until I tried to watch it. It was of no value so if you’re not comfortable with a tool like Photoshop you’ll need to look elsewhere for help. I had trouble slicing and saving the graphics so I think I’ll practice a bit, look around for some more help and then post a video on slicing and saving graphics from Photoshop CS3. Anyway, here are the sliced graphics I created for this project:

about.jpg

comments.jpg

featured.jpg

footer.jpg

form.jpg

header.jpg

logo.jpg

photo-sample.jpg

readmore.jpg

respond.jpg

rss.jpg

search.jpg

searchfrom.jpg

Most web graphics are saved in png or gif format. That’s one of the problems I encountered. Photoshop defaulted to jpg and I had a bit of difficulty saving every slice in png format. I’ll go back and do it before uploading the images to my test site. Also, the author used two images that weren’t included in the design phase. I’ll use his for the test site.

Here’s the home page layout again:

Creating the WordPress Theme Graphics – Day 2

Kurt @ HFXM — Fri, 27 Nov 2009 21:15:57 +0000

I made further progress today. In fact, I’ve completed the tutorial and have posted images of the home page and a single page below. Creating the graphics and layout is very detailed. You have to get down to the pixel level when positioning some of the elements. If you’re not detail oriented, this isn’t for you. My design is just a bit different than the authors. Some of the color hex codes weren’t provided so I guessed. I didn’t have an icon for the search bar so I used a “Go” button instead. My header and footer are taller also. Anyway, I’m going through this process to better understand the design aspects of WordPress theme design. Next up – slicing the Photoshop file for use in the CSS.

Home page layout:

Single page layout:

Creating the WordPress Theme Graphics – Day 1

Kurt @ HFXM — Thu, 26 Nov 2009 16:32:41 +0000

I spent some time yesterday creating the graphics for my theme. Below is an image of the Photoshop layout so far. The author at Themation.com made some errors in the instructions and left out details about the navigation and some other elements. I decided to follow the author’s design as she provided it, even though I don’t like the design that much. It should be a good lesson in the necessary steps in creating graphics for a theme. I’ll create my own design after completing the author’s design. Here’s an image of the progress I’ve made:

Creating the WordPress Code – Day 2

Kurt @ HFXM — Tue, 24 Nov 2009 00:34:41 +0000

Here’s what I accomplished today:

completed the comments, search & page templates tutorial
completed the archive, author, category & tags templates tutorial; again the author of the post didn’t explain some modifications to files
completed the sidebar template
uploaded all files & tested OK except nothing in sidebars w/o putting a widget in manually; should be populated by default
downloaded all author code files; ran diff-merger to compare; found some differences; mostly not covered/explained by author; some significant; not seeing default sidebar widgets;
completed the CSS tutorial & made minor mod’s for eye appeal
compared my files, using DiffMerge, to the author’s Google files; found some differnces but not too many

Finishing the code was straight forward except for the sidebar. The author provided different code on his web page then what is in the finished code on Google. You may want to read some of the comments at the bottom of the sidebar page. You can see what the site looks like here: HighFXTest.com. The author provided 6 CSS style sheets that allow you to have a 1, 2 or 3 column site. The sidebars can be on the left, right or bottom. The sidebar is widgetized also. You can see it’s a basic blog style site witout any graphics or much styling.

On to the graphics and styling!

Creating the WordPress Code – Day 1

Kurt @ HFXM — Sat, 21 Nov 2009 23:36:18 +0000

Here’s what I accomplished:

reviewed the intro on ThemeShaper.com
reviewed the theme development checklist & data
reviewed the recommended tools on ThemeShaper.com
reviewed creating an HTML structure on ThemeShaper.com
downloaded all of the sample content and imported it to HighFXTest.com
verified data based on checklist with some problems
no red “more” link, even when I added a “more” tag
embedded videos not displayed
page with comments didn’t display any comments; comments allowed
I wasn’t sure what was being tested in some of the examples, like the GMT post
changing the theme to WP Classic 1.5 resolved some of the problems
successfully embedded a video using a new embed code
sandbox sample data – verified working
images not in correct location so no images; broken links
wpcandy sample data – added without problem
self conclusion sample data – added without problem
completed the template and directory structure tutorial
completed the header template tutorial
completed the index template tutorial
completed the single, attatchment & 404 templates tutorial

Adding four sets of test data was a bit overkill in my opinion. After adding the first, the other three didn’t add that much new that had to be verified. The first set of data is quite comprehensive.

I was frustrated as the author didn’t include some code & didn’t explain some of the code. I followed his instructions exactly, but couldn’t get the content to show. Later, I found his Google code and realized the author skipped details. You can see the results of my efforts at: HighFXTest.com. I’m not finished with the code yet and there’s no CSS or graphics applied. It’s pretty ugly at this point but it’s a functioning WordPress site.

Stay tuned!

WordPress Theme Creation Research

Kurt @ HFXM — Fri, 20 Nov 2009 15:36:58 +0000

How long will I keep at this project? I better complete it, even if the theme isn’t that great. I know, you’re watching me. I’ll keep at it.

Anyway, I did some research looking for some sites providing step-by-step WordPress theme design. Here are the sites I’ll be using for this project:

WordPress code: ThemeShaper.com, WPDesiger.com

Graphic design: ThemeTation.com, DesignReviver.com

I was really impressed with the quality of the step-by-step instructtions provided on these sites. If you/re interested in creating a theme, even just for the fun of it, check out these sites.

I’m estimating the coding will take 7 – 10 days. So let’s get started with the coding!

P.S., Oh, yeah. I do have a life so I won’t be spending 8 hours a day on this project. That’s why it may take 10 days to get the code, modify it for my needs and test it

Kurt Creates a WordPress Theme

Kurt @ HFXM — Thu, 19 Nov 2009 22:24:06 +0000

I’ve decided to create a WordPress template because I find that most themes emphasize posts. I guess this is to be expected since WordPress was created as a blogging tool. However, the sites I work on emphasize pages. Most small businesses don’t have the time or inclination to write blog posts on a daily or even weekly basis. Even after explaining that regular posts create interest in their site and their products, they just don’t have the time. Yup, even after explaining that posting regularly will increase their ranking in search engines they say they don’t have time. The customer is always right!

My theme will emphasize pages so it should be good for business sites. Some people would call it WordPress as CMS but that’s really not accurate. WordPress is a CMS whether used as a blog or a page-based site. Emphasizing pages doesn’t make it a CMS. Anyway, I’d like to incorporate several page designs so users can select a style, add their code and add a page quickly.

Here’s a general outline of the steps I’ll need to follow:

Find a good site that steps through the code development
Find a good site that steps through the graphic design phase
Generate the code for my theme
Create the graphics in Photoshop
Slice and dice the graphics
Incorporate the graphics into the theme
Create the CSS for the theme
Get some icons & incorporate them into the theme
Test the theme – hmmmmm… who will be my testers?
License it as free software (GNU?)
Make the theme available for download
Set up a support mechanism/site/forum

Well, there you have it. My general plan. My commitment to create a WordPress theme. I’ll post content- both written and video – as I go. It should be interesting to see the result.

Stay tuned!