Convert template to wordpress

Converting HTML Templates to WordPress Themes

Posted in WordPress by Erin Myers

Last updated on February 1st, 2022

Although web technology has come a long way, there are still websites created solely with HTML. If you happen to own one of them, you might be wondering how you can convert an HTML template into a WordPress theme.

Fortunately, you have several options at your disposal, if you want to convert those HTML files over to WordPress. The techniques that are available range from hands-on manual conversions to partnering with experts who can handle all the heavy lifting.

In this article, we’ll cover four different approaches to HTML template conversion. For each, we’ll provide instructions and resources that can help you bring an HTML-based website into the WordPress fold. There’s a lot to cover, so let’s dive right in!

Converting HTML Manually

The first option when it comes to conversion is the manual approach. Since this is a pretty hands-on process, you’ll need to make sure you have access to the files for both your original website and your new one.

Typically, you’ll use a Secure File Transfer Protocol (SFTP) application for this purpose. Once you’ve accessed your website, you can proceed with the following steps.

Step 1: Create a Theme Folder

First, you’ll need to create a folder to hold your new theme files, and label it with your new theme’s name. Using your code editor, you can then create five specific files:

For now, you can just leave these files blank, and save them to the folder you just created.

Step 2: Copy and Paste Your Existing CSS

Your next priority is to customize the Cascading Style Sheet (CSS) file. This is where you’ll outline all the different style elements for your site.

At the top, it’s good practice to add some information about the file. In fact, when it comes to WordPress, there are some elements that are required in order for the theme to be featured in the Theme Directory.

Below that information, you’ll then want to paste in any existing CSS styles from your original website that you want to carry over to your new theme.

Step 3: Separate Existing HTML

In your original website, the HTML code that designates your header, footer, sidebar, and main content areas are all likely to be in your index.html file. Now, you’ll need to portion out each of those elements into the new files you’ve created for your WordPress theme.

For example, in your original website’s index.html file, you can locate the first

You’ll then repeat this process for the ‘sidebar’ and ‘footer’ tags. Copy the code contained in each of those elements, and paste it into the respective PHP files.

Now, what you’ll have left is the primary portion of your index.html file. This is what makes up the main content layout of your HTML-based website. You’ll need to copy this remaining code, and paste it into your new index.php file.

Step 4: Configure Your Index.php File

Your next step is to make sure your new index file can locate the files necessary to enable your theme to display your site’s structure and style. To achieve this, you’ll use WordPress template tags. These are used to tell the theme to retrieve the header, footer, and sidebar files.

For example, you can have your template display the header file you created by using the following tag:

You’ll place this in your index.php template file, or on subsequent pages where you want the header to appear. The same applies to your footer.

There’s another important part of your new template that you’ll need to understand as well. This is called the WordPress loop – a snippet of PHP code that tells the template to pull in posts. It can also be customized to control how many posts are displayed.

Step 5: Upload Your New Theme

Now that your new theme is ready for action, you’ll need to place its folder into the wp-themes/content/ directory for your website:

Once you’ve uploaded the files, you can log in to your WordPress dashboard and navigate to Appearance > Themes. Here, you should see your new theme listed and be able to click Activate and start using it.

Importing HTML Content With a Plugin

Another way to handle this process is to use a plugin to transfer content from your old, HTML-based site. Unfortunately, there are very few tools available that are compatible with recent versions of WordPress. You can check out a free trial of WP Site Importer, however:

This plugin can scan your entire website and catalog the content that’s movable. It works best if your HTML is well organized and ‘clean’ to start with. You’ll also be able to import content such as menus and links.

Using a Child Theme

Another way to move your HTML site into WordPress is with a child theme. This has the same base functionality and style as its parent theme, but you’ll be able to preserve any tweaks and customizations you make, even if you update the parent.

Step 1: Choose a Theme

