In today’s modern world in which creativity, business and all other aspects of daily life are more and more frequently occurring online which means that millions of people around the world are creating websites for one reason or another. One out of every four people that are creating a website are doing so using the online blogging platform called WordPress, one of the most popular open source management systems on the planet. However, creating a website using WordPress requires web designers to convert the PSD file that contains the web design into a WordPress template, and this isn’t as easy as it sounds. This is because Photoshop skills don’t really apply here. In order to convert a PSD to WordPress theme that is fully a functional and responsive, one requires knowledge of front end development languages like Html, CSS and JavaScript along with backend programming languages like PHP.

However, there is no need whatsoever to be disheartened. Complicated though it may be, this task can be accomplished by working smart, and the best way to do that is to break the task down into steps! Here is how you can convert your PSD Files into WordPress in five steps:

Step One: Create the web design in Photoshop or Illustrator

A lot of people seem to think that making a website is easy. After all, all it involves is some coding and the creation of a logo right? These people can’t be more wrong. The creation of a website is a lengthy and complicated process, something that can’t be accomplished so easily. The web design needs to balance looks as well as functionality so that it can attract the target audience on the both fronts. It is easy to create a website and focus too much on one aspect out of the two that were previously mentioned, but the end result would be a website that is either functional or stylish but not both.

Since you will be looking to create a versatile website that is both stylish and functional you will have to go through a period of research. The first thing that you will need to research is who your audience is and what they look for in the websites that they go to. Also, it would be wise to take a look at what your competitors are doing to their websites. Since your competitors are probably better established than you are, you’d be able to take what they’ve done, analyze its effectiveness and apply it to your own website if it is effective. When you have completed the research phase, you should have a rough idea of what your site will look like. So now that looks are out of the way, you will need to think about what functions your site will possess. Start to brainstorm, and don’t forget to get your ideas down on paper. Having a physical representation of your website will greatly benefit you moving forward.

When the physical representation of your website is complete, it is time to begin actually mapping it out using Photoshop. Before you start, however, make sure that you design your website using a column based grid. The reasons for this are twofold. Firstly is aesthetics. Your design will simply look better this way. Another important benefit is that the aligned design that you will get as a result of using a column based grid will facilitate an easier process for your front end developers who would be using HTML and CSS in order to make a responsive design for your new website.

Step Two: Slice the PSD

Now that you have successfully conceptualized a design for your website and put it to paper, it’s time to get started on the first major aspect of your actual web design: slicing the PSD. Slicing the PSD file is an activity that is fairly recent in its creation. It was invented as a result of an advancement in front end languages from XHTML and CSS2 to HTML5 and CSS3. In the previously used languages, buttons, borders and other such shapes had to be added using images. However, with these new front end languages the process has become more streamlined.

This is where slicing comes in. Basically, you will need to open your PSD file and search for all of the pictures. If you had saved your work in layers and folders, this will be very easy. Now, simply slice the pictures that can’t be created using CSS, such as the logo, and add them to the HTML. You can use the CSS3 to firstly position the images placed in the HTML correctly, and further use CSS to create buttons, borders and other shapes that once had to be added using images. The slicing process is short and relatively simple, and for this small amount of work you are going to reap some major benefits. An example is much faster loading times for your website, something that will attract a lot of traffic to your site!

Step Three: Create the HTML, CSS3 and JavaScript

Once you have completed the second step of this process, it’s time to start coding in earnest using HTML5 and CSS3. First and foremost before you do anything else, create a new folder. In this folder create two files, namely index.html and style.css. Additionally, create a sub folder which you will name images and place the images you have extracted from your PSD file into this folder. Now create another folder called JavaScript. You will use this folder later on when you are working with JavaScript, basically you will be saving all of your jQuery files here. Now it’s time to really get to it.

HTML5

HTML5 is somewhat new as far as front end languages go, and is well known for the fact that it possesses the functionalities of both XHTML and HTML. You will be using this language to create the basic structure of your web design. You will be doing this by creating the separate elements of your page using HTML5, such as the <header> and the <footer>, all of which will come together as a document that is attractive looking thanks to its neatness, and is universally readable. Here is a list of resources that you can use in order to learn about HTML5 if you are new to the language, or refresh your memory if you already know about it:

