April 10, 2017
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.
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.