Convert a static website to WP

Jan 7, 2021 • 4 min read

I have an old client who wants his website converted into WordPress; so he can 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:

1. Pick a static theme to convert

2. Download underscores.me or any blank starter theme

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

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

4a. 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)

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

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

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

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

<?php echo get_stylesheet_directory_uri(); ?>/

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

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

11. 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.

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

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

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

15. Login and fix the Title Tag + Permalinks. Removing "Just another WordPress site" and setting pretty permalinks.

Settings >> General >> Tagline

Settings >> Permalinks >> Post name

16. Select your custom theme

Appearance >> Themes

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

18. Set your homepage as the front page.

Settings >> Reading

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

20. Install the Advanced Custom Fields Plugin

21. 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.

21. Create Custom Fields for the HomePage.

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

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

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

23. Replace the Static Code with ACF Fields

Code examples:

24. 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