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.
Table of Contents
- Pick a theme
- Download a starter theme
- Create a database
- Download WordPress
- Upload your theme
- Edit your HTML files
- Migrated Scripts
- Add Connectors
- Fix the Nav
- Copy Footer Scripts
- Add a Homepage
- Copy Code
- Add a Template Name
- Install WP
- Set Metadata
- Customize the Theme
- Add a Homepage
- Set you Homepage
- Copy Assets
- Installing ACF
- Add Custom Groups
- Add Custom Fields
- Set Default Locations
- Add Content
- Replace Static Code
- Test
How to Convert a Static Website into WordPress, using Advanced Custom Fields:
Pick a theme
Pick a static theme to convert

Download a starter theme
Download underscores.me or any blank starter theme

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

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)


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

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

Add Connectors
If the scripts aren’t absolute, add a connector; Otherwise, you’ll generate 404s
<?php echo get_stylesheet_directory_uri(); ?>/

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.

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

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

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

Set Metadata
Log in and fix the Title Tag + Permalinks. Removing “Just another WordPress site” and setting pretty permalinks.
Settings >> General >> Tagline

Settings >> Permalinks >> Post name

Customize the Theme
Select your custom theme
Appearance >> Themes

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

Set you Homepage
Set your homepage as the front page.
Settings >> Reading

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

Installing ACF
Install the Advanced Custom Fields Plugin

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.

Add Custom Fields
Create Custom Fields for the HomePage.
Creating a field for every part you want is editable in the backend of WordPress.

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

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

Replace Static Code
Replace the 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.