How to convert HTML to WordPress. Part 2.

In this little two-part experiment, we try to convert a simple HTML template into a WordPress theme. We created a new theme in the first part, we designed the main page, and we made a dynamic menu and sidebar column.

Today we will add the template to a single entry or page, configure the 404 error message, and search form pages.

Let’s start.

Make the template single.php for a post display

Just copy the index.php file and adapt it a little bit.

At first, we want to remove the link from the post name because we’re already inside it. Right?

<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

This code will become:

<h2><?php the_title(); ?></h2>

Now, to slightly change the single.php template look, let’s add the author’s title and the publication date.

<div class="postedby"> Posted by <?php the_author_posts_link(); ?> on <?php the_time(); ?></div>

<?php the_author_posts_link(); ?> – displays the author’s name with a link to all his publications

<?php the_time(); ?> – shows the date, you can set the format, by default takes it from the settings

Here how our post looks now.

kak-natyanut-html-shablon-na-wordpress-single.png

This worked well. You just need to align the block slightly using the following CSS rule.

.postedby {padding-left: 15px;}

.

This page is missing navigation to the previous and the next post. You also should do this for the home page.

Page navigation in the single.php

<div class="pagenavi"><?php previous_post_link(); ?> | <?php next_post_link(); ?></div>

This functions without specified arguments return the name (title) for the previous and the next post.

<?php previous_post_link(); ?>
<?php next_post_link(); ?>

Page navigation for the main page. Insert in index.php

<div class="pagenavi"><p><?php posts_nav_link(); ?></p></div>

So this is what the result looks like. I specially added some extra entries through the admin to create a few pages.

kak-natyanut-html-shablon-na-wordpress-index-pagenavi.png

As a final step, I would move these references to the right with a little padding:

.pagenavi {float: right; padding-right: 15px;}

Make a template for pages – page.php

It is similar to the post output, so simply copy single.php.

Let’s remove the author, the date, and the page navigation because it doesn’t matter for page type output.

I think you know how to do this. If in doubt, read the previous paragraphs, or look at the screenshot of the finished page.php.

Make a template for the 404 error page

Copy our index.php and name the file 404.php. Remove the main content code, leaving only the header, footer, and sidebar.

Instead of a dynamic page output, print an error message that the requested page was not found.

<h3>404 error!</h3> <p>We could not found the requested page. Please, go to the main <a href="<?php bloginfo('home'); ?>">homepage</a>.</p>

You can add a class (page404) to the main block to center the message.

Now let’s configure the search form

Add a search form through the built-in widget in WordPress. If there is a searchform.php file, the widget uses the form from it.

Create this file, and put the code in it.

<div class="searchbar"> <form name="search" method="get" action="<?php bloginfo('url'); ?>"> <input type="text" name="s" value="Search…" /> <input type="submit" name="submit" value="Search!" /> </form> </div>

Note the above function

<?php bloginfo('url'); ?>

Otherwise, the search might not work.

Summing-up

By now, we have we’ve converted our HTML template into the WordPress theme.

kak-natyanut-html-shablon-na-wordpress-tema-simplefactorial.png

We see that the search widget needs some style refining. But we’re not doing that now. I recommend connecting another search, for example, Google search, for which there are detailed manuals.

I wanted to show just the beginning of the theme conversion, but it’s already ready to work. We’ve created the most important pages and adapted them so WordPress could display them dynamically. You can make futher changes and improvements during the development of the site.

You can see that creating a theme from scratch or transferring static HTML to a WordPress theme is not a much-complicated process.

Write your comments. I’ll be happy to read them and answer them.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x
Scroll to Top