How to convert a static site into a dynamic site managed by WordPress?

Statique vs dynamique

How to convert a static website to a dynamic website managed by WordPress?

A static website is definitely a good option if you want to have a few pages online. However, if you want more flexibility in managing your content, not always having to rely on a developer or adapt to the changing times, a dynamic website is what you need. In this article, we will see how to convert a static website to a dynamic site. Before you dive into the steps in this article, it’s important to make a few points  :

  1. You must have basic notions of PHP development (If you want to do it yourself)
  2. You should be familiar with the structure of WordPress
  3. It is important to understand how a web server works in order to easily navigate your website’s folders.

In addition to the points briefly listed below you must be wondering why converting your website. Below are some arguments,

Why Convert a static site to a dynamic site?

Here are some advantages of dynamic websites.

  • Few lines of code can generate multiple pages  : On a dynamic website, you can easily generate multiple pages with a few lines of code. This is made possible by the use of databases or the possibility of generating data concerning user queries.
  • You don’t necessarily need a developer for modifications  : With a static website, the content is usually in the code. As a direct consequence, you must have computer skills or have a developer near you at all times.
  • Very high risk of page error:  With a static site, because you have to create an HTML document for each page, you run a great risk of having multiple error pages. Indeed, a link modification can cause the malfunction of another page that you have forgotten.
  • Almost impossible to generate multiple pages via a website static:  The number of pages you can create with a static website is limited. If you want to create, among other things, a 100-page website, generating 100 HTML documents turns out to be laborious.

Static to dynamic website conversion options

To convert a static website to a dynamic WordPress site, there are 3 options  :

  1. Convert the website manually – split your HTML code into PHP while respecting the structure of the WordPress theme
  2. Install a WordPress theme and use your HTML design to create a child theme.
  3. Use an extension to import your HTML content into WordPress

In what follows, we will see elaborate on the three approaches.

1 – Convert the website manually into a WordPress theme.

To convert your HTML design to a WordPress theme, you must cut the design while respecting a certain structure.

Basically, WordPress uses the following files to make up a theme  :

  • styles.css – Which can contain the name of the theme and information such as version, theme description and translation key
  • index.php – the main theme file which can perform the role of listing articles on the site.
  • page.php  – which makes it possible to display the content of the pages of the site
  • functions.php – which is a very important file if you want to create functions for your theme.

There are also several other files that you can use for your WordPress theme design.

We invite you to refer to the WordPress.org documentation to know the complete list of PHP pages that you can use.

General Procedure for Converting HTML to WordPress Theme (Manual Option)

To convert your website to a WordPress theme, you need to follow the following steps  :

  1. Convert your website’s HTML extension to a PHP extension
  2. Section your files into three parts – header.php, footer.php and body.php
  3. Create a folder for your theme. You can name this folder as you wish. Among other prositeweb, Mecaniquestar …
  4. In your theme folder, create the index.php, page.php, styles.css and functions.php files (We will see the content of these files later)
  5. Migrate your HTML design to your theme folder
  6. Create an additional folder that you can call Template
  7. Take all the PHP files for your theme and upload them to the Template folder (These are the HTML files you converted to PHP in step 1)
  8. Take a screenshot of your website and rename the capture screenshot.png
  9. Add the name to each PHP file located in the Template folder to be able to use it as a page theme
  10. Migrate CSS and JS data to functions.php file
  11. Create the corresponding WordPress pages for the current pages of your website
  12. Activate your theme
  13. Assign pages to different designs
  14. Make the website dynamic
  15. Find the extensions you want to use on your website

The process of creating a WordPress theme is relatively long. We will try to simplify as much as possible to allow you to understand the essentials.

Details on converting HTML design to WordPress theme

Step 1 – Convert your website’s HTML extension to PHP extension

Converting your HTML files to php will simply consist of opening the file and saving it with the PHP extension.

See the demonstration below.

Stage  2 – Section your files into three parts – header.php, footer.php and body.php

 One of the peculiarities of a dynamic website is to be able to create several pages or part thanks to a few codes. WordPress uses global and local files. Indeed, a global file makes it possible to have a single code for several pages. The header.php and footer.php files are, for example, cases of global files. This is because the information in the header and footer of a site is generally the same everywhere on the site. 

In this part, it will be a question of opening each HTML code and identifying the different parts (Header, body and footer of the site). For most sites, you will notice, for example, a block called a header or footer. Below are syntax examples of what might go in the header.php file

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Prositeweb - Le titre de la page</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<header>
le contenu de l'entête de votre site web ici (exemple le menu du site et la bannière)
</header>

You will notice that this part includes the tag< head>< /head> and the beginning of the code.

Regarding the footer.php file, you might have code similar to this:

<footer>
Contenu du pied de page avec entre autre le formulaire pour souscrire aux infolettres
</footer>
<!-- Les code Javascript -->
<script  src="./script.js"></script>
</body>
</html>

All that is left of your code is considered the body of your website (partial for each page). You can leave it for future use.

Below is a demonstration to summarize this step

Step 3 – Create a folder for your theme

The folder where you plan to store the codes for your website is a conventional directory. However, here are a few recommendations. 

  • Give a name without spaces and special characters (all characters such as é, è ê … are for example to be avoided)
  • Choose a simple name

Stage  4 – In your theme folder, create the index.php, page.php, styles.css and functions.php files

