PACS WordPress SIG

A Special Interest Group of the Philadelphia Area Computer Society

You are here: Home / How To / Building a new WordPress site from an HTML site

Building a new WordPress site from an HTML site

by

Graphic of male looking at jumble of code with big 'W' in the middle.

Today’s Topics

This month we are going to talk about 1 topic.

  1. Continuing our discussion on creating a new WordPress site / theme from an HTML site. Part 2 of 3.

Building the new WordPress site from an HTML site

We started with a sample site and downloaded the HTML, including style sheets, media files, and scripts to a local folder. Using Windows 11 for the demo system, but the steps we discuss can be implemented on macOS or Linux using cross-platform tools such as wget, VS Code, and LocalWP.

  • Downloaded website using wget
  • Created empty WP site
  • Break files apart
  • Created a theme folder and basic files
    • Folder
      • wp-content/themes/mynewsite
    • Create required files
      • index.php – file displays content
      • style.css – manages the visual theme elements, like fonts
    • Create necessary files
      • header.php – contains HTML displayed on top of each page
      • footer.php – stores HTML that goes at the bottom of each page
      • sidebar.php – generates sidebar elements
      • functions.php – adds functionality to the theme, like WP widgets, custom actions to change display, register new components
      • single.php – displays a single post, including custom post types
      • page.php – shows static content of a single page
    • Set up initial CSS stylesheet
    • We have a working WP theme.
      • View Appearance | Themes in new site to verify theme recognized
    • Customize files with code from HTML site
      • Copy CSS files from downloaded HTML site and paste into theme folder
        • This step places the HTML site’s CSS files in the root of our theme. We can copy and paste the contents of those files into our style.css file, or we can use the @import CSS directive to include the files in whole.
        • Update style.css to add @import commands
      • Split up main HTML Website files
      • index.html split into
        • header.php
          • Everything from beginning of file to <body> tag. This will include the <head></head>element.
        • sidebar.php
          • Eyerything that may be in any <aside> tags
        • footer.php
          • Everything from the <aside> tags or the closing <body> tag to the end of the index.html file.
      • Add WP function calls into header and footer.
      • Change CSS Style reference to WP format
        • header.php file – we copied html formatted CSS directives from the HTML index.html. Need to change directive in the <head> section. Something like this:

<link rel="stylesheet" type="text/css" media="all" href="style.css" />

  • Replace it with:

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css" type="text/css" media="all" />

This form of code is found throughout WordPress code. It is blended PHP and HTML. As you read this line from left to right it begins as HTML with the <link rel=”stylesheet” href=” syntax and then switches to PHP with <?php echo get_template_directory_uri(); ?>.

It then switches back to HTML to complete the HTML command. /style.css” type=”text/css” media=”all” />

The resulting HTML command that will be executed is <link rel="stylesheet" href="http://new-site-from-html.test/wp-content/themes/new-site-from-html/style.css" type="text/css" media="all">.

At this point in the process we have completed the edits on the header.php file. Move onto the index.php file to add code needed to run our WordPress website.

index.php

  • Add basic WP code:
    <?php get_header(); ?>
    <?php get_sidebar(); ?>
    <?php get_footer(); ?>
  • This code will call for the rest of your WordPress files. You will add The Loop at the blank line.
  • The Loop processes each post for display
    • Formats it according to how the content matches the criteria within The Loop tags.
    • This permits you to add dynamic content to your WP site.
    • Add right after <?php get_header(); ?>
<main class="wrap">
  <section class="content-area content-thin">
  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
	  <article class="article-loop">
	  <header>
	  <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
	  By: <?php the_author(); ?>
	  </header>
	  <?php the_excerpt(); ?>
	  </article>
	  <?php endwhile; else : ?>

      <article>
        <p>Sorry, no posts were found!</p>
      </article>
<?php endif; ?>
  </section><?php get_sidebar(); ?>
</main>

At this point, save your index.php file and close it. You successfully created a WordPress theme.

Move to single.php

The single.php file determines the layout of all post types in WordPress. In addition to blog entries, it defines custom post types like a product page on an online store. This file is empty now. Add WordPress code: 

<?php get_header(); ?>
<main class="wrap">
  <section class="content-area content-full-width">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <article class="article-full">
        <header>
          <h2><?php the_title(); ?></h2>
          By: <?php the_author(); ?>
        </header>
       <?php the_content(); ?>
      </article>
<?php endwhile; else : ?>
      <article>
        <p>Sorry, no post was found!</p>
      </article>
<?php endif; ?>
  </section>
</main>
<?php get_footer(); ?>

This code uses a loop to retrieve post content from the database and display it using the method the_content().  

Work on page.php

Areas like landing pages contain everlasting content that rarely changes. Instead of single.php, they will inherit the layout from index.php if dedicated page templates are missing.

We will use code similar to single.php but with several adjustments to distinguish website pages from posts. We will insert a sidebar and make the content area smaller.

This file is empty now. Add the PHP code below:

<?php get_header(); ?>
<main class="wrap">
  <section class="content-area content-thin">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <article class="article-full">
        <header>
          <h2><?php the_title(); ?></h2>
          By: <?php the_author(); ?>
        </header>
        <?php the_content(); ?>
      </article>
<?php endwhile; else : ?>
      <article>
        <p>Sorry, no page content was found!</p>
      </article>
<?php endif; ?>
  </section><?php get_sidebar(); ?>
</main>
<?php get_footer(); ?>

This code uses the same loop as single.php, but it iterates through pages instead of posts, since it is in the page.php template file.  

At this point, our custom WordPress theme has a layout and content.

Make it right

There are a few things that need to be fleshed out at this point.

  • Missing images – drag images/ folder to library.
  • Review edits to header.php to enable display of top graphic. “grayfade”
    • Demonstrate the use of the browser Inspector | Console to find file name for missing resources image.
    • Optimize images
  • Show edits to tags to differentiate wrap classes across template files. (header.php)
    • This required a mod to the css to add these new classes.
    • The CSS file we downloaded with minified, making it impossible to read in the editor. Use the online service https://unminify.com/ to paste the minified css and un-compress it.
  • Install Query Monitor plugin to help with template identification.
    • Review usage.
  • Replace header.php with header.php-AFTER-CLEAN
    • This removes the extra code describing the home page. We want our posts to be displayed.
    • Ref our slides with screenshots added.
  • Use HTML importer to import greatschoolteam2009
  • Used importer to import entire site or a folder.

How to set up so that imported posts/pages are using correct template?

  • Edited header.php to remove header related content. This creates a good clean post. Still with sidebar issue. Review page.php for sidebar code. Copy to single.php.

Sorry. We are out of time. See you next time.

Video Recording of Session

This recording includes a copy of the slideshow as a preview at the beginning of the video. Skip to 5:37 to jump to the beginning of the live session.

Resources Used in this Series

Featured Image Notes

The featured image on this post was generated by DALL-E in Microsoft Edge CoPilot. The prompt was:

Create a graphic for a blog post using the following description of the post: Download the HTML version of your website, make a few changes here and there, create a few files and you have a new WordPress theme ready to go. There’s more to it than that, but it gives you an idea of what we are going to discuss.