1. w3schools.com/htmlW3Schools is the best website for learning the basics of HTML5. All of the elements and attributes of this language are explained and taught using demos, making for an efficient learning experience.
2. developer.mozilla.org/en-US/Learn/HTMLThe people that created the popular browser Mozilla Firefox have a developer’s section on their website. You can use this section to learn a lot about HTML5 through the tutorials they have there, which will help you whether you are just starting out or even if you are an advanced user.
3. tutsplus.com/categories/htmlThis website has a lot of different HTML5 tutorials, some of which are free and some of which you are going to have to pay for.
4. w3.org/TR/html5This website is where all of the open web standards that have been created in order to ensure the longevity of the web. Here you can find in depth information about HTML5 as well as all of its latest developments.
5. validator.w3.orgOnce you have completed your HTML5, put it through this validator in order to find out if your HTML5 meets the w3 open web standards!

CSS3

CSS stands for Cascading Style Sheets, a front end language the latest iteration of which is CSS3. You’re going to be using this front end language to add some meat to your skeleton design by shaping, positioning and styling it , allowing you to create a consistent web design in which your site shall contain elements that conform to its overall design. Doing this will also allow your site to load faster as well as get indexed faster by search engine web crawlers. Here is a list of resources that you can use in order to learn about CSS3 or refresh your memory if you learned about it but have now forgotten. PRO tip: Did you know you can customize radio buttons and checkboxes with CSS?

1. w3schools.com/cssW3 can be considered the best known resource for CSS3 tutorials and examples of the various CSS3 selectors, properties and values.
2. developer.mozilla.org/en-US/Learn/CSSYou can use this very handy facility provided by the folks that created Mozilla Firefox in order to learn about CSS3 and also to keep yourself updated regarding any and all updates pertaining to this language.
3. tutsplus.com/categories/cssThis website contains a wide variety of tutorials that you can look through. Some of these tutorials need to be paid for, but others still are free to check out and can teach you a far bit about CSS3 selectors, properties and values.
4. w3.org/Style/CSSThis website is a great place to stay updated with the latest CSS3 news, because this is the very community that develops the CSS3 web standards. It’s also a great place to find out technical information about the language.
5. jigsaw.w3.org/css-validatorThis is the validator through which you should run all of your CSS3 before you make the website public. This is in order to make sure that your CSS3 meets the web standards set by W3!

Responsive Design

There was once a time, not all that long ago in fact, when a website had a standard design and standard functionalities. No one ever thought of creating a responsive website for different resolutions simply because it wasn’t relevant for that day and age. In today’s modern day and age, however, the internet is used on a wide variety of devices that use a wide variety of resolutions. From smartphones to tablets to TV screens and now even wristwatches, there are so many different ways to view a website now that a web designer simply has to create a website design that features responsive design in order to cater to the wide variety of internet users that exist, essentially a web design that detects the screen it is being viewed on and adjusts itself accordingly.

It is highly advised that you decide before you begin designing your website and building the HTML5 and CSS3 whether you want it to feature a responsive design or not. This is due to the fact that the coding involved in responsive design involves the addition of media queries using CSS3. You will essentially use this media queries to set different textures and sizes for various screen resolutions. Keep in mind that you should use percentages to define the screen resolutions, essentially using a fluid layout design which allows you to create responsive design for all resolutions between the parameters defined by your media queries as well. This will be hugely beneficial for your website as there are so many different sizes of smartphones tablets and computers available nowadays in so many different sizes and you should really cater to all of them.

Here are some excellent resources that you can use to learn about all the information regarding responsive design:

1. google.com/web/fundamentals/layouts/rwd-fundamentalsThis is a useful resource to learn about using CSS3 media queries.
2. blog.froont.com/9-basic-principles-of-responsive-web-designThis article can help you understand all of the fundamental differences between responsive design and adaptive design, a comparison that confused a lot of people and for good reason seeing that these two types of web design are so similar to each other.
3. alistapart.com/article/fluidgridsThis is a brilliant article by the talented Ethan Marcotte that you can use in order to learn about fluid grids and the benefits of using them, featuring several examples that you would do well to apply in your own website design!

Responsive front-end framework

There is a shortcut technique that you can use if you are unwilling to get deep into CSS3 media queries or if you want something that can be completed quicker. This technique is called used a responsive front end framework rather than applying responsive design to your entire website. Remember that you will have to apply the same grid framework that you are using for CSS for your HTML5 as well. Also, keep in mind that although using a responsive front end framework would help you design and develop your website faster, it would also greatly drag down the loading speeds of your website which could seriously affect the amount of people that would be visiting it.

Some of the most popular front-end frameworks are:

1. getbootstrap.comThis responsive framework is somewhat easy to apply, and an bonus benefit is that it uses a CDN to reduce the impact of your website’s loading speeds as well.
2. lessframework.comThis is an adapttive CSS grid framework rather than a responsive one which allows you to create an adaptive layout.
3. foundation.zurb.comThis is a front-end grid framework with a file size that is absolutely tiny in order to minimize the impact it will have on your website’s loading speed.