Index.php, page.php, styles.css and functions.php files are basic building blocks for a WordPress theme. Indeed, WordPress uses them for the initial configuration of your theme. You could add other files if necessary by referring to the WordPress documentation. 

Sample base code for a WordPress theme

Stage  5 – Migrate your HTML design to your theme folder

Assuming your folder name is montheme, it will simply be a matter of copying your entire design and moving it to the montheme folder. Sure, you might be able to use WordPress functions and features from your folder. 

There are no specific recommendations regarding the arrangement of your site items in the folder. However, to make the file and folder structure cleaner, you can create a folder called “assets” for CSS and JavaScript codes. 

Step 6 – Create an additional folder that you can call template

Your additional template file will not confuse the basic WordPress codes and the files of your website.

Step 7 – Take all the PHP files for your theme and upload them to the Template folder

These are the HTML files that you converted to PHP in step 1.

In this folder you can transfer all files with the extension .php (files that were previously .html). 

Just a reminder : If you have followed the process correctly  in step 2 (Cut your files into three parts), the files to be transferred will only contain the body of your website.

Step 8 – Take a screenshot of your website and rename the capture to screenshot.png

Your website capture is simply an illustration of what your website looks like. WordPress uses this capture as a presentation photo in the admin panel. Although you have the option of putting the photo you want, we recommend that you take the capture to better find your way around your site.

Below is an example of what the capture looks like in the website management panel. 

Step 9 – Add a name to each PHP file located in the template folder to be able to use it as a page theme

WordPress has a defined structure which gives the possibility to select the design of the pages. If you want to use designs similar to the ones you have on your current site, you can create page themes by naming your files. In this part, we will see how to do it. 

1 – Use the get_header function to call the global header on each of the pages

The WordPress get_header function allows you to retrieve information from the header.php file to display it on the current page. Indeed, as mentioned above, WordPress uses certain information globally through functions. Below is the syntax of this function. 

<?php 
get_header();
?>
2 – Use the get_footer function to call the global footer on each of the pages

Like the get_header function, the get_footer function allows you to retrieve the content of the footer.php file to display it on the current page. Below is the syntax. 

<?php 
get_footer();
?>
3 – Add a name at the top of your file

The name you will give to each file can be selected from your page editor to assign a design. It is important to note, however, that the name syntax is very important for WordPress to recognize it. Below is the syntax you should use.   

<?php
/**
 * Template Name: À propos

 *
 * @package WordPress
 * @subpackage Prositeweb_Prositeweb
 * @since Prositeweb Inc 1.0
 */
 get_header();
 ?>

All that is essential in this notation is the Template Name: * Name of your design *. You can replace About with any name you want to assign to your themes. For example, Home page – if the design is for the home page. 

Step 9 in summary (example from About page)

To recap step 9 we leave you below a typical example of what you should have as a theme. 

<?php
/**
 * Template Name: À propos
 *
 * @package WordPress
 * @subpackage Prositeweb_Prositeweb
 * @since Prositeweb Inc 1.0
 */
 get_header();
 ?>
<section>
les informations qui sont dans la page exclues l'entête et le pied de page
</section>
<?php 
get_footer();
?>

10 – Migrate CSS and JS data into functions.php file

To facilitate resource management, it is important to call it according to the recommendations of the WordPress community. For this, you have to completely migrate the CSS and JavaScript code in the functions.php file. You will be able to do this using the wp_enqueue_style and wp_enqueue_script functions of WordPress. We will see how to use it.

In general, CSS and JavaScript codes are found in the header and footer of the site. If we go back to the section step of the website, you must open the header.php and footer.php files to retrieve the css and js codes. Then you need to use code similar to the code below to include it on your website. 

<?php 
function prositeweb_enqueue_script(){
     
           wp_enqueue_style('nom-fichier-css-1',get_stylesheet_directory_uri().'/css/bootstrap.min.css',false,false);
           wp_enqueue_style('nom-fichier-css-2',get_stylesheet_directory_uri().'/css/style.css',false,false);
	
	wp_enqueue_script( 'nom-fichier-js-1', get_stylesheet_directory_uri().'/js/jquery-3.6.0.min.js',false, false,true);  
    wp_enqueue_script( 'nom-fichier-js-2', get_stylesheet_directory_uri().'/js/script.js',false, false,true);  
    }
    add_action('wp_enqueue_scripts','prositeweb_enqueue_script');
    
?>

Code explanations (above)

  • prositeweb_enqueue_script is a conventional PHP function. You can name it according to your convenience. 
  • wp_enqueue_style is the WordPress function that allows you to include CSS style in the pages of a website. Vous trouverez une documentation assez détaillée concernant cette fonction via ce lien de WordPress.org
  • get_stylesheet_directory_uri () – to get the direction to the main directory of the current theme. If your theme is, among other things, montheme, the get_stylesheet_directory_uri() function will display https://example.com/wp-content/themes/montheme. 
  • The wp_enqueue_script function, just like wp_enqueue_style, allows you to include JavaScript codes on the website

11 – Create the WordPress pages corresponding to the current pages of your website

It will be a question quite simply of creating what one could call the model of the pages. One of the great things about WordPress is that you can use a template for any number of pages. So, if several pages of your website have the same visual, you can create a single template. 

Leave a comment



Thank you

Thank you for contacting Prositeweb,
Go back to the home page

Please fill free to contact us at any time for any request regarding our services. Contact us.

Thank you