There are many well-built, free themes to choose from in the WordPress Theme Directory. Once you select one you like, you’ll need to install it so that its files will be available in your website’s file directory:

You don’t need to activate this parent theme, however.

Step 2: Create a Folder for Your Child Theme

Next, you’ll need to access your files with an FTP application, and create a new folder in your wp-content/themes directory. This file should have the same name as your parent theme, with “-child” added to the end.

For example, if you’re going to create a child theme for Twenty Nineteen, you can create a folder called twentynineteen-child:

This setup means that your child theme will be able to pull functions and styles from the parent theme automatically, once you set up the rest of the necessary theme files.

Step 3: Set Up a Style Sheet

Your next step will be to set up your style.css file. WordPress requires some specific information in the style sheet to make the parent-child theme relationship work. You can also paste in additional styling information from your original HTML files if needed.

Step 4: Set Up a Function.php File

Now that you essentially have two themes you’re working with, you’ll need to tell WordPress that your child theme is dependent on the parent’s CSS. For that, you can use the wp_enqueue_style() PHP call.

You’ll first create a function.php file, and place it in your child theme’s folder. This is the file where you’ll execute the enqueue function that spells out the theme dependencies and hierarchy.

Step 5: Activate Your Child Theme

Once you’ve uploaded these new files to your website’s server, you can head back to your WordPress dashboard and navigate to Appearance > Themes. There, you should now see your child theme all ready to go.

Click Activate on your child theme to set it as your website’s theme. Then you’re ready to begin copying your HTML website content into your new WordPress site.

Purchase a Site Conversion Service

If you don’t have the time or resources to carry out a conversion yourself, you can also check out a conversion service. Additionally, if you need more resources or assistance with migrating other WordPress content, here at WP Engine we offer many solutions and resources for migration and conversion.

1. HireWPGeeks

HireWPGeeks is a full-service conversion option. It will handle all the heavy-lifting, and you’ll end up with a flexible, responsive, theme-based WordPress website that’s complete with all your content. You’ll have to contact the company for a quote, but you can plan on its services starting at $89.

2. FantasTech Solutions

FantasTech Solutions is another HTML-to-WordPress conversion service. It advertises highly-professional conversions from HTML into high-end, well-coded WordPress theme templates. You’ll want to keep in mind that the costs begin at $297 for one page. Additional pages start at $147 each, with exact pricing depending on complexity.

Customize Your Site Experience With WP Engine

It might seem like a big undertaking, but converting your HTML website over to WordPress can open up many other opportunities. With this highly-flexible and extensible platform, you’ll become more agile and able to deploy new content quickly.

Here at WP Engine, we believe the right developer resources can make a huge impact on your projects. In addition to innovative solutions, we offer plans and pricing tiers for any budget!

Join the 1.5M websites that trust WP Engine as their WordPress host.

Related Posts.

Subscribe.

Get weekly WordPress tips, tricks and news delivered to your inbox.

Источник

How to Convert a Static HTML Template into a Responsive WordPress Theme

As online business are grows, more and more clients are willing to pay large amounts of dollars for their sites to those with the right skill sets. You probably have learned how to create an HTML and CSS website but, chances are, these sites won’t make any more sense for a big business or even blog site nowadays.

This is the very reason why it’s important that you should learn how to convert your static HTML & CSS web template into a dynamic WordPress theme.

Resources You Need to Complete this Tutorial:

• NeoBlog HTML and CSS theme
• Basic Knowledge of the WordPress Codex
• Intermediate Knowledge of PHP and jQuery

What We Are Going to Build:

A WordPress theme is a way of ‘skinning’ the external design of your website. The theme can make a big difference to the overall look of your site. It offers a graphical interface via the WordPress template files.

When creating a WordPress theme, it is worth noting the following:

• Be careful of the name of the templates file you created. By default, WordPress recognizes the default template name such as single.php and page.php file. I recommend checking the name of the default WordPress template before naming or creating a new custom file.
• Check out WordPress Codex for some functions, tags or some other PHP code before using it on your template files. This will keep you on the right track on what you want to do in your code.
• Sometimes you need some external jQuery files to improve the look of your WordPress theme or add some functionality. WordPress will not provide everything in a box.
• Make sure to use well-structured, error-free PHP and valid HTML.
• Use clean, valid CSS.
• Follow design guidelines in site design and layout.
• Backup your files. You never have anything to lose by creating a backup. As a precautionary measure, you should backup all of your theme files, plugins you are using as well as some other files related to your theme development.

Why You Need to Take Note of PHP

PHP is a programming and scripting language that creates dynamic interactive websites. It is a widely-used and open-sourced general purpose scripting language that is especially suited for web development. In addition to that, this programming language can be embedded into HTML.

WordPress is written using PHP as its scripting language. This has an open source license, certified by the Open Source Initiative. Just like WordPress, PHP is also open-sourced.

Some parts of the WordPress code structure for PHP markup are inconsistent in their style so it is important you have a basic knowledge about PHP.

However, you don’t need to be a PHP web developer to create a WordPress theme. You just need to have a solid foundation about HTML, CSS, JavaScript as well as a basic background on PHP.

How Does This Work?

First, you will identify first the files you need to create to build a complete WordPress theme. The next step you will do is to start putting code on each template files.

Along the way there will be functions that might not be clear to you. In this case, the WordPress Codex will be your best friend.

After you created each template, you will add contents to your theme to test if the whole code you are using are working on your site.

Part 1. Getting Started

To start converting your NeoBlog WordPress theme, create the theme folder in the wp-content/themes directory in the WordPress installation folder.

Please take note that the name of the folder should correspond to the name of the theme you want to create. For this tutorial, it is named NeoBlog.

Part 1. The Template Files

Compared with static HTML and CSS sites, a WordPress theme consists with a bunch of template files.

These are files that contain the code to make a working WordPress theme. To do this, create the following files into the NeoBlog theme directory:

• css folder – This folder contains all the stylesheets. Copy this folder from the NeoBlog HTML and CSS theme.
• fonts folder – This folder contains all the external fonts used in the markup. Copy this folder from our NeoBlog HTML and CSS theme.
• images folder – This folder contains all the images such as the logo and so on. This folder will be copied from NeoBlog HTML and CSS theme.
• js folder – This folder contains all of the javascripts. Also, copy this from the NeoBlog HTML and CSS theme.
• header.php – This file will contain the code for the header section of the theme.
• footer.php – This file will contain the code for the footer section of the theme.
• index.php – This is the main file for the theme. It will contain the code for the Main Area and specify where the other files will be included.
• functions.php – This file behaves like a WordPress Plugin, adding features and functionality to a WordPress site.
• single.php – This file will contain the basic layout of a blog page.
• page.php – This file will contain the basic layout of a page.
• page-about.php – This is a WordPress’s built-in Post Types template. If a specific page, or a group of pages should behave or display differently, this is easily accomplished with this page template. For this template, it will display an About page layout
• page-contact.php – Another type of WordPress’s built-in Post Types template. This template will display a contact form on the pages it was set.
• content-search.php – This file will run the loop for the search to output the results.
• search.php – This file is responsible for displaying search results pages.
• searchform.php – This file contains the layout of the search form.
• comments.php – This file will contain the code for displaying comments.
• sidebar.php – This file will contain the sidebar widget area.
• 404.php – This file will return a “Not Found” notification if a particular search query is not found or doesn’t exist in the database.
• style.css – This file will include all of the styles and information of the NeoBlog theme.
• screenshot – a png image file, that should accurately show the theme design or the title of theme.

Over the course of this tutorial, code is going to be added to these files that will include menus, hooks, loops and widgets.

Step 1.1 – Copying Necessary Files to the NeoBlog WP Theme

