How to publish your HTML or Wordpress website template on Themeforest?

A short guide for beginners on how to prepare and publish an HTML or Wordpress website template on Themeforest.

Published in

HackerNoon.com

9 min readJul 24, 2018

Themeforest is a great way to get passive income for a web developer and web designer. For the past 2 years, we have been gaining experience in a process of publishing and promoting templates which we are ready to share with you in this article.

The whole guide is divided into sections and is provided with examples for your convenience.

1. Publication process

1.1. Adding new template

First of all, you need to be logged in your account. Then, you should go to the «Author Dashboard» page.

Next, you should find «Upload an item» section and choose the template category in an appropriate dropdown menu (e.g. «PSD Templates», «Site Templates» or «WordPress»). After that just hit the «Next» button.

1.2. Adding template name & description

You should find «Name & Description» section on the template editing page to fill «Name» and «Description» text fields.

1.2.1. Title

The title of your template should be unique and contain name and short description. For example, «SUPER — Creative Agency PSD Template».

Note that each word in the name is written with a capital letter (except prepositions and conjunctions) and a dash is used as a divider between name and short description. Maximum name length is 100 symbols.

1.2.2. Key features

There are only 3 text fields available. The text placed here will be displayed on template card next to the «Preview Image» in the search results list.

You should place here key features of your template. For example, what type of grid is used, total amount of pages you designed, does your template has detailed docs and so on.

1.2.3. Description

To create description for your template we recommend using this amazing tool which allows you to see your text with markdown applied. The thing is that Themeforest has no built-in tools to edit your description with markdown.

Typical template description on Themeforest consist of eight blocks: «About Template», «Small Preview», «Files Included» (or «Pages Included»), «Fonts Used», «Icons Used», «Images Used», «Changelog» and «Notes».

A little bit more about each of them:

The «About Template» section describes key features and the scope of the template.
The «Small Preview» section consists of a long promotion image, which main purpose is to motivate customer for a purchase.
The «Files Included» (or «Pages Included») section represents a list of main files, which customer will get after purchase.
Sections «Fonts Used», «Icons Used» и «Images Used» are just lists of used fonts, icons and images.
The «Changelog» section displays all template versions and changes.
The «Notes» section is just a reminder for a customer. It says that all images in template are used for preview only and not included in the final purchasable pack.

Typical template description can look like this one:

<h3>About Template:</h3>
<p>Name — cool and fresh PSD template for lorem ipsum. The layout designed in Adobe Photoshop CC 2015 with a highly professional process to make it easy to use for redesign. Use of smart and vector objects allows to easily change the design according to your requirements. Placeholders will let you easily identify the image container and change an image version. Template files are based on Bootstrap 3 with 1170px grid.
</p>
<h3>Small Preview:</h3>
<img src="https://d13yacurqjgara.cloudfront.net/users/259982/screenshots/3036300/attachments/636816/dashboard.png">
<h3>Files included:</h3>
<ul>
  <li>00_SUPER_Styleguide.psd</li>
  <li>01_SUPER_Homepage.psd</li>
  <li>02_SUPER_Blog.psd</li>
  <li>03_SUPER_Post.psd</li>
  <li>04_SUPER_Services.psd</li>
  <li>05_SUPER_Item.psd</li>
  <li>06_SUPER_Gallery.psd</li>
  <li>07_SUPER_Contacts.psd</li>
  <li>Documentation.pdf</li>
</ul>
<h3>Fonts used:</h3>
<ul>
  <li><a href-"https://fonts.google.com/specimen/Montserrat">Montserrat</a></li>
</ul>
<h3>Images used:</h3>
<ul>
  <li><a href-"http://ru.depositphotos.com/home.html">DepositPhotos</a></li>
</ul>
<h3>Icons used:</h3>
<ul>
  <li><a href-"http://materialdesignicons.com/">Material Design Icons</a></li>
</ul>
<h3>Changelog:</h3>
<pre>
  Version 1.1 | 12-October-2017
  Added:  Small Styleguide
  Updated:  Preview Images and Texts     
  Version 1.0 | 21-September-2017
  Initial Release
</pre>
<h3>Notes:</h3>
<p><b>Note</b>: All images and icons are used for preview only and not included in the final purchase pack.</p>
<p>If you have any questions about customization, please contact me via e-mail or through my profile page. I’ll help you as soon as possible.</p>

Note that all texts should be written correctly without any mistakes. For that we recommend you to ask copywriter or marketer for help.

1.2.4. Graphic description

Template graphic description should be eye-catching to motivate customer for a purchase.

Such an image may include the most beautiful pages in a cool mockups, GIFs with animations of UI elements and so on. In short, here you can illustrate your template features.

Example of template graphical description (author: @swiftdesign)

It is important to divide your graphic description into pieces, because sometimes Themeforest loads such long images incorrectly.

The width of one piece of graphic image is usually 590 px or 616 px and the length is less than 2000 px.

👉 You can download our free PSD-template of graphic description here.

1.3. Adding template files

