Tag Archives: Themes

Designing Custom WordPress Theme Based on an Existing Website

Leave a reply
 

When I decided to implement a blog for BZTech Solutions, I knew that it would be WordPress and I knew that i wanted to incorporate the blog as part of my website's look and feel. I did not know how hard or how easy it would be, however. As I wrote earlier, after I installed WordPress and set it up after viewing the Lynda.com course on installing WordPress, I took a look at Theme Matcher as a potential answer to creating my own custom theme. Instead, I chose to take one of the default WordPress themes, Twenty Twelve, and customize it based on the CSS styling and HTML structure of my website.

I began by replacing the header and footer with my own header and footer. Then I bulk imported chunks of my own CSS and put it in the style.css file. Some things worked and many more did not. I made heavy use of Firebug and Firefox to determine where style were being overridden and implemented adjustments. Finally, I took the correct approach and viewed a course on Lynda.com for creating custom WordPress themes and then deconstructed the Twenty Twelve theme and correctly modified it to create the bztechtheme. Through this process, I gained a better understanding of how the various php files in the theme worked.

I am satisfied with my new bztechtheme, but I doubt that I am finished with tweaking the theme to meet my expectations. The whole process has been enjoyable and highly educational and I recommend it to anyone who seeks to create a custom theme based on their current website design.

 

Theme Matcher – Interesting Idea for Site Branded WordPress Blogs

Leave a reply

Theme matcher first dialog A few days ago when I began setting up the BZTech Blog, I began looking for an easier way to customize the blog so that it matched with the rest of BZTech Solutions’ website. One very interesting website that I came across was Theme Matcher. The gist of the site is that you type in your URL and Theme Matcher picks up your website header, navigation, page layout and footer and creates a WordPress theme on the fly for you to download.

When you first enter in your URL, a prompt comes up that presents you with an instructional video to watch that demonstrates how you make a couple of simple selections for your page layout. The first is your article column (if you have a multi-column page layout). Then you can select your sidebar area where all the WordPress widget items will be located. After watching the video, you then make the appropriate selections.

It took me a couple of attempts to make both of my selections. I started with my browser full screen on my 27″ Apple Thunderbolt Display. After resizing my browser so that it was a little smaller, the process seemed to work better. Finally, after selecting both my article area and my sidebar area, I was presented with sample blog content and layout. I was able to view the index of current articles, archive articles, articles by category, etc. The layout was not perfect, but it came pretty close and I imagine that with some CSS tweaks, I would be able to perfect it to my liking.

Once you see the sample design, you are presented with a download theme button and then the option to select between three options and pricing plans. The least expensive plan is close to $50 and allows for you to make two additional theme changes later on. The more expensive plans extend those options.

In the end, I chose to bite the bullet and design my own theme based on the WordPress twentytwelve theme, which was the right decision for me. That forced me to gain a better understanding of the WordPress them modular design. The Theme Matcher option, however, is a potential option for the non-designer or designer who needs to create a base theme quickly and expand upon it later.