Struggling to create a custom post template

I'm having some trouble making a custom post template in Upfront.
My situation:
We're building a Wordpress intranet, and one of the features is an employee-submitted "thanks" section. I've made the form, which has custom fields for submitter name, submitter department, the person you're thanking, etc. I can see that all of those fields are collecting the metadata correctly in the WP CMS, but I can't get those fields to display in Upfront.
I've tried shortcode, WordPress template tags as both HTML and curly brackets, in various sections of the advanced box in post parts module.

  • Ken Kimbrell

    Hello John-

    The text widget inside upfront does support some shortcodes, however some shortcodes do not work. For example I created a custom post VIA Custom Post Type UI and then made a shortcode function:

    /** Display Custom Post Type in a loop.
    ===================================================== **/
    function wpmu_show_custom_post(){
    
        $args = array('post_type' => 'web_dev', 'post_per_page' => 10);
        $loop = new WP_Query($args);
        while($loop->have_posts() ) : $loop->the_post();
        the_title();
        echo'<div class="entry-content">';
        the_content();
        echo'</div>';
        endwhile;
    }
    //Use [custom_post] as the shortcode to call the function
    add_shortcode('custom_post', 'wpmu_show_custom_post');

    It did not work. However, it worked when I put the shortcode in the wordpress admin pages editor. You could still use the shortcode this way and customize it to your liking, and upfront would carry over the header and footer. However if you are trying to display a custom post type VIA the draggable text widget and inputting a shortcode, it will most likely not work.

    I was able to use this plugin:
    https://wordpress.org/plugins/display-posts-shortcode/

    to display the shortcode VIA the upfront editor. So this could be an option, you can also look into our Posts draggable widget as it does support custom post types.

    Let me know how I can help!

    Take Care,

    Ken - WPMU DEV Support

  • John

    Hi Ken, thanks for the reply.

    I think I was a little imprecise describing my issue. I have a custom post type called "thanks." It's created from a user submitted form, and contains a few custom fields. I've already added that post type to a page in the upfront editor with the posts draggable element. However, I can't change the post parts to display the custom fields I need, and even if I could I'm not sure how to format them how I need. For this post type, "title" etc. aren't really relevant.

    I've laid out a nifty post permalink template using a text box with shortcode -- the text box has shortcodes with a little default text between them, and displays exactly the message I'd like using the data from the form:

    text element: [name-1] [dept-1] would like to thank [name-2] [dept-2]:
    [post part content]

    It works just the way I'd like except that I don't really want them all alone, each on their own URL. I'd like to serve up a list of them on a single page. Is there a way to use the post draggable element to render a list of these posts, in that format, on a page using some combination of post parts and shortcode?

  • Ken Kimbrell

    Hello John-

    When using the text draggable widget, I was able to get a custom post type to appear with the shortcode, but it appears at the top of the header. See an image below:

    It also only displays just the shortcode in upfront editor.

    However, when I used the draggable widget, and selected the text widget within the dropdown, then placed my custom post_type shortcode, not only did it work, but it displayed in the upfront editor as well. Can you please try structuring your shortcode using the draggable widget's text field and see if you are able to achieve your desired results. See image below:

    Let me know if this helps!

    Take Care,

    Ken - WPMU DEV Support

  • John

    Thanks again for the reply, Ken. I'm not sure if I'm being unclear, or there's a problem with my terminology, but I feel like we're misunderstanding each other. I appreciate the testing that you've done, but it doesn't really address my problem. As I explained in my earlier post, I can already add the custom post type to a page just fine. The problem is displaying the custom fields.

    The posts are generated by a form. The form includes a couple custom fields. In the Wordpress back end it looks like this:

    I've gone to the permalink of an individual post, and taken out all of the meta data I don't need, and added a text box with the short codes for those custom fields arranged the way I'd like:

    and it outputs like this:

    This is exactly the information I want to display, organized exactly the way I'd like it! But it isn't helpful to style the custom post type permalink; I need the ten most recent posts of that type on a single page. Is there a way to add my 4 short codes that call up the custom fields and the bit of text that goes between them to the "posts" draggable element in lieu of the meta data that's available in post parts selector, and call up a series of posts styled exactly the way I've shown in my screenshot?

    To summarize: I can already display my custom post type. I know how I'd like to style my custom post type, and I've done it successfully on the post page, as pictured above, but I can't figure out how to carry this styling over to a list of posts.

  • James

    Hello John,
    I think Ken was headed in the right direction in his first reply. You want to create your own query and display it via a shortcode.

    First, let me answer your question "Is there a way to use the post draggable element to render a list of these posts, in that format, on a page using some combination of post parts and shortcode?" Short answer is no. The UpFront editor for draggable posts only allows you to edit the existing post meta data. Since you require some HTML content added to your post content you would need to render the content via a custom loop query and display it via a shortcode.

    To do this you would need to, as stated above, query the custom post type, loop through the X number of posts you want, display via a shortcode, and style to suit your needs via CSS. The key here is that you are looking for the custom post meta and additional html content.

    Please take a look at the below code for an example. You would need to add this code to your functions.php file in your theme folder. I hope this helps!

    //replace "thank_yous" with the name of your custom post type
    
    function get_custom_posts_with_meta(){
    //define arguments such as number of posts, and post type
     $args = array('post_type' => 'thank_yous', 'post_per_page' => 10);
    
    //create the list by looping through each post
        $loop = new WP_Query($args);
    
    //Now the fun stuff. Display your custom post meta the way you want.
        while ( $loop->have_posts() ) : $loop->the_post();?>
    
    		<div class="whatever_class_you_define">
                       <?php echo esc_html( get_post_meta( get_the_ID(), 'usp_author', true ) ); ?>
    		          would like to thank
    		           <?php echo esc_html( get_post_meta( get_the_ID(), 'usp_customer', true ) ); ?>
                    </div>
     		<div class="whatever_class_you_define">
                       Thank you for updating the documents
                    </div>
    //Display the categories
    	<?php
    	$terms = get_the_terms( $post->ID, 'your_categories' );
    	if ( $terms && ! is_wp_error( $terms ) ) :
        		$taxonomies = array();
        		foreach ( $terms as $term ) {
            		$taxonomies[] = $term->name;
        		}
    
        		$taxonomies = implode(" | ", $taxonomies );
        	?>
        	<p class="whatever_class_you_define">
            	<span><?php echo $taxonomies; ?> </span>
        	</p>
    	<?php endif; ?>
        <?php endwhile; ?>
    }
    
    }
    
    //Add the shortcode. To display add a text widget to page you want with shortcode [my_custom_posts]
    add_shortcode('my_custom_posts', 'get_custom_posts_with_meta');
  • Ken Kimbrell

    Hello John-

    Yes as james mentioned above, it is best to query your own custom post and style it to your liking then just apply the shortcode that the custom function creates. Using Jame's example, I refactored his code slightly to give you an example of a way you could style it. See code below:

    //replace "thank_yous" with the name of your custom post type
    function get_custom_posts_with_meta(){
    
    //define arguments such as number of posts, and post type
    $args = array('post_type' => 'thank_yous', 'post_per_page' => 10);
    
    //create the list by looping through each post
    $loop = new WP_Query($args);
    
    //Now the fun stuff. Display your custom post meta the way you want.
        while ( $loop->have_posts() ) : $loop->the_post();
    
            global $post;
            $usp_author     = esc_html( get_post_meta( get_the_ID(), 'usp_author', true ) );
            $usp_custom_1   = esc_html( get_post_meta( get_the_ID(), 'usp-custom-1', true ) );
            $usp_custom_2   = esc_html( get_post_meta( get_the_ID(), 'usp_custom-2', true ) );
            $usp_custom_3   = esc_html( get_post_meta( get_the_ID(), 'usp_custom-3', true ) );
    
    	echo "<div class='whatever_class_you_define'>";
            echo "{$usp_author} ({$usp_custom_1}) would like to thank {$usp_custom_2} {$usp_custom_3}";
            echo "</div>";
     	echo "<div class='whatever_class_you_define'>";
            echo "Thank you for updating the documents";
            echo "</div>";
    //Display the categories
    	$terms = get_the_terms( $post->ID, 'your_categories' );
    	if ( $terms && ! is_wp_error( $terms ) ){
        		$taxonomies = array();
        		foreach ( $terms as $term ) {
            		$taxonomies[] = $term->name;
        		}
    
        		$taxonomies = implode(" | ", $taxonomies );
        	echo "<p class='whatever_class_you_define'>";
            echo "<span>{$taxonomies}</span>";
        	echo "</p>";
        }
        endwhile;
    }
    //add [custom_post] to query your custom post
    add_shortcode('custom_post', 'get_custom_posts_with_meta');

    You would want to apply the custom function in your child theme's functions.php to prevent your files from being overwritten, should you decide to update your theme in the future. Then you will place [custom_post] shortcode where you would like to query the custom post.

    Let me know if this helps!

    Take Care,

    Ken - WPMU DEV Support