Created
May 22, 2023 11:10
-
-
Save manishsongirkar/a338186d1e6bca500be9dd1999af5498 to your computer and use it in GitHub Desktop.
Toggle option below featured image to show/hide featured image on frontend
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/** | |
* Register post meta for featured image display. | |
*/ | |
function register_block_post_meta() { | |
register_post_meta( | |
'post', | |
'featuredImageDisplay', | |
[ | |
'show_in_rest' => true, | |
'single' => true, | |
'default' => true, | |
'type' => 'boolean', | |
'description' => __( 'Display toggle option to show/hide featured image.', 'text-domain' ), | |
] | |
); | |
} | |
add_action( 'init', 'register_block_post_meta' ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* WordPress dependencies | |
*/ | |
import { createElement, Fragment } from '@wordpress/element'; | |
import { ToggleControl } from '@wordpress/components'; | |
import { __ } from '@wordpress/i18n'; | |
import { useSelect } from '@wordpress/data'; | |
import { useEntityProp } from '@wordpress/core-data'; | |
function FeaturedImageToggleControl() { | |
const postType = useSelect( | |
( select ) => select( 'core/editor' ).getCurrentPostType(), | |
[], | |
); | |
const [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' ); | |
const metaFieldValue = meta.featuredImageDisplay; | |
const updateMetaValue = ( toggleValue ) => { | |
setMeta( { ...meta, featuredImageDisplay: toggleValue } ); | |
}; | |
if ( postType !== 'post' ) { | |
return ''; | |
} | |
return ( | |
<ToggleControl | |
label={ __( 'Display Featured Image?', 'text-domain' ) } | |
help={ __( 'Toggle visibility of featured image on single post', 'text-domain' ) } | |
checked={ !! metaFieldValue } | |
onChange={ updateMetaValue } | |
/> | |
); | |
} | |
/** | |
* Append new field to the featured image component. | |
* | |
* @param {*} OriginalComponent Original featured image component. | |
* | |
* @return {Object} Original component with extra meta field. | |
*/ | |
function wrapPostFeaturedImageDisplay( OriginalComponent ) { | |
return function( props ) { | |
return createElement( | |
Fragment, | |
{}, | |
'', | |
createElement( OriginalComponent, props ), | |
<FeaturedImageToggleControl />, | |
); | |
}; | |
} | |
wp.hooks.addFilter( | |
'editor.PostFeaturedImage', | |
'namespace/post-featured-image-display', | |
wrapPostFeaturedImageDisplay, | |
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
// Other single post code... | |
$featured_image_display = get_post_meta( get_the_ID(), 'featuredImageDisplay', true ); | |
if ( has_post_thumbnail() && $featured_image_display ) { | |
the_post_thumbnail( 'full' ); | |
} | |
// Other single post code... |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment