I have created a super simple theme. What i want to have is the ability to define an array of 3 fields for each post and page.
For example having the fields: Name, Link and a Dropdown for Type
Additionally i want to add multiple items of these "field sets" per post/page. I couldn't find any documentation on this but always results in Google which led me to WP Plugins. In general this is ood, cause in this case this seems to be possible programmatically, but bad cause i couldn't find any kind of information on this.
Hopefully someone can help me.
You are looking for custom meta boxes, with the add_meta_box() function:
Adds a meta box to one or more screens.
Source # https://developer.wordpress.org/reference/functions/add_meta_box/
And the add_meta_boxes action hook.
Fires after all built-in meta boxes have been added:
Source # https://developer.wordpress.org/reference/hooks/add_meta_boxes/
A simple example would be if we wanted to add a "Listening to..." custom meta box, to share our mood while writing a post.
<?php
add_action( 'add_meta_boxes', 'add_meta_listening_to' );
function add_meta_listening_to() {
add_meta_box(
'meta_listening_to', //id
'Listening to ...', //title
'listeningto', //callback
'post', //screen &/or post type
'normal', //context
'high', //priority
null //callback_args
);
};
function listeningto( $post ) { //function handle same as callback
$ListeningToInput = get_post_meta( $post->ID, 'ListeningToInput', true );
echo '<input name="listening_to_input" type="text" placeholder="Listening to ..." value="'. $ListeningToInput .'" style="width:100%;">';
};
add_action( 'save_post', 'save_meta_listening_to' );
function save_meta_listening_to( $post_ID ) {
if ( isset( $_POST[ 'listening_to_input' ] ) ) {
update_post_meta( $post_ID, 'ListeningToInput', esc_html( $_POST[ 'listening_to_input' ] ) );
};
}; ?>
Then to display on the front end, we would use the following:
<?php echo get_post_meta( $post->ID, 'ListeningToInput', true ); ?>
Learn more
Learn more about the Custom Meta Boxes # https://developer.wordpress.org/plugins/metadata/custom-meta-boxes/
Related
First I would like to analyze my problem. Using Wordpress/Woocommerce I need to add videos beside images in the gallery of the product. Woocommerce does not support videos at all.
So, I thought to install an extra gallery plugin that supports both images and videos.
Now, I want to map a specific image/video gallery collection to a specific product. I want also to view this gallery collection in a new region that is not belong to the standard text fields like description or short description. Lets say above of the main product image. The php code that represent the gallery collection id=1 looks like below :
<?php echo do_shortcode('[wonderplugin_gallery id="1"]'); ?>
The problem is that I need the gallery collection id to be variable, something like this :
<?php echo do_shortcode('[wonderplugin_gallery id="X"]'); ?>
where X represnt the specific gallery collection. How the heck can I connect the gallery collection ID XXXX to my Product page XXXXX?
I have programming skills but I am new to the wordpress code logic.
Any other suggestions to my problem like plugins that may replace the default product gallery with better one ?
Regards,
I'd either use the product custom fields as Anand suggested, or create a metabox with the necessary input fields (or dropdowns depending on how you use the gallery plugin).
First I'd create a metabox, and in that metabox I'd pull the info from the plugin (gallery id's and names). Out of that you can create a dropdown. You should be able to select the id from that metabox for each product like you suggested. For instance something like this could work:
<?php
if ( ! function_exists( 'product_add_meta' ) ){
function product_add_meta(){
add_meta_box("gallery_dropdown", "Select Gallery", "product_gallery_meta_box", "product");
}
}
add_action("admin_init", "product_add_meta");
if ( ! function_exists( 'product_gallery_meta_box' ) ){
function product_gallery_meta_box( $post ){
$post_types = array('product'); //limit meta box to certain post types
global $post;
$product = get_product( $post->ID );
$values = get_post_custom( $post->ID );
$gallery = (isset($values['gallery'][0])) ? $values['gallery'][0] : '';
wp_nonce_field( 'my_meta_box_nonce', 'meta_box_nonce' );
?>
<p>
<select name="gallery" id="gallery">
//example of how the option should look
<option value="<?php echo $gallery_id; ?>" <?php selected( $gallery, $gallery_id ); ?>><?php echo $gallery_name; ?></option>
<?php
//pull options from plugin here and create an option dropdown with foreach
?>
</select>
</p>
<?php
}
}
if ( ! function_exists( 'product_gallery_save_meta_box' ) ){
function product_gallery_save_meta_box( $post_id ){
if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ){
return;
}
if( !isset( $_POST['gallery'] ) || !wp_verify_nonce( $_POST['meta_box_nonce'], 'my_meta_box_nonce' ) ) {
return;
}
if( !current_user_can( 'edit_pages' ) ) {
return;
}
if( isset( $_POST['gallery'] ) ){
update_post_meta( $post_id, 'gallery', wp_kses( $_POST['gallery'] ,'') );
}
}
}
add_action( 'save_post', 'product_gallery_save_meta_box' );
If you put this in the functions.php, it should show a metabox called 'Select Gallery' with an empty dropdown on your woocommerce product page.
I haven't filled the options that you get from the plugin with which you create your galleries, but it shouldn't be too hard.
One way is to bind the product page id and gallery id. If you can change the id of a gallery then change it to match the id of the product page. Now you can create shortcode with any of these two examples.
// outside the loop use global ( uncomment appropriate statement )
// global $product;
// global $post;
do_shortcode( sprintf( '[wonderplugin_gallery id="%d"]', $product->id ) );
do_shortcode( sprintf( '[wonderplugin_gallery id="%d"]', $post->ID ) );
HERE is a link for plugin that reveals most of the IDs on admin pages.
Another is to create Custom Field ( post meta ) in edit product admin page ( named gallery_id for example ), and to save there id of the gallery to use. To create shortcode use get_post_meta() function that retrieves the saved post meta.
do_shortcode( sprintf( '[wonderplugin_gallery id="%d"]', get_post_meta( $post->ID, 'gallery_id', true ) ) );
To get the gallery id meta use $post->ID, $product->id, or get_the_ID() function, the latter only inside the loop.
on my baked goods site, I have WooCommerce installed and another plugin called Order Delivery Date for WooCommerce.
I installed the second plugin so my customers would be able to choose a delivery date for their items, however, I am trying to make the form field a required field. So far, I've just been able to make the field look like a required field, but have not figured out how to make sure that it is actually enforced. Any ideas?
Also, if anyone is familiar with WooCommerce, do you know how I would be able to make it so that customers receive this delivery date information in their order confirmation emails?
Thank you in advance!
My site: www.monpetitfour.com
You should try to had something like that :
add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process');
function my_custom_checkout_field_process() {
// You can make your own control here
if ( ! $_POST[ 'e_deliverydate' ] )
wc_add_notice( __( 'Please select a delivery date' ), 'error' );
}
For the email, the easiest is to save the meta value ( I think it's already done by your plugin). Then you need to copy the template email (customer-processing-order.php) on your theme and change in the template :
<?php $delivery_date = get_post_meta( $order->id, 'custom_field_date', true);
// If the plugin is well developed, you can't directly use magic getters :
// $delivery_date = $order->e_deliverydate;
// Can only by use if the post meta start with _
?>
Your delivery date is <?php echo $delivery_date ?>
You can also use
date_i18n( woocommerce_date_format(), strtotime( $delivery_date ) );
In order to format the date correctly.
On the code above, you just need to find the name of the custom field used by the plugin ( you can search easily on the table wp_postmeta searching by an existing order (should be _e_deliverydate).
Add the following code to your theme's functions.php file
add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process');
function my_custom_checkout_field_process() {
// Check if set, if its not set add an error.
if ( ! $_POST['e_deliverydate'] )
wc_add_notice( __( 'Please select a delivery date.' ), 'error' );
}
Now to get the email to show the custom field,
add_filter('woocommerce_email_order_meta_keys', 'my_woocommerce_email_order_meta_keys');
function my_woocommerce_email_order_meta_keys( $keys ) {
$keys['Delivery Date'] = '_e_deliverydate';
return $keys;
}
EDIT : Seems the field value isn't being saved to the database, try saving it explicitly
add_action( 'woocommerce_checkout_update_order_meta', 'my_custom_checkout_field_update_order_meta' );
function my_custom_checkout_field_update_order_meta( $order_id ) {
if ( ! empty( $_POST['e_deliverydate'] ) ) {
update_post_meta( $order_id, '_e_deliverydate', sanitize_text_field( $_POST['e_deliverydate'] ) );
}
}
I've created a meta box. The code is:
// Create your custom meta box
add_action( 'add_meta_boxes', 'hotel_amenities' );
// Add a custom meta box to a post
function hotel_amenities( $post ) {
add_meta_box(
'Meta Box Amenities', // ID, should be a string
'Amenities', // Meta Box Title
'amenities_content', // Your call back function, this is where your form field will go
'post', // The post type you want this to show up on, can be post, page, or custom post type
'normal', // The placement of your meta box, can be normal or side
'high' // The priority in which this will be displayed
);
}
// Content for the custom meta box
function amenities_content( $post ) {
echo '<label>Bed room</label>';
echo '<input type="text" name="amenity_bed_room" value="" />';
}
// Save your meta box content
add_action( 'save_post', 'save_amenities' );
// save newsletter content
function save_amenities(){
global $post;
// Get our form field
if( $_POST ) :
$amenities_meta = esc_attr( $_POST['amenity_bed_room'] );
// Update post meta
update_post_meta($post->ID, '_amenities_custom_meta', $amenities_meta);
endif;
}
It shows a meta box on admin post page with a text field. but it gets blank if I save or update the post after I put some thing on the text field.
Seems function save_amenities() is not working. What I am doing wrong in this code?
Also for getting that value I use the function below. Is that correct?
//get amenities meta box values
function get_amenities_meta_box() {
global $post;
$meta_values = get_post_meta($post->ID, '_amenities_custom_meta', true);
}
There are a few things going wrong there. The final value that you want to see will be displayed by the value attribute in the amenities_content function. Right now it is just displaying an empty string (""). Try putting any value in that attribute and you should see it show up in the meta box (value="this is a test").
The save_amenities function should take $post_id as a parameter. You'll need that to update the post meta-data and give a real value for the amenities_content function to echo back to the admin screen.
The amenities_content function should really have a nonce field that should then be verified by the save_amenities function. And user input should be sanitized before it is saved (I'm doing it both when I save it and when I display it. I'm not sure if that's necessary.)
try this out for the amenities_content function:
function amenities_content( $post ) {
// This is the value that was saved in the save_amenities function
$bed_room = get_post_meta( $post->ID, '_amenity_bed_room', true );
wp_nonce_field( 'save_amenity', 'amenity_nonce' );
echo '<label>Bed room</label>';
echo '<input type="text" name="amenity_bed_room"
value="' . sanitize_text_field( $bed_room ) . '" />';
}
and this for the save_amenities function:
function save_amenities( $post_id ) {
// Check if nonce is set
if ( ! isset( $_POST['amenity_nonce'] ) ) {
return $post_id;
}
if ( ! wp_verify_nonce( $_POST['amenity_nonce'], 'save_amenity' ) ) {
return $post_id;
}
// Check that the logged in user has permission to edit this post
if ( ! current_user_can( 'edit_post' ) ) {
return $post_id;
}
$bed_room = sanitize_text_field( $_POST['amenity_bed_room'] );
update_post_meta( $post_id, '_amenity_bed_room', $bed_room );
}
i'm trying to learn the way for uploading image file through custom field but cant get the easiest code to do it. i just done a bit here:
add_action('admin_init', 'create_image_box');
function create_image_box() {
add_meta_box( 'meta-box-id', 'Image Field', 'display_image_box', 'post', 'normal', 'high' );
}
//Display the image_box
function display_image_box() {
global $post;
$image_id = get_post_meta($post->ID,'xxxx_image', true);
echo 'Upload an image: <input type="file" name="xxxx_image" id="xxxx_image" />';
// Upload done: show it now...(as thmbnail or 60 x 50)
anybody please take me to next step and show the way to display the image in blog page too.
Lets go Stepwise here:
Create custom field Meta Box for inserting Image Url in post type => post.
Update/Save the custom field value in back end.
Display the custom field value in front end.
Seeing your code it seems that you are missing #2. Try the code below to save custom field:
function save_joe_details($post_id){
global $post;
if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE )
return $post_id;
update_post_meta($post->ID, "custom_field_image", $_POST["custom_field_image"] );
}
add_action('save_post', 'save_joe_details');
Code for #3 that displaying the custom field will be:
<?php global $post;
$custom_image = get_post_custom($post->ID); ?>
<img src="<?php echo $custom_image["custom_field_image"][0] ?>" />
you could try wrap it in wp_get_attachment_url like this:-
wp_get_attachment_url( $custom_image["custom_field_image"][0] );
I wanted to create a plugin to batch manage posts' custom field data. I know I can add post meta by adding a meta box in the post edit screen and using add_action('save_post', 'function_to_update_meta') to trigger add meta functions.
But I don't know how to trigger the add_post_meta function in an admin menu page (such as a custom admin menu). How to do that?
Thank you in advance!
The example given in Wordpress' codex is probably the best and most secure in the way of processing information:
Add Meta Box
Copy and paste it and then fiddle around with it to get a good idea on how to control your posts and pages.
The nice part is that you don't need to worry about checking if you need to Add vs Update a given Post Meta field. Using Update Post Meta will ensure that the proper action is taken for you, even if the field doesn't exist.
The same goes for Update Option if you want to add some global controls that your plugin/theme might use.
BREAKDOWN EXAMPLE:
add_action( 'add_meta_boxes', 'myplugin_add_custom_box' );
add_action( 'save_post', 'myplugin_save_postdata' );
These are the action hooks. The first one is executed when meta boxes are being populated within the post editor, and the second is executed when a post is added OR updated.
function myplugin_add_custom_box()
{
add_meta_box(
'myplugin_sectionid',
__( 'My Post Section Title', 'myplugin_textdomain' ),
'myplugin_inner_custom_box',
'post'
);
add_meta_box(
'myplugin_sectionid',
__( 'My Post Section Title', 'myplugin_textdomain' ),
'myplugin_inner_custom_box',
'page'
);
}
This function is called by the 'add_meta_boxes' action hook. Notice the name of the function and the second argument of the action hook are exactly the same. This registers your meta boxes, which post types they're supposed to appear, and what callback is used to generate the form contained inside.
function myplugin_inner_custom_box( $post )
{
wp_nonce_field( plugin_basename( __FILE__ ), 'myplugin_noncename' );
$value = get_post_meta($post->ID, 'myplugin_new_field') ? get_post_meta($post->ID, 'myplugin_new_field') : 'New Field';
echo '<label for="myplugin_new_field">';
_e("Description for this field", 'myplugin_textdomain' );
echo '</label> ';
echo '<input type="text" id="myplugin_new_field" name="myplugin_new_field" value="'.$value.'" size="25" />';
}
This is the function that is called by the registered meta boxes to generate the form automatically. Notice how the function is called 'myplugin_inner_custom_box' and the 3rd argument in your meta box registration is also called 'myplugin_inner_custom_box'.
The wp_nonce_field() generates a hidden field in your form to verify that data being sent to the form actually came from Wordpress, and can also be used to end the function in case other plugins are using the 'save_post' action hook.
Notice also that the $post object is being passed in as an argument. This will allow you to use certain properties from the post object. I've taken the liberty of checking to see if there is get_post_meta() returns anything with the given post ID. If so, the field is filled with that value. If not, it is filled with 'New Field'.
function myplugin_save_postdata( $post_id )
{
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
return;
if ( !wp_verify_nonce( $_POST['myplugin_noncename'], plugin_basename( __FILE__ ) ) )
return;
if ( 'page' == $_POST['post_type'] )
{
if ( !current_user_can( 'edit_page', $post_id ) )
return;
}
else
{
if ( !current_user_can( 'edit_post', $post_id ) )
return;
}
$mydata = $_POST['myplugin_new_field'];
update_post_meta($post_id, 'myplugin_new_field', $mydata);
}
This is the function that is called by the 'save_post' action hook. Notice how the second argument of the second action hook and this function are both called 'myplugin_save_postdata'. First, there are a series of verifications our plugin must pass before it can actually save any data.
First, we don't want our meta boxes to update every time the given post is auto-updating. If the post is auto-updating, cancel the process.
Secondly, we want to make sure the nonce data is available and verify it. If no nonce data is available or is not verified, cancel the process.
Thirdly, we want to make sure the given user has the edit_page permission. The function first checks the post type, and then checks the appropriate permission. If the user does not have that permission, cancel the process.
Lastly, our plugin has finally been verified and we want to save the information. I took the liberty of adding in the final update_post_meta() line to show you how it all comes together.
Notice how $post_id was passed into the function as an argument. This is one of the pieces needed for the update_post_meta() function. The key was named 'myplugin_new_field' and the value of that metadata is now saved as whatever you input into that custom input field in your custom meta box.
That's about as easy as I can explain the whole process. Just study it, and get your hands dirty with code. The best way to learn is through application rather than theory.
The answer was from the same question I asked somewhere else
And I created my version of example
I added some console.log function for testing, but this is basically doning the same thing as #Chris_() answer:
Menu callback function to generate menu content (PHP):
function ajax_menu_callback() {
?>
<div class="wrap">
<div id="icon-themes" class="icon32"></div>
<h2>Test</h2>
<br />
<form>
<input id="meta" type ="text" name="1" value="<?php echo esc_html( get_post_meta( 1, 'your_key', true) ); ?>" />
<?php submit_button(); ?>
</form>
</div>
<?php
}
Then the javascript to print on the admin side (javascript, don't forget to include a jquery library):
jQuery(document).ready(function() {
$("form").submit(function() {
console.log('Submit Function');
var postMeta = $('input[name="1"]').val();
console.log(postMeta);
var postID = 1;
var button = $('input[type="submit"]');
button.val('saving......');
$.ajax({
data: {action: "update_meta", post_id: postID, post_meta: postMeta, },
type: 'POST',
url: ajaxurl,
success: function( response ) { console.log('Well Done and got this from sever: ' + response); }
}); // end of ajax()
return false;
}); // end of document.ready
}); // end of form.submit
Then the PHP function handle update_post_meta (PHP):
add_action( 'wp_ajax_update_meta', 'my_ajax_callback' );
function my_ajax_callback() {
$post_id = $_POST['post_id'];
$post_meta = $_POST['post_meta'];
update_post_meta( $post_id, 'your_key', $post_meta );
echo 'Meta Updated';
die();
} // end of my_ajax_callback()