How to convert HTML to WordPress?

How to convert HTML to WordPress?

Facebooktwitterlinkedin

HTML to WordPress ?

HTML to WordPress – In the beginning, all websites were integrate with text and static HTML. Webmaster couldn’t change the content of the website if they don’t have the knowledge of HTML but now a days, the websites have a much different place. Websites are much more complex but easy to handle the content and UI with the help of admin console. Admin console provide richer and more enjoyable experiences for site creators and visitors alike.

Thanks to open source technology PHP which provides cms like WordPress, Drupal, Joomla and much more.
Here I’m going to explain you how to convert HTML to WordPress,
You need to install a code editor such as Sublime or Notepad++ to access your HTML files and your new WordPress install’s directory.

Step 1: Necessary files and directories

On your server, you need to install WordPress updated version
Next, create a few files in your code editor and save them into theme directory. Don’t do anything to them just yet. Just leave them open for further editing.

  • Style.css
  • Index.php
  • header.php
  • footer.php
  • sidebar.php

Step 2: Copy Existing HTML CSS Into New Stylesheet

Now just copy and paste your html css into style.css file of the theme To begin, add the following to the top of your file.

/*
Theme Name: Write your Theme’s name here.
Theme URI: Write your Theme’s URI
Description: A brief description about your theme.
Version: 1.0
Author: Theme’s author name
Author URI: Author’s website url (like: http://www.dselva.co.in).
*/
After this section simply paste your existing CSS below. Save and close the file.

Step 3: Create header, footer and sidebar

Before we get into next step, here we need to know how WordPress works. WordPress uses PHP to call and retrieve data from its database. Each file that we’re using in this little tutorial is designed to tell WordPress which part of your site content is to be displayed and where.

Here we go.
First, open your current site’s index.html file. Copy and paste header section into your header.php file, save and close it.
Second, again go back to index.html file. Highlight the aside class=”sidebar” element and everything inside it. Copy and paste this section into your sidebar.php file, save and close it.
Third, again in your index.html select all html after sidebar and copy and paste it into your footer.php file, save and close it.
You can close your index.html file now however and move on to the final steps. Almost done!

Step 4: Finalize your theme’s index.php file

In order to finalize your new theme’s index.php file you need to make sure it can call up the other section (besides the main content) that are housed in the other files you’ve created.
At the top of your index.php file, place the following php line for header.

<?php get_header(); ?>
Then, at the bottom of your index.php file, place these php lines.
<?php get_sidebar(); ?>
<?php get_footer(); ?>

And finally, you have to add what’s called The Loop. This is the primary bit of php that WordPress uses to display your post content to visitors. So the final step in creating your new theme’s index.php file is adding the code below within the content section.

<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
<div class=”post-header”>
<div class=”date”><?php the_time( ‘M j y’ ); ?></div>

<a href=”<?php the_permalink(); ?>” title=”Permanent Link to <?php the_title_attribute(); ?>”><?php the_title(); ?></a>

<div class=”author”><?php the_author(); ?></div>
</div><!–end post header code–>
<div class=”entry clear”>
<?php if ( function_exists( ‘add_theme_support’ ) ) the_post_thumbnail(); ?>
<?php the_content(); ?>
<?php edit_post_link(); ?>
<?php wp_link_pages(); ?> </div>
<!–end entry–>
<div class=”post-footer”>
<div class=”comments”><?php comments_popup_link( ‘Leave a Comment’, ‘1 Comment’, ‘% Comments’ ); ?></div>
</div><!–end post footer code–>
</div><!– end post code–>
<?php endwhile; /* continue if all posts have been fetched */ ?>
<div class=”navigation index”>
<div class=”alignleft”><?php next_posts_link( ‘Older Posts’ ); ?></div>
<div class=”alignright”><?php previous_posts_link( ‘Newer Posts’ ); ?></div>
</div><!– end navigation –>
<?php else : ?>
<?php endif; ?>

Save your index.php and close. You’re theme is now finished! All that’s left is to upload it to your WordPress website.

Step 5: Upload and activate your new theme

Now that you’ve created your theme files and have them all stored within your new theme folder, you’re going to need to access your new WordPress install’s directory.

Place your new theme folder inside /wp-content/themes/. Then navigate back to WP Admin > Appearance > Themes and your newly created theme should appear there. Go ahead and activate it!

Follow the same steps for other pages, if you get more knowledge follow the official WordPress website https://wordpress.org/.

Happy coding…

Facebooktwitterlinkedin
About the Author