• About
  • Get Jnews
  • Contcat Us
Thursday, February 25, 2021
Almomento 360
No Result
View All Result
  • Login
  • News

    Trending Tags

    • Commentary
    • Featured
    • Event
    • Editorial
  • Politics
  • National
  • Business
  • World
  • Opinion
  • Tech
  • Science
  • Lifestyle
  • Entertainment
  • Health
  • Travel
  • News

    Trending Tags

    • Commentary
    • Featured
    • Event
    • Editorial
  • Politics
  • National
  • Business
  • World
  • Opinion
  • Tech
  • Science
  • Lifestyle
  • Entertainment
  • Health
  • Travel
No Result
View All Result
Morning News
No Result
View All Result
Home Wordpress

Converting HTML Sites to WordPress Sites

sambit by sambit
January 24, 2019
in Wordpress
0
html to wordpress
0
SHARES
2
VIEWS
Share on FacebookShare on Twitter

A lot of people are still in possession of virtual interfaces built on the HTML framework which are static in nature and require making changes in the code for conducting even minor modifications. A method to convert HTML CSS to WordPress and incorporating all the elements of the old website into new one is being presented here. This technique which can be used to transfer HTML to WordPress will be beneficial for many owners as they will be able to migrate HTML site to WordPress and enjoy the unique benefits that the open source platform offers.

The technique involves separating the HTML file of the existing interface and using them to create the essential files of the WordPress website. Let’s take a look at the stepwise process to do so.

Summery of Article

  • READ ALSO
  • Best Ways to Integrate WordPress with Instagram
  • How to Show in Google Boxes with Your WordPress Website
  • Step 1
  • Step 2
  • Step 3
  • Step 4
  • Step 5
  • Conclusion

READ ALSO

Integrate WordPress with Instagram

Best Ways to Integrate WordPress with Instagram

January 24, 2019
google answer boxes

How to Show in Google Boxes with Your WordPress Website

January 24, 2019

Step 1

The WordPress needs to be installed for the process and you will find that almost every web hosting service provides the facility to do so in just a few clicks. Once the setup of the open source CMS has been installed, access the “wp content> themes” section through an FTP client and create a folder for your new theme and choose an appropriate name for it.

Step 2

A basic WordPress website can be created with only two files namely- index.php and style.css but to give a professional look to the new interface, we will create all the following files using a simple text editor or an online code editor and save them in the theme folder :

style.css: It contains all the styling information in the form of CSS files.

index.php: This file is responsible for serving the main content in case the other files have not been declared.

header.php: All the header elements are present in this location.

footer.php: It has all the elements of the footer of the interface.

functions.php: All functions that are enabled in the WordPress theme are contained in this file.

Step 3

Access the code of the HTML website and copy the CSS, JS and images folder into the new theme folder created in the WordPress setup. As mentioned before the listing of these steps, the existing HTML code will now be split up to be saved in the different files created in the new theme folder.

Take a look at the above image. It contains all the part of the original HTML program that needs to go into the “header.php” file in the newly created theme folder. The above image can be used as reference to understand the part needed to be cut and pasted for creation of the file. Similarly, we will separate the code for the other files in the following steps.

Step 4

Use the above image for reference to understand the part of the code that goes into the “footer.php” file. Now the content or the main body of the old interface will be transferred to the new website’s theme folder by pasting the relevant code in the “index.php” file.

The code visible in the above image can be found before the “<!-footer-> “ part in the HTML program. It is essential that some modifications are made to it so that WordPress can identify the code and call it. Add this function at the top of the index.php file :

get_header()

and this one at the end of the same file :

get_footer()

As you must have understood by looking at them that they are the functions that will call the header.php and the footer.php files. Go back to the “ appearance> themes “ of the WordPress set up and activate the new theme.

Step 5

A very important task still remains and that is to convert HTML CSS to WordPress theme. The CSS file folder was copied to the new theme folder in an earlier step and so these files will be now called.

<link rel=”stylesheet” href=”css/reset.css” type=”text/css” media=”screen”>
<link rel=”stylesheet” href=”css/style.css” type=”text/css” media=”screen“>
<link rel=”stylesheet” href=”css/layout.css” type=”text/css” media=”screen“>

Open the “header.php” file and look for the above lines and replace them with :

<link rel=”stylesheet” href=”<?php echo get_template_directory_uri().’/css/layout.css’; ?>” type=”text/css” media=”screen“>
<link rel=”stylesheet” href=”<?php echo get_template_directory_uri().’/css/reset.css’; ?>” type=”text/css” media=”screen“>
<link rel=”stylesheet” href=”<?php echo get_template_directory_uri().’/css/style.css’; ?>” type=”text/css” media=”screen“>

This completes the whole process of conversion and the JavaScript files which are being used in this example are being called in the header.php file.

Conclusion

This simple procedure to convert HTML CSS to WordPress will be beneficial for a number of static website owners as they can use this method to access the user- friendly and advantageous features of the open source platform. Anyone who desires to get an expert for the process can call +1.415.914.1710 and request a quote.

Tags: html to Wordpresshtml to wordpress converter

Related Posts

Integrate WordPress with Instagram
Wordpress

Best Ways to Integrate WordPress with Instagram

January 24, 2019
google answer boxes
Wordpress

How to Show in Google Boxes with Your WordPress Website

January 24, 2019
Next Post
E-commerce SEO Checklist

E-commerce SEO Checklist in 2018 for Better Conversion

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

POPULAR NEWS

download vidmate apk

VidMate APK v4.2104 | VidMate APK Download Latest [Updated 2021]

January 16, 2021
instagram marketing

6 Instagram Growth Hacking Techniques

October 21, 2020
roof repair Vaughan

Should You Invest in Gutter And Roof Repairing?

December 22, 2020
OMGChat

OMGChat: 15 OMGChat Alternatives [Updated: February 2020]

May 12, 2020
Hadoop Connoisseur In 2019

Why Should You Become a Hadoop Connoisseur In 2020?

February 7, 2020

EDITOR'S PICK

social media trends

10 Social Media Trends to Stock Most in 2020

January 22, 2020
google answer boxes

How to Show in Google Boxes with Your WordPress Website

January 24, 2019
Cobots

Cobots: 3 Benefits of Using A Pneumatic Gripper

January 23, 2020
netgear router

Netgear Router: Issues and their Fixes

May 12, 2020

About

We bring you the best Premium WordPress Themes that perfect for news, magazine, personal blog, etc. Check our landing page for details.

Follow us

Categories

  • Android
  • Computer
  • Digital Marketing
  • Entertainment
  • Gaming Headphones
  • Health
  • Lifestyle
  • Safety and security
  • Smart Phones
  • Technology
  • Web Development
  • Windows
  • Wordpress

Recent Posts

  • 6 Instagram Growth Hacking Techniques
  • Is a Postgraduate Diploma Worth It?
  • Should You Invest in Gutter And Roof Repairing?
  • The Accuracy of Data Annotation Services for ML and AI Models
  • Buy JNews
  • Landing Page
  • Documentation
  • Support Forum

© 2021 JNews - Premium WordPress news & magazine theme by Jegtheme.

No Result
View All Result
  • Homepages
    • Home Page 1
    • Home Page 2
  • News
  • Politics
  • National
  • Business
  • World
  • Entertainment
  • Fashion
  • Food
  • Health
  • Lifestyle
  • Opinion
  • Science
  • Tech
  • Travel

© 2021 JNews - Premium WordPress news & magazine theme by Jegtheme.

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms below to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In