March 27, 2017
•Last updated November 5, 2023
How to Code HTML to WordPress - Part 5
Part 5 continues my series titled "How to Code HTML to WordPress". In this video, we make custom post types, categories, and custom fields that tie together to create the menu of the design.
Adding a Custom Post Type
The static code quickly becomes dynamic after I create a custom post type in WordPress called Meals
. With this custom post type, I'm able to mimic traditional posts on a blog post for instance.
Inside the theme, I use the wp_query
class to query the database for the post type I created. From there I display the content based on the category name. What seems like a complicated mess is actually rather simple. I repeat a lot of code that I'm not a huge fan of but I'm able to output each menu item within its corresponding category.
Towards the end of the video, I add a custom field to the mix to indicate if a specific meal is special or not. The site admin is able to conditionally select if the menu item is indeed a special from the WordPress admin. This feature eliminates the need for a developer or someone familiar with the code to have to go back and manually make the change on a per case basis.
Useful Links:
- Mastering Custom Post Types
- WordPress Codex Class Reference/ WP Query
- WP_Query Generator
- Post Type Generator
Want to follow along? Download the code
HTML to WP - Start
HTML to WP - End
The Series So Far
Categories
Collection
Part of the How to Code HTML to WordPress collection
Products and courses
-
Hello Hotwire
A course on Hotwire + Ruby on Rails.
-
Hello Rails
A course for newcomers to Ruby on Rails.
-
Rails UI
UI templates and components for Rails.