How to Design and Code a Product Landing Page - Part 8

In part 8 of "How to Design and Code a Product Landing Page", I pick up where I left off after optimizing and creating dynamic menus for our theme and add some custom fields.

From here I begin styling our header and adding custom fields so our end user can easily update content.

Custom Fields

For our custom fields, I make use of Advanced Custom Fields which is an amazing plugin for WordPress in which you can find out more about here. This plugin makes creating custom fields incredibly easy than it once used to be.

I remember wrangling plenty of PHP code to get custom fields to display on the front end of the site. The ACF plugin presents itself in a very easy to understand and use interface which is way better than the custom field interface WordPress supports out of the box.

Going forward I walk you through how I utilize the plugin and add custom fields so that the corresponding page we are designing has logical fields for the end-user in mind. The whole idea is to make it easier to hand off to a client so any updates to content are simple. This saves the client time and money as well as your own time having to update a WordPress site when it's rather easy to do.

On top of custom fields, I begin to style our blue header area as well as add the logo (in SVG) and menu links.

The Series So Far

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