How to Code HTML to WordPress - Part 7

Continuing on from Part 6 of my How to Code HTML to WordPress screencast series I begin to make the final push to my the HTML theme fully implemented with WordPress.

Two Sections to Go

In this video, I tackle two sections of the design. A review section is up first where a simple background image, heading, and review text is wired up to our home page using the Advanced Custom Fields plugin.

The final section before the footer features a contact form. For this form and for my own sanity I made use of a plugin called Ninja Forms. I really like this plugin over many others out there. The interface you interact with when creating new forms is pretty gratifying compared to others. Being a designer I appreciate that extra attention to detail.

Ninja Forms

Using Ninja Forms you can create forms to use throughout your site. I include a form on the page by defining a custom field and then propagating it with a shortcode generated from the plugin inside the HTML theme we are converting to WordPress.

From there you simply echo that variable out inside your template like so:

<?php echo do_shortcode($myformshortcodevariable); ?>

After I got the form set up I went ahead and did my best to match the styles of our original HTML template. By default, the form plugin introduces new HTML into the mix so I needed to modify our styles slightly to achieve the same result.

Want to follow along? Download the code

How to Code HTML to WordPress - Start
How to Code HTML to WordPress - End

The Series So Far

• Introduction
• Part 1
• Part 2
• Part 3
• Part 4
• Part 5
• Part 6