You should find «Files» section on the template editing page to fill «Thumbnail», «Theme Preview», «Main Files» и (optional) «WordPress Theme» fields.

1.3.1. Thumbnail image

«Thumbnail» is used to attract customer’s attention to your template in a recommended list. That’s why you should make it eye-catching.

Example of Thumbnail (author: @swiftdesign)

It can consist of two parts: a template logo and a category (e.g. Workshop).

Final «Thumbnail» should be saved as PNG in a size of 80x80 px and named as «Thumbnail.PNG».

👉You can download our free PSD-template of «Thumbnail» here.

1.3.2. Preview image

Main preview image («Preview») should be placed in a «Theme Preview» ZIP-archive.

Main preview image is used to attract customer’s attention to your template in the search results list. The customer decides based on this image whether to look at the template in more detail or not. That’s why you should make it more eye-catching.

We strongly recommend that you pay due attention to a «Preview», because it potentially can increase your template sales.

Example of Preview (author: @swiftdesign)

Typical preview image consists of four parts: a template logo, a category (e.g. Workshop), short list of key features (e.g. what type of grid did you use, total amount of pages you designed, does your template has detailed docs and so on) and a promo (e.g. some pages in cool mockup).

Final «Preview» should be saved as JPEG in a size of 590x300 px and named as «01_preview.JPEG». Preview image should be placed in a «Theme Preview» ZIP-archive.

👉You can download our free PSD-template of «Preview» here.

1.3.3. Theme Preview ZIP-archive

«Theme Preview» ZIP-archive is just an archive, which contains template preview images (screenshots) and main preview image («Preview»).

All preview images should be saved as PNG and named as shown below.

A maximum size of preview images is 900x900 px. Also, you should note that these images could be cropped to be displayed in search results list.

«Theme Preview» ZIP-archive structure should look like this:

1.3.4. Documentation

«Documentation» is a very important part of your template because Themeforest doesn’t approve any templates for sale without it.

In general, the documentation could be presented in any convenient format for you. It could be PDF, DOCX, TXT or even HTML files.

👉You can download our free DOCX-template of «Documentation» here.

1.3.5. Main Files ZIP-archive

Template files («Main Files») are the most important part of your template, because your customer will get these files after template purchase.

«Main Files» ZIP-archive is just an archive, which contains template files («Template» folder) and documentation («Documentation» folder).

For example, «Main Files» ZIP-archive structure for PSD-template should look like this:

In case of HTML-template, you should place project files in «Template» folder.

In case of Wordpress-template, you should rename ZIP-archive as «WordPress Theme».

In case of HTML-documentation, you should place all necessary files in «Documentation» folder.

Note, that all content (photos, illustrations, etc) are used for preview only and shouldn’t be included in the final purchasable pack.

1.4. Choosing category & attributes

You should find «Category & Attributes» section on the template editing page to fill the fields.

The most important field here is «Category». Note that if you choose the wrong category, your template will not pass the review process.

In addition, do not forget to paste a link to a demo page in the «Demo URL» field. Themeforest doesn’t approve HTML and Wordpress templates for sale without it.

The rest of the fields («Compatible Browsers», «Files Included», «Columns», etc) you can fill at your own discretion.

1.5. Adding tags

You should find «Tags» section on the template editing page to fill «Tag» field.

You should pay your attention to this field because a customer can find your template based on this keywords. Properly selected tags can help increase your sales.

If you don’t know how to select tags properly, we recommend you to copy some of them from competitor-templates.

1.6. Item support

You should find «Supporting your item» section on the template editing page and answer the question «Item will be supported?».

Note that a positive answer means that you will answer the questions and help your customers to customize your template.

1.7. Selecting a price

You should find «Set Your Price» section on the template editing page and set the price at your own discretion.

When choosing a price, we recommend you to start from average competitor-templates prices.

1.8. Message to the reviewer

You should find «Message to the Reviewer» section on the template editing page and write something like «Hello again!» in «Comments» field.

Also, don’t forget to tick the checkbox under the «Comments» field.

1.9. Upload template

Just find and hit the «Upload» button at the end of template editing page.

2. Updating process

There are two types of template updates: description & price update and files & tags update.

You can update only description & price and do not update template files. In this case, all changes will be applied immediately.

Also, you can update only files & tags and do not update template description or price. In this case, all changes will be applied after the review process.

If you update template description, price, files, and tags, then the description & price changes will be applied immediately whereas the files & tags changes will be applied after the review process.

2.1. Edit mode

You should find and hit the «Edit» tab under the «Preview» image on the template page.

2.2. Description & price update

You should find «Update Description & Price» section on the template updating page and change description and\or price.

After that just hit the «Save Changes» button.

2.3. Files & tags update

You should find «Update Description & Price» section on the template updating page and change template files and\or tags.

After that just hit the «Save Changes» button. And don’t forget to tick the checkbox «Notify Buyers».

3. Deleting process

Attention! You will not be able to restore the template after deleting.

3.1. Edit mode