To get started, copy the css, fonts, images and js folders from the NeoBlog HTML and CSS theme to the NeoBlog WP theme folder.

Step 1.2 – Naming Your WordPress Theme with style.css

Before stating with the template files, first add the links of the stylesheets of the NeoBlog HTML and CSS theme to the NeoBlog WP theme. Go ahead and create the style.css file on NeoBlog WP theme and then copy the code below.

There is nothing special here but the information about the theme such as the name, author, author’s website and so on are enclosed within comment tags. This will make the theme easily identifiable upon installation.

It also has a series of @import tags. This will link the stylesheets from the CSS folder to the main stylesheet of the NeoBlog WP theme, which is this file.

Step 1.3 – Adding a Screenshot Image File

Now that the theme has been successfully named thru style.css file, add a screenshot of the theme. Create an 880 x 660 px file in Photoshop and put a title text, the short description and the author of the theme on it.

The screenshot will only be shown as 387x 290 px on the WordPress admin panel, but the over double-sized image allows for high-resolution viewing on HiDPI displays.

Afterwards, save it as a screenshot.png file on the root directory of the NeoBlog WP theme.

Step 1.4 – Activating the Theme

After adding the screenshot of the theme, activate the NeoBlog WP theme.

But before doing that, to check on if the theme is working or not, create first a blank index.php on the root directory of the NeoBlog WP theme (don’t worry code will be added on this later on).

Next, activate the theme, go to the WordPress admin panel and mouse over your mouse to Appearance -> Themes. Click on the Activate button.

If you are going to check the NeoBlog WP theme on the front end, you will notice a blank page because you have not put anything on our index.php file yet.

Major Issues You Might Encounter With This Tutorial

While trying out this tutorial, you might have issues with combining PHP code with the HTML code.

Double check it. It is better that, by this time, you double check your code. Sometimes you might forget putting an end if or end while statement inside a WordPress loop.

The code below will have an error since it does not have an end if statement:

The code you see below will solve the issue.

It would also help if you can check the the ending and closing tags of your PHP code; otherwise, the code might not work when mixed with HTML code.

If you want to learn more how to add more functionalities on this blog, you might want to check and study the WordPress Codex.

What Limitations Does This Tutorial Have?

Although this tutorial will give you a head start on how you can create a theme, there will be limitations on this one.

It can only provide the basic features of a blog theme such as the sidebar, footer, search box, post list, featured images and so on.

Rounding Up Part 1

Great! We are done with the first part of this two-part series tutorial. You have learned how to set up template files, things to avoid, and some notes to look out for, as well as the steps in creating a WordPress theme.

Now to make it easier for you to follow these steps, we created these video tutorials to make it easier for you to follow the steps on this tutorial by just watching how to do it.

Our HTML file is now prepared and ready to be converted into a set of theme files. In the second part of this tutorial, we’ll work on some template files and add functions to support some functionality of your WordPress theme.

Part 2. Customizing Your WordPress Site

You can design your ideal site by creating a mockup in Photoshop and then convert the PSD file to HTML and CSS. Afterwards, you can then convert it to a fully functional WordPress theme.

Designing websites using Photoshop PSD files and then converting it to WordPress themes is one of the easiest shortcuts in web design and development today. It is the most ideal way to provide your client a site with small amount of time and with ease.

In this part of the tutorial, you will be working on the following:

• functions.php
• header.php
• footer.php
• searchform.php
• sidebar.php
• index.php
• single.php
• page.php
• page-about.php
• page-contact.php
• page-contact.php
• search.php
• content-search.php
• comments.php
• 404.php

In the first part of this series, you learned how to prepare your HTML and CSS files for WordPress and then brand and activate the theme.

In this part of the series, you will learn what code each remaining WordPress template must have to build a working WordPress theme.

At the end of this tutorial, you will have the same output just like the demo image file we posted in part 1.

Step 2.1 – Defining constants and registering navigation menu support

