How to Convert a Photoshop Wireframe to a WordPress Theme

WordPress Design Wordle graphicMany use Photoshop to create their WordPress wireframe as part of designing their WordPress site. Converting the Photoshop graphic to a WordPress Theme is fairly easy if you have some basic HTML, CSS, and web design familiarity.

Simply described, each core design element such as the header, background, and design details are segmented into graphics and then used as background images or direct images where appropriate on a WordPress frameworks, a WordPress Theme with the core design elements you need to flesh the site out with a strong stylesheet.

A Photoshop (PSD) Plugin, Divine, is very popular and available for a thirty day trial. Add it to Photoshop and it will automatically help you export the graphic elements for a WordPress site. Familiarity with WordPress functions, features, and Theme structures and styles are required to complete the process, but it does help with the export of the graphics for the Theme. It works with Windows XP, Vista, and 7. Currently, there are no free programs for the Mac, but some alternatives are available with free, limited trials. [NOTE: Since 2009, all marketing about the Divine Photoshop Plugin explicitly says it is “absolutely free.” I just learned it has a thirty day trial and then it is expensive to purchase. While it might seem to be the ideal thing to try, unless you are making a living as a web designer, it’s not worth the cost.]

In general, while the Divine Photoshop Plugin is helpful, you can generate the graphics yourself. For more information on how to take a wireframe Photoshop image and convert it to a WordPress Theme, try these resources.

How to Create a WordPress Theme Wireframe

WordPress Design Wordle graphicWireframes are website mockups, prototypes, layouts, and doodles. For many, wireframes begin with with pen and paper, others use sticky posts and crayons. More technically inclined folks turn to graphic and design software and web apps to layout the look and feel of a site for themselves or a client.

Wireframes are essential in the process of getting ideas down and the site design fleshed out. They are also critical for working with clients to ensure the designer/developer and the client are on the same page.

However you make your wireframes, make sure they are flexible and easily altered as your site evolves.

A Google search for WordPress and wireframe images turns up some excellent examples.

Here are some articles featuring wireframe tips and resources.

Testing Video Floats and Alignments

Alex Ferguson came up with a way to help us align videos with the text, floating them to the left or right of the post content area so the text will wrap around the video.


NOTE: This is not for the timid nor typical usage. This was an experiment and it works. To embed a YouTube (and most popular video services) video into your blog post, simply paste the URL into the post on its own line with a space above and below.


Let’s see if this works.

It does, but the technique is a little trickier than you might thing. Remember, this is for within a WordPress.com blog, thus we have to work around some of their limitations.

The code involves creating a DIV with the alignment class for left, right, or center, plus the WordPress.com Youtube shortcode with the width and possibly height set.

<div class="alignright">

</div>

In the link to the Youtube video you should see &w=400&h=450. This sets the width of the video to 400 pixels, narrower than the typical 500 or so, and the height to 350 pixels. Every Theme has a different column width so you will need to play around with these to get them the right size for your WordPress.com site.

This is what we call a “hack,” a way around the typical way of doing things. I recommend you save this in a reference text file so you can copy and paste in the video link next time you try this in a post.

Thanks, Alex, for experimenting with this!