CONVERTING PSD TO
WORDPRESS IN 5 STEPS
1. Slicing PSD
• Slicing means to cut and
divide an image design file
into multiple design files each
having the different design
component of the overall
This is important because the whole design is not coded in
a single image.
Now, most designers make a design using a graphic
software that allows layered image creation, again like
Photoshop, and create design files that are already divided
into different components in its layers.
2. Creating Index and style
The next step is to code the sliced images into
HTML or XHTML format and style it using
CSS. This process requires a deep knowledge
of CSS and HTML.
For this purpose most coders use website
creating software such as Dreamweaver and
Fireworks but again it is up to the developer
to decide whatever software they wish to use.
3. Break index.html
The next step is to
break up your
It is important to
design your initial
HTML file according
to Word Press
theme’s file structure
and break your single
HTML file into
multiple HTML files
according to the
theme file structure.
4. Adding WordPress tags
The next step is to add WordPress inbuilt
function tags in the theme files to get the
desired functionality and the job is done.
The WordPress will take care of the
workings. And that is the beauty of
5. Adding functionalities
Now that you have created and activated a
theme, the full magic of WordPress becomes
If you want to add any other functionality into
the website, or you wish to modify any existing
functionality you just have to install a plugin or
configure the existing structure using the highly
user friendly WordPress dashboard.