I have an old client who wants his website converted into WordPress to make edits independently.

I’ve decided to use this task as a teaching opportunity and document the steps in converting a static site to WordPress.

How to Convert a Static Website into WordPress, using Advanced Custom Fields:

Pick a theme

Pick a static theme to convert

Static Theme
Static Theme

Download a starter theme

Download underscores.me or any blank starter theme

underscores.me
underscores.me

Create a database

Create a database in your hosting account; where the website is currently being hosted.

Add Database
Add Database

Download WordPress

Download WordPress, Upload the downloaded WP files via FTP to your hosted folder

While in the root folder, Move the current static files into a new/separate folder if desired, so its easier to distinguish Static vs. WP)

Download WordPress
Download WordPress
Upload WordPress to your Server
Upload WordPress to your Server

Upload your theme

Upload your blank starter Theme to: /wp-content/themes/

WordPress Theme
WordPress Theme

Edit your HTML files

Open your static index.html file + header.php, footer.php files.

Migrated Scripts

Copy the header tracking scripts (e.g., Google Analytics) & any static assets to the header.php file

php template
Copy Scripts + Tracking

Add Connectors

If the scripts aren’t absolute, add a connector; Otherwise, you’ll generate 404s

<?php echo get_stylesheet_directory_uri(); ?>/

echo get_stylesheet
echo get_stylesheet

Fix the Nav

If this is a quick and dirty build, replace the dynamic Nav with a static Navigation found in the static files.

Repeat adding footer scripts to the footer.php file, remove duplicate assets (assets already present in WP)

Add a Homepage

Create a page-home.php file. Add the header and footer connections:

get_header();
get_footer();

Add additional templates if needed; for this example, I’m only creating a one-page site. Giving you a general idea of the steps involved.

page-home.php
page-home.php

Copy Code

Copy the static code within the opening and closing body tags into the page-home.php file you created.

Copy code inside opening<body> and closing </body> tags
Copy code inside opening<body> and closing </body> tags

Add a Template Name

If you haven’t already, Add a template name to your page-home.php file.

Template Name
Template Name

Install WP

Using your database credentials, install WordPress. You do this by going to your website: domain-example.com

wp setup
Install WordPress

Set Metadata

Log in and fix the Title Tag + Permalinks. Removing “Just another WordPress site” and setting pretty permalinks.

Settings >> General >> Tagline

Just another WordPress Site
Just another WordPress Site

Settings >> Permalinks >> Post name

Pretty Permalinks (post name)
Pretty Permalinks (post name)

Customize the Theme

Select your custom theme

Appearance >> Themes

themes

Add a Homepage

Create a Home page (Delete the generic Sample Page created by WP)
Select your homepage template under Page Attributes.

Custom Template
Custom Template

Set you Homepage

Set your homepage as the front page.

Settings >> Reading

Reading Settings
Reading Settings

Copy Assets

Move your static assets to the theme folder.
Check the homepage, fix any errors populating the inspector.

Move Static Assets to Theme Folder
Move Static Assets to Theme Folder

Installing ACF

Install the Advanced Custom Fields Plugin

Install ACF
Install ACF

Add Custom Groups

In ACF settings, Add a Custom Field Group

This groups all of your custom fields in one place. Create additional Field Groups if you need to make additional templates/pages.

New Field Group
New Field Group

Add Custom Fields

Create Custom Fields for the HomePage.

Creating a field for every part you want is editable in the backend of WordPress.

ACF Fields
ACF Fields

Set Default Locations

Set the page location you want the ACF fields to populate.

Set Page Location
Set Page Location

Add Content

Add the text and images to the AC Fields (before replacing content with ACF codes; this will make your life easier)

Text Fields
Text Fields

Replace Static Code

Replace the Static Code with ACF Fields

Replace static code with ACF fields
Replace static code with ACF fields

Code examples:

Test

Test your new page, checking for formatting errors.

I hope this helps speed up your development process.

For a deeper explanation of installing ACF, please read: How to Install ACF.