“Post” is the default type of content in WordPress, and it has its own fields like “title, content, featured image,…”, but it is possible to create our own type, and add our own fields to it.
I’d use “React” to display the customized content, but WordPress offers a much quicker and easier way to work with it.
In this example I’ll share with the steps I followed to create a page to display some of my previous projects:
1- Create our own type
For this we will use the plugin Custom Post Type UI from WebDevStudios, and fill a simple form
and we get a new menu entry on our dashboard
2- Create our own group of fields
for this we will use Advanced Custom Fields from Elliot Condon. We have to create the group of the fields, and add the fields we need, filling simple forms:
Then assign this group of field to a particular post type:
3- Adding the Content of Our Custom Type
Under the “Projects” menu we add new “project”, and fill the custom fields we creaed before
4- The code
In WordPress, we can get post content with functions like
To display a custom field we will use this function
the_field( 'the_field_name' );
To filter our projects we will use WordPress class
The code, without the styling part, will be like this
<?php $args = array( 'post_type' => 'projects' ); $the_query = new WP_Query( $args ); if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?> <article id="post-<?php the_ID(); ?>" > <div class="..."> <div class="..."> <?php the_post_thumbnail(); ?> </div> <header class="..."> <h2 class="..."> <?php the_title(); ?> </h2> </header> <div><?php the_content(); ?></div> <div style="..."> <a href="<?php the_field( 'demo' ); ?>">Demo</a> </div> </div> </article> <?php endwhile; else: ?> <?php _e( 'Apologies, but no results were found.'); ?> <?php endif; ?>
5- Create a template for our page
- Create a file under the theme folder with the name “projects.php“.
- put the previous code with the styling part, you can download my code, from GitHub: here.
- Create a page and define our file as the template
- That’s it 🎉🎉🎉, you need just to add an entry link in the menu.
In real-life scenarios, we may need to store and display custom content on our websites or make a web application with the WordPress framework. Fortunately, we can do so, relatively easily and quickly, using some tools and techniques, like the ones I presented in this tutorial.