Our Blog

Today, 97 percent of WordPress themes on the world wide web have a highly common inclusion of widgets and tools such as dropdown menus, contact me forms, drop an inquiry section, search engine bars, etc. Once a theme is chosen and the website has been set-up, there will be a stark difference as to how is the content placed and the final webpage looks. People who want to stand-out head to PSD to WordPress conversion for formulating a specialized website and yet have a bizarre time if they are not prepared for the task. Due to this issue faced in finding an ideal theme with the perfect design and functionality, website designers are left with one option to achieve their desired theme. This option includes building a WordPress theme from scratch via the use of a child theme on PSD.

WordPress has an underlying issue in the long run which occurs when an original theme is modified. The new theme calls for the deletion of the original theme and when a theme-update takes place, even those modifications disappear. To solve this problem, WordPress has included a concept known as Child Theme. Making use of a PSD to WordPress child theme permits you to make unlimited changes without affecting the parent theme even by the slightest amounts. 

Below are the steps to be followed to use a Child Theme to convert PSD to WordPress – 

Form a Child Directory – Before creating any child / customized theme you need to form a new folder under the theme folder on your WordPress dashboard. Ideally, give the folder a name similar to your theme name.

Use style.css to alter the look of your theme as desired – This is a crucial step that permits a website designer to modify their theme as per their requirements or business demands. You need to create a file known as style.css and place it inside your child theme folder (make sure even the parent theme folder is present with a style.css document). The code that needs to be present in your style.css file is mentioned below –

Line 1 – Theme Name: Twenty Eleven Child

Line 2 – Theme URL: https://wordpressintegration.com/

Line 3 – Description: Child theme for the Twenty Eleven theme

Line 4 – Author: your name

Line 5 – Author URL: https://wordpressintegration.com/

Line 6 – Template: twentyeleven

Line 7 – Version: 0.1.0

Line 8 – @import url(“../twentyeleven/style.css”);

Once this code has been executed, you must check your WordPress dashboard and a theme named “Twenty Eleven Child” will be present for activation.

Meaning of each Line of Code – Lines 1 to 5 of the style.css file consists of details regarding author name and URL along with theme name and URL. The links mentioned in these fields are the destination where WordPress software has to extract necessary files and values for your WordPress dashboard. 

Lines 6 to 8 are critical and without them, the theme would never be imported in the first place. These lines import the Twenty Eleven theme and its respective style.css file while ensuring that the child and parent theme are linked. 

Once these lines have been executed and your results are evident on your WordPress dashboard, you can place more lines of code under the import statement. These lines can describe the body of your theme and state its specific shade of background color that you desire. You can also control the size, alignment and color of your header and footer as per your business needs. Alter your font colors and sizes, set borders for specific sections on the page or even allocate backlinks to specific content on your WordPress webpage.

Keep in mind that this step is a great attribute of CSS. As CSS states that if there are 2 rules being declared with similar attribute specifics then the former rule declared gets priority over the later. For this reason, the compiler executes the @import statement and loads the parent theme’s information, after which it reads the CSS rules in the code in the second paragraph of this step. If you have understood this workflow functionality then you can customize the child theme’s style.css to suit your desired website design. 

Use PHP files to add functionality – Further high-level WordPress theme customization is possible via the creation of PHP template files. The second most used template after style.css is the function.php file. This function.php file lets website designers create custom menus, custom pages, custom forms and databases for users, custom thumbnails, etc. One can think of it as a plugin file used to add desired design and flexible functions. You can either install these plugins and simply add custom code to the style.css sheet. Use – 

Line 1 – <?PHP

Line 2 – function Function_name() {

Line 3 – // define your function

Line 4 – }

Line 5 – ?>

This is the best way to build a WordPress theme from scratch while also avoiding the hush-a-hush of losing your changes once the theme is updated by WordPress.