Hello and welcome to this advanced tutorial that is aimed at one main thing, how to sell WordPress Themes. In this tutorial I will cover various topics such as testing, presentation, previews, documentation, promoting and lots more! So sit back and enjoy the ride, as by the end of this, hopefully you will learn a few key lessons in gaining those extra sales!

So, you’ve just finished writing your last piece of code, and you tell yourself “I want to sell this, now!”. However there are a few things you must do before even getting to the upload stage, which we shall go through now.

Compatibility

Before you do anything else, top of your priority should always be Compatibility. Here’s a list of what you should test:

  • Browsers
  • Resolutions (Screen Sizes)
  • Web Fonts
  • Theme Check

Let’s elaborate on these four crucial key testing ideas.

Browsers

You should always download all of the main browsers onto your computer. Then simply open up your theme in each and every one. Make sure that everything is displayed the way it should and that everything works the way it should, even if the tiniest detail such as a font has rendered differently then you should always change either the font or the specific styling for that browser. This will make your theme more professional if everyone sees the same as everyone else.

Resolutions

Believe it or not, websites do indeed display differently to your screen size. Make sure you have a wrapper around all of your content so that it stays in the same position. A good way to do this would be to create a div that would start just after your <body> tag and end just before your </body> tag. So for example:

001 &lt;body&gt;
002
003 &lt;div id="wrapper"&gt;
004
005 &lt;/div&gt;
006
007 &lt;/body&gt;

Then in your css code, you would want to display this code so that all of your content is displayed in the center at all times, whatever the screen size.

001 #wrapper {
002
003 width:960px; /*Or whatever the width you want your website to be*/
004
005 margin:auto;
006
007 }

That’s just one of the many ways to make sure that your website displays it’s layout properly in different screen sizes. A good way to test this would be to either jump onto another computer with a different screen size, ask a friend with a different screen size to view your website, or simply drag the browser window narrower to create a smaller viewing area.

Web Fonts

Be sure that all of your fonts that you have used are either web safe or have come from a system such as Google Fonts or Cufón. The Main reason for this is because many people believe that one can use whatever font they like when creating a website. However the average user will not install extra fonts in their spare time. Therefore they will not have the same font needed to view the website in a substantially better experience. That’s where web safe fonts come into it. These are fonts that work on nearly all systems, Mac, Windows, Linux etc… You can find a full list of web safe fonts here.

Alternatively if you want a more exciting experience you can use Google Fonts and Cufón as mentioned above, which transform your desired font into a web font.

Futhermore check that in every browser and other computers (if you can) that your desired fonts render exactly the same as they should. For example in Firefox the Yanone Kaffeesatz font renders brilliantly, whereas in Google Chrome, it is seen as more thin and does not look as great.

Theme Check

Now, Theme Check is an absolutely brilliant plugin for WordPress that I would recommend every WordPress Web Designer to use. Once you have activated it, you can go to it’s panel and run literally a theme check on your theme. Once the test has finished it will come up with advice to improve your theme, what your theme is missing and also friendly warnings that may come of use. It is constantly updated, so every now and then you can just run a theme check and see what you need and what you can improve on. You can download the plugin here at the WordPress Plugin library.

PLEASE NOTE: When selling with MOJO-Themes.com, your theme must pass the Theme Check plugin and they also monitor deprecated calls.

Documentation

Next is to create your help file/documentation for your theme. These files should be in PDF Format so that nearly all Operating Systems can view the file. You should include in your documentation an FAQ (Frequently Asked Questions), A detailed tutorial of extracting and installing the theme onto a server and eventually activating it in the WordPress Admin Panel, An explanation of your menus and where they are in your theme, An explanation of your widgets and where they are displayed in your theme, An explanation of your shortcodes and what they output, An explanation of your theme options (if you have one) and finally an explanation of all the extra features you may have included in your theme.

Remember a detailed documentation will increase your chances of being approved and will also tell your customers that you are professional and don’t mess around. This may get your customers to buy even more of your products!

Live Preview

Now you should think about presenting your theme to customers who will want to see a preview of your theme. It is Compulsory that you include a live preview now-a-days. Customers want to see what it will look like for real, they want to see the real deal and how it works. So the best possible way to do this is to create a simple url such as

http://www.mysite.com/previews/wordpress/mythemename

and to upload the latest WordPress and to simply install your theme, and you are done!

Obviously if your theme comes with lots of different design options you should include one of the many jQuery plugins out there that act as a small options panel for customers on the demo screen. It could be a background color option change or even a layout change. Get creative, make your customers see everything that’s in store for them when they buy your theme, after all it is a demonstration of your theme!

Preview Images/Screenshots

After that you want to start creating your screenshots.zip for the uploading process. This is a zip file full of screenshots of every single page that you can possibly have with your theme. This will also act as a preview much like the live demo. Many people would think the easiest and best way would be to print screen and cut off some bits in photoshop. However that is probably the most time consuming and annoying process of doing this. I have recently found an amazing addon for Firefox, Google Chrome and Safari that lets you take a picture of the whole website even if some of it’s not in the view port. It will take a picture of everything on the website, and it wont show you anything else, none of the browser window or desktop, just the website! This addon is called Awesome Screenshot and you can find out more and download it here.

Once you have finished taking screenshots with your flashy new addon. You need to start creating thumbnails and a featured image for the upload process.

Thumbnail (130 x 78)

This is the wide thumbnail image that represents your screen. Now it has been seen many times before that it’s traditional to include the logo and the WordPress version, usually it also contains a snazzy background.

Small Thumbnail ( 69 x 69)

This is very similar to the larger thumbnail above, it’s also traditional to display the version of wordpress and of course the name/logo of your theme, as always another snazzy background.

Featured Preview Image ( 590 x 330)

Now this is the big featured image that is displayed on the item page. It is often seen with a list of features that are included in your theme, secondly it is also usually situated with a preview of the theme and the logo. Make sure that this has the same colors and design as your theme as this could confuse your visitors.

Theme Description

This is the crucial part in representing your theme, it’s your chance to speak good words about your theme, trying to promote it as well as you can. The only problem about this part is that not everyone will read your description, however the people who do, will expect a good description.

Therefore you need to work really hard to think of a decent description, use imaginative words, get creative. Don’t just leave one line with your slogan for the theme, this would show that you are unprofessional, and didn’t put much effort into it. Below there are some code snippets that could be used in your item description, remember get creative, and don’t be afraid to experiment!