So, finally you have decided to power up your website with WordPress. Then read on as you are on the right path of getting an awesome website based on WordPress theme. An amazing WordPress theme can make your WordPress website very attractive and user friendly.
Designing an attractive website in WordPress is not a much difficult task. You can do it if you have bit of coding knowledge. If you are a designer then you can use your creativity to design amazing web designs but you will be needing the proper programming knowledge to make those design to work on the web to create your website. So the major task is to convert your beautiful designs into amazingly beautiful and working web pages. In this article we will be discussing how you can convert your PSD to WordPress theme or PSD design templates to a WordPress theme?
What is a PSD file?
In today’s time of web designing getting popular day by day, PSD and WordPress don’t need any introduction. PSD is basically a Photoshop document which you can create using Adobe Photoshop. It is a file which can be worked and edited and you can save and edit parts of this image file into separate png or jpeg files. While creating PSD file, you can put all of your creativity and innovation to create your custom designs and image file. Anytime you can open your PSD file in photoshop and edit it any time as per your wish and requirements.
What is a WordPress Theme?
We assume that you are new to WordPress themes and we explain it to you by giving simple example. WordPress themes are similar to your smartphones themes which you must have been using in your smartphones. As the mobile themes can change the look and feel of your mobile phone – the color, icons, the wallpaper, navigation etc., similarly a WordPress theme provides you the basic look and feel to your website or blog.
In technical words, A WordPress theme is basically a group of files known as templates which decides the basic look and feel of your WordPress website.
Initially, WordPress was thought of only as an open source blogging platform. Now it has evolved into one of the most versatile and popular website creating tool which programmers as well as non-programmers can use freely. It helps you in creating your own blogs and simple websites without going into much detail and inner complexity of web programming. It allows you to add more functionality and features to the site using its thousands of readymade free plugins which you can add and install into your WordPress site easily. Hence WordPress themes have become one of the basic building blocks of a WordPress website. WordPress theme are the design layout of the website which you are creating and it is also known as Template.
How to convert PSD to WordPress themes?
WordPress has many inbuilt themes which you can easily include in your web pages. But if you want to create your own custom design to make your website unique then you need to convert your PSD design files into something which can be understood by Website or web pages. Initially this conversion process may look complex but it is quite easy if you follow the following given steps.
– Slicing your PSD file
The process of converting your PSD file into WordPress theme starts with the step called slicing your PSD file. In this step, you slice your PSD file and divide it into separate image files so that you can save each of the design component effectively as a separate design file. You can use Adobe Photoshop or any other photo editing software to slice your PSD files.
Now make a note of what are the things which you will require to load as an image in your website. If there will be more web images then it will slow down your website. Hence we have to optimize the images. At this point you have to decide what needs to be static and what should be created dynamically when the website will load.
In order to slice your PSD, you have to look for these components first.
- Background
- Headers and Separator
- Footer and others
You have to be very careful when you slice your components as it should be pixel perfect other your final page will not look proper.
Creating index.html and Style.css files
Now we will shift our focus from the designing world to the programming world which is also very simple to follow. From the PSD design which you have designed now create a static HTML and CSS template. You can name the files index.html and Style.css for future use.
You can do this step easily by using many softwares like Dreamweaver or Fireworks. You can also learn at this point little bit of HTML and CSS as it will be very helpful. Hence go through some basic tutorials on the sites like W3Schools and take help from developer communities to get ready for your web page designing.
Now you have to place your images and sliced up components at their appropriate positions with the help of index.html and related CSS file. You can do process of responsive web design to make sure your site looks perfect and beautiful on all types and sizes of screens.
Here is the sample break up of code based on the div tag and CSS styling:-
index.html
– CSS file and its sample output:
In this step, the footer, background and the header are sliced up from the original PSD file.
– Now Break your index.html file into WordPress theme file structure
Now the basic template ready with you which you need to port into the WordPress environment. Before starting this step, you need some knowledge about how things are organized in WordPress.
WordPress has a specific structure for files which you have to follow. Here you need to upload your web pages into WordPress themes provided WordPress works with it smoothly so that the additional plugins and functionalities can be added to it without any problem of incompatibility issues. Hence you should go by the WordPress standard file structure and break your index.html file into the required .php files.
There are two main files which make up a WordPress theme i.e. Index.php and style.css. Other than these, a typical WordPress theme consists of many PHP files for the basic features like header.php, archive.php, sidebar.php, footer.php etc. Now you should carry out this type of fragmentation of code and break up your index.html file into required .php files. If you find any difficulty then you can go through some of the tutorials freely available which can give you detailed description of how to do it.
Some of the help we are giving for you which are listed below:-
– Some Basic files of WordPress theme
- index.php
- header.php
- sidebar.php
- footer.php
Now we will explain about more related files and their purpose:-
Style.css
This is the main stylesheet. This file should be attached to the Theme and it will contain the header information about the theme.
Rtl.css
This is the rtl stylesheet and this CSS file will be included automatically.
Index.php
This is the main template file and is the parent file of the template.
Comments.php
This file defines about the comments template.
Front-page.php
This file is about the front page template and is used only for a static front page.
Home.php
This home page file is the front page by default.
Single.php
This file is used whenever a single post is called. For this and all other query templates, index.php is used if the query template is not available.
Page.php
This file is used for individual page templates.
Category.php
This page is required when there is a need to show the categories.
Tag.php
This page is required when there is a need of tag.
Date.php
This file is required when you have to display the date and time in the template page.
Archive.php
This file is used when a category, author or date is queried. This template will be overridden by category.php, author.php and date.php for their respective query types.
Search.php
This file is user to perform a search inside the template.
Attachment.php
This file is used to view a single attachment.
Image.php
This image attachment template is used when there is a need to view a single image attachment.
404.php
The famous 404, file not found error template is used to display the error message when the post is not found.
Add WordPress tags
Now we are nearing the completion of the steps to convert PSD to WordPress. Now you have to import the awesome inbuilt functionalities provided by WordPress into your theme files using the WordPress tags. After you add these tags, you can say that now you have created a WordPress theme. You can follow the below link to know the available WordPress template tags.
http://codex.wordpress.org/Template_Tags
You can get the details of each tag and you can also know how to best use them in your .php files. If you want to add some more features and functionalities then follow the below link which has a list of all the functionalities given by WordPress.
http://codex.wordpress.org/Function_Reference
In this page, all tags and functionalities under these pages are explained in detailed with sample usages. Hence it is easy for you to create your own themes quickly.
Now you should place all of the files into a single folder which can be named as per your wish. This folder is then placed inside the –/wp-content/themes/ folder which you can find in the WordPress installation.
If you have followed all of the above steps then you can activate your custom theme from your WordPress dashboard. Now you can check your new cool WordPress website having unique custom design.
– Adding functionalities
Now you have already created your own custom WordPress theme from a PSD file. If you want to improve your WordPress site then you can add some more functionalities and features to your theme as you will learn more. Now you can get the maximum benefits of using WordPress themes. If you can learn JavaScript them you can even add more exciting features to your theme.
Conclusion
As we have just explained, the process of converting a PSD template into a WordPress theme is quite simple. But If you find this process too difficult which can happen if you don’t know coding then you can hire an expert WordPress developer which has all the skills, experience and knowledge in this regard. He can do this PSD to WordPress theme conversion process and deliver to you a great WordPress theme based website.
WordPrax Ltd.
Latest posts by WordPrax Ltd. (see all)
- WordPress 4.9 Update Emphasizes Ease-of-Workflow - July 5, 2022
- What are the Steps to Convert a PSD file into a WordPress Theme? - September 12, 2017
- Reasons for Needing a Professional Genesis Coder for Converting PSD Design to WordPress - July 18, 2017