The theme is already active! Now add support to the theme directory as well as the navigation menu thru the functions.php. Go ahead and create the functions.php file first on the root directory of the NeoBlog WP theme.

Next, define the constants for the theme directory. Go ahead and copy the code below to the functions.php recently created.

(Note: Since this is a php file, all of the functions and code relating to php must be enclosed with tag.)

You also need to register a function for the navigation menu. Below are the functions needed to make a working navigation. Go ahead and grab it.

An add_action hook has been added to register the navigation menu. The first argument is the tag (to which the action will be added later) and the second argument specifies the register_my_menus function to call.

To learn more about this, check this page.

Step 2.2 – Creating header.php

Now, create the header.php file. Open index.html and copy everything from the opening DOCTYPE declaration to the ending tag and then paste it into the header.php file created on the NeoBlog WP theme folder.

Some of static HTML tags can be replaced by the WordPress built-in functions such as the language, meta information, body class and so on.

Add the wp_head hook before the closing head tag. Use this hook by having the function echo the output to the browser, or by having it perform background tasks. For more information about this, see the WordPress Codex.

For the navigation menu, use the wp_nav_menu function to display a navigation menu created in the admin panel of WordPress.

The theme_location parameter will display the menu assignment to the location it was set. Otherwise, if it was not set, the parameter fallback_cb will determine what is displayed.

To learn more about the wp_nav_menu, check this page.

Copy the code below and replace the static html header information just copied.

Step 2.3 – Creating footer.php

For this part, create the blank footer.php and once again open index.html from the NeoBlog HTML and CSS theme folder. Copy everything from the sharing idea section to footer section. Then paste it to the footer.php file on the NeoBlog WP theme folder.

You must have the same HTML code below.

Same with header.php file. Again, replace some of these HTML tags to the WordPress built-in functions such as the link to the homepage, the current year and the blog name information.

Check out the code below.

Step 2.4 – Working with searchform.php

Next on the list, add the markup (with built-in WordPress functions), which will display a search box on the sidebar. Go ahead and create searchform.php and copy and paste the code below on it.

(Note: Most of the classes you see here came from the search box markup of index.html file)

Notice that the the_search_query function as the value of the text box was used. This will simply display the search query for the current request, if a search was made.

Step 2.5 – Working sidebar.php

Before creating the sidebar.php, register the sidebar on functions.php file. Go ahead and open functions.php and add the code below on it.

The code above will build the definition for a sidebar and returns the ID.

Next, let’s call the sidebar. Create the sidebar.php file on the root directory of the NeoBlog WP theme and paste the code below.

The code above contain function that calls main-sidebar widget callbacks and prints the markup for the sidebar but, first, it will test if the sidebar is active before proceeding.

Step 2.6 – Populating the Index File

After adding all of these template files, work on the Home Page – the index.php file. Go ahead and create first the index.php on the root directory of the NeoBlog WP theme.
Now, put some code on thew index.php file to display the changes.

Now, let’s now check out the front page of the NeoBlog WP theme and see results.

Notice that the header and the footer are on their proper positions except for the sidebar.

To add the contents inside the home page, open the index.html file and copy the blog area section up to the closing div tag of box-layer align-center page-nav class and then paste it just under the get_header function. You’ll get similar code below.

The code above will only show a static display of the theme. To make this dynamic, structure the WordPress loop within the markup of the blog area. Copy the code below and replace the blog area just copied from index.html file.

The WordPress loop are PHP blocks of code used by WordPress to display posts. Using the loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within the loop tags. The WP loop usually comes with these blocks of PHP code:

The code above is the basic loop along with the markup; however, it has to display the blog information using the following WordPress functions:

