2

I have one site that is built with html, css and javascript and has no CMS. It looks great and my client would like that site to have wordpress in the background so he can easily modify the content. So, I'm a little bit stuck here.

I know that there are plugins for importing well written html, and they work like charm. But, I never done this kind of migration. How can I transfer whole site to wordpress? Is there a way to make some automatic scraping of the whole site, and easy way to import js libraries so i can preserve all classes, div or span tags in html, styles in css etc?

Improve this question
2
  • Well, there's a plenty of javascript on the pages, I'd like to import that.
    – Josip Ivic
    Jul 27, 2016 at 11:42
  • 2
    You wrote both, but nvm, that is not the topic here. Have you read both answers? There is plenty of information in there on how you can add your JavaScript, Stylesheets, etc. In the worst case, just use <link> tags in your themes header.php file.
    – kaiser
    Jul 27, 2016 at 11:58

2 Answers 2

Reset to default
5

WordPress has a perfect wrapper for HTML > Theme conversion: The theme itself. All information can be found in the Codex page.

It is enough to add a folder to your wp-content/themes directory (or whatever directory you registered in addition to that), and add the following files

  1. functions.php
  2. style.css
  3. index.php
  4. header.php

to your custom themename folder. Then use the Plugins API to attach some callbacks into the execution flow of WordPress core. This is where you would define basic things like adding stylesheets or scripts. Example for your functions.php:

add_action( 'wp_enqueue_scripts', function() {
    // Register Stylesheets and Scripts in here
    // @link https://developer.wordpress.org/reference/functions/wp_enqueue_script/
} );

In your header.php, you add the opening calls for your HTML:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <?php wp_head(); ?>
</head>

The wp_head(); function calls all the actions and this is where you registered scripts and stylesheets will appear.

In you index.php, you will add your body markup:

<?php get_header(); ?>
<body <?php body_class(); ?>>
    <!-- Markup from your HTML files -->
    <?php get_footer(); ?>
</body>

The get_footer(); function will call a footer.php file if you include one.

Finally you just need to add Page templates that replace the original PHP files. Those do not really differ from the index.php above, except for one thing: The header comment. Let's assume you add a copy of your index.php, rename it to about-us.php and add the following as first line:

<?php /** Template Name: About Us */ ?>

Now, when you in the admin UI go and add a new page, you can select this new template, you will have a replacement file for some existing HTML file. You can even adjust the slug in the admin UI page edit screen.

All that should give you a good start to converting your HTML templates to a valid WordPress theme. You can later and depending on your contract go and make those templates dynamic bit by bit – for example by splitting out repeating sidebars, make menus adjustable, change the title and the content.

Improve this answer
0
2

It can be done and you can do a quick (relatively) job or take more time on a better site->WP conversion. I'm going to assume that you can write a theme, or this post will turn into a whole book. If not their are many guides online & in print and you don't need to become a full theme expert to get this conversion started. And we can fine tune my answer to your comfort level.

Here's an approach that gets the main conversion done quickly but leaves jobs such as proper inclusion of styles and scripts until later. You may prefer to do a more rigorous job from the start — up to you.

Step 1 - Get the Site into WP

Hopefully your HTML is very consistent across the site and you can readily identify a common header and footer. Your first step is to make yourself a new theme with just these files:

style.css - your existing site's styles with the addition of a proper theme header header.php - the HTML for the header footer.php - the HTML for the footer index.php - standard WP index.php with proper calls for header and footer

If your layout has any obvious sidebars that repeat across the site then throw in some sidebar files too.

Make sure that your header and footer include the obligatory calls to wp_head and wp_footer. Keeping an eye on the WP development guidelines as you go as a checklist helps.

Look at your HTML structure for the main page content, the page title and the bulk of the content. You want to get all the structural HTML into your templates so that in the future you aren't relying on the whoever edits the content to write HTML too. When you've identified the page title and content in one of your key pages (not the home page if it has its own layout as they often do) then you can replace the text in those areas with The Loop containing proper calls to the_title, the_content. You can look at separating out any meta data now, or after the first conversion — it's a choice based on your content and how you want to handle things.

Create a Page with the title and content you've just replaced and see how it looks!

You won't be pulling in your JavaScript and Styles in "The WordPress Way" but that can come later. At this stage just make sure that the references to them within your theme still resolve and fix them if not.

Step 2 - Get the HTML site content into WordPress

I've had people do this manually on small sites. Works fine. I've also used Stephanie Leary's HTML Import 2 but you can search the plugin repository for others if you wish.

If your site has content that should be Posts or even custom post types rather than Pages then import in batches and use a post type convertor — John James Jacoby's works well for me and I always think a plugin from a core contributor is likely to work well.

Interval

You should now have a roughly working site using what will look, at this stage, like a pretty poorly written theme! Improvements to come include properly coding the nav and including styles and scripts the proper way, which Kaiser covers in his answer to this question.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.