I created a simple design for showing team members with there image and linked with a modal (bootstrap 4). Its shows as following:

    <div class="col-lg-4 col-sm-6 text-center mb-4">
        <img class="rounded-circle img-fluid d-block mx-auto" src="<?php echo get_template_directory_uri(); ?>/images/bestuur/jonas.jpg"
        <p>Ik sta in voor.. "korte beschrijving"</p>
        <!-- Button trigger modal -->
        <button type="button" class="btn" style="background-color: red; color: #ffff;" data-toggle="modal"
            Meer info & contact

        <div class="modal fade" id="ModalJonas" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel"><i class="far fa-user-circle"></i> <strong>Jonas
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                    <div class="modal-body">

                        <p>Beshrijven van persoon/functie
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
                            has been the industry's standard dummy text ever since the 1500s, when an unknown
                            printer took a galley of type and scrambled it to make a type specimen book.
                        <div class=" text-left">
                            <p><i class="fas fa-phone"></i> 04 54 84 12</p>
                            <p><i class="far fa-envelope"></i> email@contact.me</p>
                            <p><i class="fas fa-map-marker-alt"></i> 8
                                <br> 8560 </p>


                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

Now the thing is, this takes allot of code. Is there away in wordpress to just enter value's like (name, description_small, description_large, img_patch, modalname.. etc) and than just use a php while lus to generate the content on my wordpress page? this makes is allot less messy + realy easy to add members to the page

I hope you understand what i'm trying to do, anny suggestions?


What you can do is to use a shortcode, for example, you can add them to your functions.php or create a plugin that does the same.

Check this guide, but keep in mind there is a lot of information about WordPress and shortcodes.

In the end, you will only have to call your shortcode wherever you want. Shortcodes can use attributes so you could end with something like this:

[memberThing description="yes"] //...
  • I looked in to it, and yes i can print something with attributes. But is it smart to add such a big pile of HTML inside the funtction + big text inside the attributes? Is there a way to lets say, link a .Json file to the page and make a while lus from the json file and store the team members info inside there? – Arno Ramon Aug 29 '18 at 20:23
  • That's another problem, how you handle your info, a JSON file sounds like a great idea, you can get the data from a JSON in the PHP function. BTW, it's not that big after all, most things are static, so I don't see much of a problem. – Castiblanco Aug 29 '18 at 20:47

This sounds like the perfect use case for a custom post type that you then use the loop to show each of those. That way you can add/edit/delete just like any other post. Just a thought.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.