• the_permalink – Displays the URL for the permalink to the post currently being processed in the loop
• the_title – Displays or returns the title of the current post
• the_author_posts – Displays the total number of posts an author has published
• the_author – Displays the name of the author of the post
• get_the_date – Retrieves the date the current $post was written
• the_category – Displays a link to the category or categories a post belongs
• the_post_thumbnail – Displays the Featured Image for the current post, as set in that post edit screen (more on this below)
• the_excerpt – Displays the excerpt of the current post after applying several filters to it, including auto-p formatting which turns double line-breaks into HTML paragraphs

With regards to the featured image, use the code the following code.

First, test it if there is a featured image set on the WordPress post panel. If the statement is true, it displays the URL of the post and the featured image itself.

Notice that an array is added with a class opacity-hover box-layer img-responsive. This is a way of adding a class in the Featured image to make a nice hover, border and box shadow on it.

But, doing this won’t display the featured image. You need to add functions first to register the featured image. Copy the code below and paste it into the functions.php.

Great! The featured image will now appear. Next, add function to remove brackets, ellipsis or the hellip word at the end of the excerpt (which is the default display of the excerpt).

Open the functions.php and add again the following code.

Next, you will tinker the page navigation that was already added on the index.php file. The following code will call the wp_query, a class defined in the WordPress core that deals with the intricacies of a posts (or pages) request to a WordPress blog.

It will then set the previous_post_link and next_posts_link function to add a navigation to the blog post list.

Check out the code below:

As a final touch, place the get_sidebar function inside the col-md-3 col-md-offset-1 margin-sidebar div along with an HTML5 aside tag to make it float on the right side of the page.

Check the code the below.

As a review, the index.php will contain all of the following PHP code. Check out the code to avoid missing something.

Step 2.7 – Working with single.php

Now, to display each individual posts in a blog page, create the single.php file and then copy and paste the code below.

There is for the comment section. Check out the code below.

This code will check if comments are open or at least have one comment. It will load up the comment template (more on the comment template later).

Step 2.8 – Working with page.php

After working on the blog page, work on the regular pages. Create the page.php file and then copy and paste the code below.

Again, there is nothing new to this file except that it doesn’t have the comment section since this is a regular page.

In the next 2 files, create 2 WordPress built-in Post Types template. These are pages that display page layout differently.

Step 2.9 – Working with page-about.php

For this part of the tutorial, first create a php file and call it page-about.php. Since this page is focused on the details about the website owner, it just contains plain HTML code along with the header, sidebar and footer.

Add a comment at the beginning of the page-about.php file to make sure WordPress will treat the file as a page template.

Copy the code below and paste it to the page-about.php file.

Step 2.10 – Working with page-contact.php

Many WordPress plugins can add a contact form to the blog, but a plugin is sometimes unnecessary. For the page-contact.php file, add a little bit of PHP and JavaScript code. First, go ahead and create the page-contact.php file.

Now, create a simple contact form. Simply paste the following code on the page-contact.php.

What has been done here is simply to make sure that the form has been submitted and filed correctly. If an error, such as an empty field or incorrect email address occurrs, a message is returned and the form isn’t submitted.

Next, create the form and display the error messages below each text box and text area field.

The form is now working but you can enhance it further by adding client side verification. To do this, use jQuery and the validate jQuery plugin.

First, download the validate plugin and then place it on the js directory on the NeoBlog WP theme. Add the following links to the header.php file before the closing head tag.

Now, create the verif.js file and put the jQuery code to enable the validation. Here are the code:

Great! The contact form has just been created. The form will now validate every input and simply picks a form element with class required and verifies if the form is properly filled.

Step 2.11 – Assigning page templates to pages

Cool! The page templates have been created. To make them work, assign them to a page.

For this part of the tutorial, create first a page from the WordPress admin panel and then assign a page template to it.

To do this, go to Pages -> Add New and then give it a title About or Contact.

Now to assign a page template to the page, go to the right side panel and look for Page Attributes panel on the right side. Under template, select the preferred template and hit Publish.

Now you can check the page if it works in the front-end.

Step 2.12 – Working with search.php

The structure of the search box is now set up but it is not working yet; it needs some functions to make it work.

