How to Upload HTML Files to WordPress.
The emergence of WordPress made the website creation process easier. Before WordPress, many developers used static HTML to build websites. Now developers are starting to switch to using templates available on WordPress.
While it’s okay to stick with static HTML right now , it doesn’t hurt to consider moving to WordPress. Why? Because with WordPress, you can create and manage a website easier.
WordPress provides themes, plugins, widgets, and various other features that make it easy for you to manage your website without having to deal with coding.
Of course, as a website owner who still uses static HTML you should consider converting HTML to WordPress. Apart from making it easier for you to manage, WordPress also has many features that are more flexible to add or remove compared to static HTML.
So, how to convert HTML to WordPress? Of course not just upload it straight away. Well! This article will discuss how to fully upload HTML files to WordPress. What are you waiting for, let’s see one by one how.
There are at least three different ways to convert HTML to WordPress available today.
- Manually create a WordPress template based on a static HTML website.
- Install semi-finished themes and migrate content.
- Paid the developer to convert HTML to WordPress
Each method, of course, has advantages and disadvantages. You can choose one of the simplest ways according to the capabilities and conditions of the website at this time.
How to Upload HTML Files to WordPress
Have you decided which method you will choose? If you use the first and second methods , at least there are a few things that need to be prepared such as:
1. Hosting Service
Of course you need a hosting service if you don’t have one. You can use a trusted local hosting service. However, it would be better if you use a WordPress Hosting service that supports the use of WordPress as a whole.
Alternatively, you can host the website locally (installing WordPress on a local computer) and then move it later. However, if you use this method, you must install a web server and other supporting applications on the local computer.
2. Code Editor
You will need a code editor such as Atom, Notepad ++, Sublime, or a similar application. The code editor will help you open, edit, and adjust HTML code before uploading it to web hosting.
Meanwhile, if you use the third method, at least you prepare a fee to execute it. Feel free to ask for help from experts or website developers for a fee of 2M (Thanks, Mas!).
For clarity, here is a complete explanation of each method.
3 Ways to Upload HTML Files to WordPress
Well, here are some ways to convert HTML to WordPress in detail.
1. Manually Create a WordPress Theme From a Static HTML Website
This requires access to the website’s repository directory as well as a little ability to read lines of programming code.
You need access to read various kinds of files in the website directory. Well, some of the files (containing lines of code) that already exist you can use to create a WordPress theme. Quite simple for those of you who already have some knowledge of HTML, CSS, and PHP.
If your goal is not only to copy existing content in static HTML into WordPress but also to duplicate the current design, this means you will need to create your own custom theme.
Take it easy, the method is not as difficult as it seems. You only need to create a few folders and files, a little copy and paste , and upload them into the WordPress theme directory.
As explained earlier, you will need a code editor such as Atom, Sublime, or Notepad ++ to access the contents of any HTML files or new files that are created.
Step 1. Create a New Theme Folder and Some Necessary Files
Inside the desktop device, create a new folder to hold some theme files. You can give the folder any name.
Then create a few files that are placed in the theme folder; style.css , index.php , header.php , sidebar.php , and footer.php .
Step 2. Copying the Current CSS into the Stylesheet
If you want a new design, of course you will need at least a few CSS functions that you should save. So the first thing you need to do is edit the style.css file .
Theme Name: Change to the name of the folder (this is for the name of the theme).
Theme URI: Replace with the location of the theme folder.
Description: A brief description of your theme.
Author: Your Name
Author URI: Your website address.
It’s very easy, you just need to add the following line of code at the top of the file.
Step 3. Splitting Current HTML Content
Before getting into this step, there are a few notes about WordPress that you need to know. WordPress uses PHP to call and receive various kinds of databases. Each file used in this quick tutorial is designed to direct WordPress to display the sections and locations of the website that need content.
For example, in your static HTML file all components (header, footer, sidebar, and content) in one file. Well, each file that was created aims to separate it.
So at the end, you need to organize some parts of the code – which have been separated into several files – so that the content can be arranged properly according to the appearance you want. Have you caught the logic? Maybe it will be clearer if you practice it directly.
First, open the existing index.html file . Highlights anything from the top of the file to the opening line tag of the class = “main” code . Copy and paste that section into the new header.php file then save and close the header file.
Reopen the existing index.html file . Highlight the class = “sidebar” element and whatever is in it. Copy and paste that section into the sidebar.php file , save then the sidebar file.
Third, copy all the sections after the sidebar then copy and paste into the footer.php file , don’t forget to save and close the footer file.
Finally, in the index.html file , highlight everything that’s left. Then copy and paste it into the new index.php file that was created. Save, but don’t close the index.php file yet .
You can close the index.html file (not index.php) and follow the next steps.
Step 4. Refining the Index.php file
The next step, namely refining the index.php file in the new theme. You just need to make sure that all functions that were split into multiple files can be put back together in the index.php file .
At the very top of the index.php file , add the following line of PHP code.
|<? php get_header (); ?>|
Then at the very bottom, add the two lines of PHP code below.
|<? php get_sidebar (); ?>|
<? php get_footer (); ?>
You must have known the use of these two lines of function, right? True! Function get_sidebar (); to call the sidebar and get_footer () files ; to call the footer file and retrieve the content inside.
At this point, you have successfully called several lines of code gathered together in index.php. Index.php is always called the first time the website is accessed. That is why this file is responsible for calling several functions and displaying the content used by WordPress.
Finally, you need to create what is called a Loop . This is the main part of index.php in WordPress, which is used to display post content to visitors. You can simply copy the code line below into the index.php file in the middle of the content.
|? php if (have_posts ()):?>|
<? php while (have_posts ()): the_post (); ?>
”<? Php post_class (); ? >>
<? php the_time (‘M j y’); ?>
”Rel =” bookmark ”title =” Permanent Link to <? Php the_title_attribute (); ?> ”> <? Php the_title (); ?>
<? php the_author (); ?>
<! – end post header–>
<? php if (function_exists (‘add_theme_support’)) the_post_thumbnail (); ?>
< ? php the_content ();
?> <? php edit_post_link (); ?>
<? php wp_link_pages (); ?>
<! – end entry–>
<? Php comments_popup_link (‘Leave a Comment’, ‘1 Comment’, ‘% Comments’); ?>
<! – end post footer–>
<! – end post–>
<? php endwhile; / * rewind or continue if all posts have been fetched * / ?>
<? php next_posts_link (‘Older Entries’); ?>
<? php previous_posts_link (‘Newer Entries’); ?>
<! – end navigation–>
<? php else:?>
<? php endif; ?>
Step 5. Uploading the Theme into WordPress
Now you only need to make the locally created theme load in WordPress. You do this by uploading it into the theme folder. In order to do this, you will need access to the WordPress installation directory. You can use FTP access or upload it directly via cPanel. You can follow this article on how to use FTP if you haven’t done it before.
Just upload the modified theme folder (dino-themes) into the WordPress directory ‘../wp-content/themes/’ .
Once done, go to the “WP Admin» Appearance »Themes” page and you should find your new theme there. Then you just have to activate the theme by clicking the “Active” button .
If it is active and can be accessed properly, you only need to adjust the new WordPress website with the old content on the static HTML website.
2. Installing Semi-Finished Themes Then Migrating HTML Content
This method is probably the simplest option compared to the other methods. If you already have a web hosting service, you only need to set aside a small amount of expenses to buy a premium theme (paid).
In addition to maintaining the current static HTML design, you can also use thousands of WordPress themes that are available both free and premium. However, I recommend using premium themes because they are of better quality than free themes.
There are tons of premium themes available on WordPress. Before deciding to use a theme that suits your needs, you can search for themes by category first. You can adapt the concept to the same theme as a static HTML website or use a different concept.
After you choose a theme that suits your needs, download the theme (usually a zip file) by clicking install. The theme will automatically be installed in the WordPress theme collection. To activate it, all you have to do is go back to the WP “Admin» Appearance »Themes” page . Find the name of the theme that was installed earlier then click “Active” .
After completing this, you already have a new WordPress theme, but it still needs some tweaking. When accessing a website using a theme that has been installed, you will only see a blank and boring appearance. It doesn’t matter because it is because there is no content at all on the website. Therefore, your next step will be to import your old content.
You can import static HTML content easily with the help of free plugins that are already available on WordPress. To install it, just access “Dashboard » Plugins »Add New” then search for a plugin called ‘ HTML Import 2 ‘ from Stephanie Leary. Once this plugin is installed and active, you can follow its guide to importing a whole directory of static HTML pages, including images.
When finished, you should be able to access the website using WordPress with the new theme format. If you create your own theme, your website should look like the previous one, only running using the WordPress CMS.
3. Paying Developers To Convert HTML Files to WordPress
This last method is the easiest way because you don’t need to do anything, except pay (sometimes) quite a lot of money. You can pay a developer to convert HTML to WordPress. The fee depends on who you hire and how complex a static HTML website you have. Easy and simple.
This method is of course perfect for those of you who don’t have enough time to convert HTML files to WordPress. Or, for those of you who previously purchased an HTML website and want to switch to using WordPress.
How to upload HTML files to WordPress is indeed quite easy for those who are familiar with programming languages and web servers. It’s just that for those of you who have never had direct contact, uploading HTML files to WordPress seems difficult.
To upload an HTML file to WordPress itself, there are a number of things that need to be prepared, such as access to a web server, supporting applications, and maybe costs to buy a premium theme or pay a developer to move your HTML to WordPress.
This is the first guide this time. If there is still anything you need to ask, feel free to leave a comment via the column below. Don’t forget to follow our social media to get information about the world of technology, business, digital marketing, and of course web hosting services. I hope this article is useful!★★★★★ 5/5