Support » Developing with WordPress » Meta-box for pages

  • Hello!
    My question can be a duplicate or can sound silly, but I am desperate in creating meta-boxes for wordpress pages.
    I found that it is possbile with add_meta_box and that it is required to set screen as ‘page’. In that case metabox tab appears and further is is possbile to write code for required fields.
    My problem is I cannot find a way on how to show input on the exact page where I put it, I mean how to render it to the front end.
    I`ve been searching for a solution for 4 days and found a huge number of tutorials for metaboxes but for posts or cutom posts, not for pages.
    Therefore, changing screen from ‘post’ to ‘page’ in add_meta_box function is obviously not enough and I do really need your help.
    PS. I know the easy way is to use a plugin like Advanced Custom Fields, but I need to learn how to do it without plugins.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Hi, ekheria,

    When you create a meta box on post types like post or page then normally the value gets stored in post meta table. So to render it on frontend you just need to get it through get_post_meta function and have to echo it.

    Please have a look at this link: https://developer.wordpress.org/reference/functions/get_post_meta/

    Hopefully, this will help you.

    Thanks

    Subrata Sarkar

    (@subrataemfluence)

    Like @prashantvatsh said, its fairly easy. No need to do anything fancy. I am only trying to give you an example. But you should refer the tutorial anyways for a better understanding about how it works.

    Inside your front-end form you just create the input using simple HTML markup and in the value attribute just echo it like
    <input type="text" id="text_input" name="text_input" value="<?php echo get_post_meta( $post->ID, 'your_meta_field_name', true ); ?>" />

    Remember, $post->ID is required. So, you need to have a $post object created before you actually can output the meta value for that post.

    The value true for the last parameter makes sure that you get the single value. Default is false.

    Hi!
    Thanks very much for the explanation!
    One clarification: by “you need to have a $post object created” – what is meant by post object? If I need to put it on a page than a page can be considered as object here?
    A code that I use for output looks like this:

    function show_your_fields_meta_box() {
    	global $post;  
    		$meta = get_post_meta( $post->ID, 'your_fields', true ); ?>
    
    	<input type="hidden" name="your_meta_box_nonce" value="<?php echo wp_create_nonce( basename(__FILE__) ); ?>">
    
        <!-- All fields will go here -->
        <p>
    	<label for="your_fields[text]">Input Text</label>
    	<br>
    	<input type="text" name="your_fields[text]" id="your_fields[text]" class="regular-text" value="<?php echo $meta['text']; ?>">
    </p>
    <p>
    	<label for="your_fields[textarea]">Textarea</label>
    	<br>
    	<textarea name="your_fields[textarea]" id="your_fields[textarea]" rows="5" cols="30" style="width:500px;"><?php echo $meta['textarea']; ?></textarea>
    </p>
    
    	<?php }

    Please follow the link https://developer.wordpress.org/reference/functions/add_meta_box/#comment-343

    Expand the source code and see how a meta box is created and data is saved. Here you can see that update_post_meta( $post_id, '_my_meta_value_key', $mydata ); is done which is to save the data and to get the data $value = get_post_meta( $post->ID, '_my_meta_value_key', true ); this is done.

    So just like this if you want to show the same data on front-end just write the code
    $value = get_post_meta( $post->ID, '_my_meta_value_key', true ); echo $value;
    in the template file and you will see your value there.

    Remember that you need meta box on page so remove post from this code $post_types = array( 'post', 'page' ); and one more thing this ‘_my_meta_value_key’ is the key where data is stored in post meta table you can change it as per your choice but the same name should be used in saving as well as rendering the value.

    Hope, this will help you.

    Thanks

    Hello, everyone!
    You really helped me and I solved my problem thanks to you.

    But now, I have a bit more tricky problem:
    I need a metabox for one exact page only. The code I use here to add a metabox is pretty simple:

    function custom_meta_boxes(){
        add_meta_box('custom_meta_1', 'About Us Main field','custom_meta_boxes_render', 
            'page','normal','high','');
    }

    If you look on the 4th parameter – ‘page’, this puts metabox on every page, so that I see it and can use it for every page I created when editing it. And I need to see it on about us page only (for example). I`ve seen in some tutorials that instead of ‘page’ you can use an ID or a slug of page, but that did not work for me. Therefore, I really need your help/advice on that.

    Thanks a lot in advance.

    • This reply was modified 1 year, 3 months ago by ekheria.
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Meta-box for pages’ is closed to new replies.