For this part of the tutorial, add the functionality to enable the search query on the search box.

The code below will have some PHP code for the search to output the results; otherwise, it will return an error message: “Bummer! No results found”, which is wrapped in an H2 tag.

Create first the search.php file and grab the following code below on it. Otherwise, if there is a result returned, it will display the result within an H2 tag.

Note: The code below contains HTML tags based on the page.php and single.php

Step 2.13 – Working with content-search.php

The search.php will control the layout of the search results; however, add the loop of the search to output the results.

For this part, create the content-search.php file on the NeoBlog WP theme directory and then paste the code below on it.

Step 2.14 – Working with comments.php

To check again the single.php file, notice that there is a part on that file that contains a div class of comment-section along with some PHP code.

These code will simply check if the comments are enabled on the WordPress admin panel using an if statement. If it returns true, it will get the number of comments and simply display all comments returned.

Take note these code alone won’t yet display comments, one needs to create the comment_template, using the comments.php file. For this part of the tutorial, go ahead and create this file on the NeoBlog WP theme directory.

Now copy the code below and paste it on the created file.

There are a lot of things happening on this file. First, it will test if the post needs a password for the user to be able to comment. Next, if it returns true, the comments number and comments will be displayed.

Notice that there is also a navigation to see the comments (both previous and next) using the previous_comments_link and next_comments_link function.

Finally, use wp_list_comments to display all comments for a post or page based on a variety of parameters, including the ones set in the administration area.

Next, add some wp_enqueue_script to check if the threaded comment is enabled. If it returns true, it will enable comment reply. Open up your functions.php and copy the code below on it.

Step 2.15 – Working with 404.php

Creating a custom 404 page is easy using the 404.php template in a WordPress theme. This will make sure that every link actually goes to a specific web page. If there is a broken link, it will display this page.

For this part of the tutorial, create a simple 404 page template. Copy the code below.

A 404 ‘Not Found’ error page is a page generated by the server to inform a user about non-existing page.

On the code above, a simple message error message “Oh Snap! Page not found!” is displayed along with a home link URL. This is making sure that the visitor will stay on the site.

The NeoBlog WordPress theme is now complete! Congratulations!

Our Final Project

[Download Source]

Tips You Ought to Remember for This Part of the Tutorial

• Always check out the WordPress Codex for functions, tags and PHP code. This will keep you on the right path in dealing with code.
• Make sure to use well-structured, error-free PHP and valid HTML. See WordPress Coding Standards.
• Follow design guidelines in site design and layout.
• Always Backup your files. Always, always backup your files just in case you made changes on a template file so that you can easily retrieve it later.
• Seek for help. If you are working on a different theme, chances are you might have some issues while converting some files.

What Troubleshooting Techniques You Can Use

There is not really an official rule to check on errors while you are developing a theme. It might be your own code or some typographical error you just missed on your WordPress templates.

However turning on the Debugging mode or checking your error log might help.

Before You Leave

You don’t want to read the whole thing? You might wanna try the video version! If you need to know the Part 2 of this tutorial series, you need to watch the whole playlist.

Round-up

Congratulations! You just converted an HTML and CSS template into WordPress blog theme. That was fairly easy, right?

Now to make it easier for you to follow these steps, we created these video tutorials to make it easier for you to follow the steps on this tutorial by just watching how to do it.

Hope you learned something from this tutorial and see you again next time!

This post may contain affiliate links. See our disclosure about affiliate links here.

Our Creative Newsletter

Subscribe to our popular newsletter and get the latest web design news and resources directly in your inbox.

Related Posts

How To Create A Star Rating System In WordPress With CSS and ACF

How To Create a Responsive Timeline with Image Thumbnails

How to Put WordPress Into Maintenance Mode

How to Load Google or Adobe Fonts in WordPress

© Copyright 2022 1stWebDesigner
Helping You Build a Better Web

Источник