How to Create and Display Custom Content in WordPress?

“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:

https://aladinstudio.com/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 the_title(), the_content(), the_post_thumbnail(),…

To display a custom field we will use this function the_field( 'the_field_name' );

To filter our projects we will use WordPress class WP_Query.

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.

Conclusion

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.

A reminder:

  • You can download the code here.
  • See the Demo here.

Leave a Reply

Your email address will not be published. Required fields are marked *