This simple PSD to WordPress tutorial explains how easy it is to create a ready theme for WordPress CMS with Divine Elemente having your favorite PSD. Convert PSD to WordPress with no coding.

Also recomended to read: How to create WordPress themes, Layout Editor, Publish Editor
[divineAds]

Conversion of a PSD template to WordPress CMS with Divine Elemente is an easy-to-use, efficient, and powerful tool that empowers you to produce high-quality custom web pages on your own. Check it out for yourself:


Final Product

What you’ll be creating while learning how to convert PSD to WordPress CMS.

Final Product. Functioning theme for WordPress CMS

Final Product: Functioning theme for WordPress CMS.

Prerequisites for this guide:

- Install Adobe Photoshop CSx. - Install Divine Elemente. You can download photoshop plugin from our site. - Download PSD template from the Themes Marketplace


Step 1. Open a PSD template in the Layout Editor.

First, open a PSD template “Template’s name” in Adobe Photoshop and launch the Layout Editor (the ‘Elemente > Layout Editor’ menu).

Layout Editor launch

Layout Editor launch.

More details on the Layout Editor.


Step 2. Layout grid setting.

The next step is to show the Divine Elemente plugin how your page looksby selecting a basic layout of the grid on the side panel.

The Layout Editor. Selection of the layout grid's type

The Layout Editor. Selection of the layout grid’s type.

Then adjust the grid’s parameters according to your template.

To adjust the grid, display the grid (‘View > Show grid’ menu or by pressing Ctrl + H), and drag grid blocks’ boundaries on the canvas, and adjust them according to the template’s grid.


The Layout Editor. Layout grid's adjustment.

The Layout Editor: Layout grid’s adjustment.

After the layout grid is set to your parameters, you are ready to move on to the next step of the PSD to WordPress tutorial.


Step 3. Switch to the Publish Editor and elements assignment.

The next step is to switch to the Publish Editor (press the ‘Publish’ button on the side panel).

Switch to the Publish Editor. Press the ‘Publish’ button on the side panel.

Switch to the Publish Editor (press the ‘Publish’ button on the side panel).

Then, check the assigned theme elements ( the ‘View > Show Elements’ menu or Ctrl + H ), which were defined by Divine Elemente plugin.


The Publish Editor. Check up of the theme elements assigned.

The Publish Editor: Check all of the theme elements assigned.

If you need additional elements, assign the required elements by following these simple steps:


The Publish Editor. Elements assignment.

The Publish Editor: Elements assignment.

  • highlight an element on the canvas,
  • call for the context menu by right-clicking with your mouse,
  • select the required element in the dropdown list.

More details on PSD hints – Speeding up publishing time or Elements.

After all elements have been assigned, you can move to the next step – Publishing.


Step 4. Publishing.

The last step of work with Divine Elemente is to publish your theme. Instead of publishing the theme to the web server, let’s create it on the local computer. To do that, you are to:

  • select the ‘Save to folder’ item in the command panel,
  • and just click the large ‘Save to folder’ button.
Publishing. Selection of the publishing mode

Publishing. Selection of the publishing mode.

Now, after a short conversion process of PSD to WordPress, we’ve got a ready working theme for WordPress CMS

More details on how to create a template for WordPress with Divine Elemente.


PSD Hints, Elements And Best Practices

PSD hints, elements and best practices PSD hints, elements and best practices


Related Guides and Tutorials:


External


Let’s talk a little

PSD to WordPress tutorial we presented you the process of quickly converting a  PSD template into a working theme for WordPress CMS. Now that you have done it on your own, we are interested to know:
  • - How much faster for you is it to create a WP theme now?
  • Is it difficult to work with the plugin as a beginner?
  • What would you like to add to the functionality?

  • Trunkneck
    Giving it another try now after having trouble with it a long while ago. See if it has improved. :)
  • Louis
    Hi I want to have my side bar on the right hand side but the grid does not show one
  • ernesto
    Can you change the languaje on templates exemples, I don’t understand… it’s Rusian? whatever, I think I need more help, I used your templates and when I try to publish it, there is nothing, info, logo, billboard everything disappear, there is just my background, help please
  • http://www.divine-project.com Dmitriy, Divine Elemente Team
    Hi Ernesto, Could you pls send to us a screenshot(s) with issues you have mentioned above? Regarding “just my background” – pls try to check your layout grid sizes / and layout grid block sizes you can do that in a ‘Layout’ tab in ‘Publish editor’ (Photoshop menu > Elemente > Pubish & upload ) or by launching a ‘Layout Editor’ (Photoshop menu > Elemente > Layout editor). And in the ‘Layout’ tab try to fit a layout grid to your template. More details: http://www.divine-project.com/psd-template-modify http://www.divine-project.com/psd-template-creation
  • http://www.divine-project.com Sergey, Divine Elemente team
    Hello Louis, to do that, you need to move to Layout Editor, and change blocks position. You can learn more details from the tutorial: http://www.divine-project.com/doc-layout-editor#upload_psd_template
  • zunish
    HI .. when i upload theme into wordpress it says css file is missing..uploading failed. can any one help me?? 
  • http://www.divine-project.com DivineElemente
     @zunish Hi Zunish Themes made with Divine Elemente contain additional WordPress plugins: that’s why it is impossible to upload them using standard Worpdress uploading feature.   You need to upload your theme with Divine Elemente uploading function, or using third-party FTP client (you need to copy content of the local “/wp-content” folder into the “/wp-content” folder at your server).
  • AlisdairSmith
    When following the above guide I go to layout editor and the PSD is not visible, any ideas why?
  • http://www.divine-project.com DivineElemente
     @AlisdairSmith Hello. Could you please send us your PSD template (support@divine-project.com), so we could check it?
  • phil
    Dear Divine people, what do you mean by upload the whole wp-content folder? Are you serious? What folders inside are changed. Please advise because I will NOT overwrite my whole wp-content folder risking massive loss of content. Please advise exactly which folders are overwritten and adjusted. Phil
  • Phil
    By the way, where is the template you mentioned? You said it’s in the market, but looking at the freebies I can’t find it. Or do you expect me to spend extra money to get the files to follow along with the tutorials?
  • Dmitriy, Divine Elemente Team
    Hi Phil, you will not lose content of directories. In WP-content of the folder, you can only find “themes” and “plugins” directory. “Theme” includes your theme files and “plug-ins” include only the necessary plugins for the theme (Billboard / Admin / Shortcodes) that do not conflict with other installed plugins.
  • Dmitriy, Divine Elemente Team
    To download free WordPress themes for this tutorial, please, follow this link: Free WordPress Themes
  • http://wickfreescentedwarmers.co.uk RR
    I am creating a WordPress template, but I dont seem to be able to create a menu from within WordPress once the theme is uploaded – only the original button/menu links that were added to the design – so am i missing something? I want to create my own navigational menu from within WordPress. Is it possible to set up different page templates for wordpress when creating themes – as in a full width one column along with the usual left sidebar split?