JavaScript (vs CSS3)

As of this very moment, JavaScript is a programming language that can be considered on of the most popular in the world thanks to its almost universal support and its ease of use thanks to libraries such as jQuery and backend systems like Node.js and frameworks like AngularJS. However, Javascript has started to see a decline of sorts after the rise of CSS3 animations which facilitates the creation of animated transitions between styles.

Here are some great JavaScript resources that you can use to help yourself learn about JavaScript or to refresh your memory if you learnt but have now forgotten:

1. w3schools.com/jsIf you are new to JavaScript, this is where you should start thanks to the excellent tutorial that is available on this website.
2. jquery.comThis is for when you have some experience with JavaScript. You can start using libraries like this one in order to program a lot more easily. jQuery is the most popular JavaScript library by far.
3. nodejs.orgIf you prefer backend systems but at the same time can’t get enough of JavaScript, check out this website.
4. angularjs.orgAn excellent way to combine HTML and Java is by using this framework.

Be sure to check out the follow resources before you start using CSS3 to animate elements on your website using JavaScript:

1. w3schools.com/css/css3_animationsAs always, w3schools is where we turn to in order to learn about programming and coding. Look through the tutorials and try them out.
2. mozilla.org/Using_CSS_animationsFurther your knowledge of CSS3 animations with the nine samples and examples that Mozilla has provided.

Step Four: Build the WordPress theme files

Once you have completed all of the aforementioned steps and have successfully converted your speculative designs into hard code, it’s time to take the big step by converting your HTML5 into a WordPress theme. One very important thing you should remember is the WordPress hierarchy of templates in order to ensure that your templates function properly. The hierarchy general follows from header.php to index.php to footer.php and finally style.css. These four templates are what you will be using on each page of your website.

Now that you have fully understood the intricacies of the template hierarchy, it’s time to break the HTML files down. This can be done quite easily. First, go to the themes folder in your WordPress installation and create a new folder within it. Create the following file in this folder: header.php. This file is what you are going to use in order to define the document type along with the elements that you want to include in your header such as the metas, title, stylesheets, javascripts and so on and so forth. Once this is done, create footer.php and repeat the process with this file as well. Create a sidebar.php file as well if your design includes one, and repeat the process with this as well.

Once this entire procedure has been completed successfully and you have saved all of the elements in these files, it’s time to begin constructing your homepage. In order to do this, open the file you created previously called index.php or create new file called frontpage.php or page-home.php, whichever of these three you prefer. Once you are done creating a template for your homepage, add all of the .php files you made previously. Once the entirety of your page is ready, simply paste the HTML5 in between all of the elements on your page and you will be done creating the homepage of your website. Repeat the processes for all of the pages that you want to include on your website and you will ready for the next and final step of this entire process.

Step Five: Use WordPress inbuilt tags and functions

Now that you have completed your WordPress theme for your website it is time to ensure that you possess the ability to edit your website using an admin panel rather than digging into the code again and again whenever you want to make any kind of edit to your website. The best and, as a result, most popular way to do this is to add a WordPress function called add_meta_box which will allow you to edit all of the content of your website using an admin panel that you can use upon entering a specific user id and password that will be provided to you.

Designing the core elements of your website isn’t difficult to do using WordPress. For example, you can display links and other such information on your website using WordPress functions. All you have to do is check the function reference page on WordPress to see a list of all available functions. You can also add template tags which are essentially functions designed for specific themes. Make sure you check out this WordPress resources section to learn everything about the WordPress tags, functions and much more.

WordPress menu

Once you log in to the admin panel that you can access for your website, it would be highly advisable for you to replace the menu list in your code with a single line of PHP. This is so you can change the items in Menus and Appearance without having to use the Admin panel every single times, instead you can just add menu items as and when you like.

In situations where you need to edit an inner page because it has a different header or a footer, you simply need to add conditional tags to the HTML5 coding of your website which will allow you to apply different code for selected pages or posts.

Now that your WordPress website is finally up and running on your development server, it’s time to finish things off by getting it onto your live server. Here is an article where it is explained in great detail how you transfer a WordPress site, in a series of steps. All you have to do is follow all of the six steps provided and you will have your website up and running in no time.

If you would rather not go through this entire process and spend weeks or months at a time developing your website, simply hire a company like PSDtoWP.net to do it for you. This company is one of the best, and ensures very fast conversion of your PSD files into WordPress templates. They never miss a deadline and always keep communicating, which we enjoy for years now!

The post PSD to WordPress – The complete guide appeared first on WPTidBits.