I am using a content block plugin which allows me to use content frequently as a shortcode. The content editor for the shortcode content blocks uses Visual Composer. When I use a created shortcode for a block on a page, most everything works fine except any custom css that is defined in the visual composer shortcode.
For example:
[vc_column_inner width="1/3" css=".vc_custom_1463660338922{background-image: url(/circlebg.png) !important;}”]
The custom css class is defined in the div created in the fronted source, but the definition does not appear in the header. This does work if I do this same process on the page itself without using a shortcode for the content. I believe this has something to do with functions.php. I've changed this function to the following (in bold), but still nothing is recognized :
if(!function_exists('qode_visual_composer_custom_shortcodce_css')){
function qode_visual_composer_custom_shortcodce_css(){
if(qode_visual_composer_installed()){
if(is_page() || is_single() || is_singular('portfolio_page') || is_singular('content_block')){
$shortcodes_custom_css = get_post_meta( qode_get_page_id(), '_wpb_shortcodes_custom_css', true );
if ( ! empty( $shortcodes_custom_css ) ) {
echo '<style type="text/css" data-type="vc_shortcodes-custom-css-'.qode_get_page_id().'">';
echo $shortcodes_custom_css;
echo '</style>';
}
$post_custom_css = get_post_meta( qode_get_page_id(), '_wpb_post_custom_css', true );
if ( ! empty( $post_custom_css ) ) {
echo '<style type="text/css" data-type="vc_custom-css-'.qode_get_page_id().'">';
echo $post_custom_css;
echo '</style>';
}
}
}
}
add_action('qode_visual_composer_custom_shortcodce_css', 'qode_visual_composer_custom_shortcodce_css');
}
Anyone come across this before?
Thank you!
I solved this using the parseShortcodeCustomCss method of the visual_composer class, it's the one used by Visual Composer itself to include the styles in the header or footer.
My solution:
$shortcodeContent = '[vc_column_inner width="1/3" css=".vc_custom_1463660338922{background-image:url(/circlebg.png)!important;}”]';
$shortcodes_custom_css = visual_composer()->parseShortcodesCustomCss( $shortcodeContent );
if ( ! empty( $shortcodes_custom_css ) ) {
$shortcodes_custom_css = strip_tags( $shortcodes_custom_css );
$output .= '<style type="text/css" data-type="vc_shortcodes-custom-css">';
$output .= $shortcodes_custom_css;
$output .= '</style>';
echo $output;
}
echo apply_filters( 'the_content', $shortcodeContent );
You can try this code:
Vc_Manager::getInstance()->vc()->addShortcodesCustomCss($page_id);
$the_post = get_post($page_id);
echo apply_filters('the_content', $the_post->post_content);
It works for me
Related
I want to modify my wp_head. I am using the Yoast plugin I want to add a new custom meta tag after the description meta tag. I try this code for add keyword tag but it's not shown after the description tag its shown in a lower position
this code
/*Display custom meta keywords or the post excerpt */
function add_custom_meta_key(){
#Single Page Meta Description
if( is_single() ){
$key = get_post_meta( get_the_id(), 'keywords', true);
if( ! empty( $key ) ){
$meta_key = esc_html($key);
echo '<meta name="keywords" content="' . $meta_key . '" />';
}
}}
add_action( 'wpseo_head', 'add_custom_meta_key', 2 );
hope you are having a wonderful day.
As far as I understand from your query and code, you are trying to add meta descriptions and meta keyword tag just one after another.
I think you should change the hook from wpseo_head to wpseo_metadesc
It will render the meta tags one after another.
I have added the code example below.
// Define the add_custom_meta_key callback
function add_custom_meta_key($wpseo_replace_vars)
{
if (is_single()) {
$key = get_post_meta(get_the_id(), 'keywords', true);
if (!empty($key)) {
$meta_key = esc_html($key);
echo '<meta name="keywords" content="' . $meta_key . '" />';
}
}
return $wpseo_replace_vars;
};
add_filter('wpseo_metadesc', 'add_custom_meta_key', 10, 1);
This code will provide the output shown in this image.
i have made my first custom plugin which displays image gallery through shortcode. currently images are displayed randomely. i want to display them in carousel style by the use of owl carousel.
i have tried by including css and js files of owl carousel in my custom plugin folder. may be my scripts and styles are not getting called.i need help how to add loop code in my custom code. please guide me step by step as i am beginers in custom plugin development.
this is meta from where gallery is getting fetched and scripts and styles are included, please have a look if its proper.
function gallery_metabox_enqueue($hook) {
if ( 'post.php' == $hook || 'post-new.php' == $hook ) {
wp_enqueue_script('gallery-metabox', plugin_dir_url( __FILE__ ) . '/js/gallery-metabox.js', array('jquery', 'jquery-ui-sortable'));
wp_enqueue_script('gallery-metabox', plugin_dir_url( __FILE__ ) . '/js/owl.carousel.min.js', array('jquery', 'jquery-ui-sortable'));
wp_enqueue_script('gallery-metabox', plugin_dir_url( __FILE__ ) .'/css/owl.css', array(), null, 'all' );
/*wp_enqueue_style( 'owl-carousel' );*/
wp_enqueue_style( 'owl.css', get_stylesheet_uri() );
}
}
add_action('admin_enqueue_scripts', 'gallery_metabox_enqueue');
-----------------------------------------------------------------------------
this is shortcode from where gallery will be displayed in page where shortcode is pasted.
add_shortcode( 'banners', 'display_banners' );
function display_banners($atts){
$meta = get_post_meta($atts['id'],'vdw_gallery_id', true);
?>
<div id="owl-demo" class="owl-carousels">
<?php
foreach ($meta as $key => $value) {
$attpost= get_post($value); // declare post variable
echo '<img class="items" src="'.$attpost->guid.'" />';
}
?>
</div>
<?php
extract(shortcode_atts(array('key' => 'vdw_gallery_id'), $atts));
if($key && array_key_exists($key, $meta)) {
return $meta[$key][0];
}
exit;
}
?>
You can replace with
from : wp_enqueue_script('gallery-metabox', plugin_dir_url( __FILE__ ) .'/css/owl.css', array(), null, 'all' );
/*wp_enqueue_style( 'owl-carousel' );*/
To : wp_enqueue_style('gallery-metabox', plugin_dir_url( __FILE__ ) .'/css/owl.css', array(), null, 'all' );
/*wp_enqueue_style( 'owl-carousel' );*/
And make sure that you are able to get css and js in source code (ctrl+u)
You can get image object using below code
$images = get_post_meta($post->ID, 'vdw_gallery_id', true);
foreach ($images as $image) {
$image_obj = get_post($image);
echo $image_obj->post_excerpt;
}
I am trying to be clever, but this is a bit beyond my abilities.
I have products with tags, these tags denote if something is environmentally friendly or not. Some of these tags are "biodegradable", compostable" and "recycled" for example.
If a product has these tags, I want to echo it on the front end.
I have the code to do this, and it is working as expected:
$current_tags = get_the_terms( get_the_ID(), 'product_tag' );
//only start if we have some tags
if ( $current_tags && ! is_wp_error( $current_tags ) ) {
//create a list to hold our tags
echo '<ul class="product_tags">';
//for each tag we create a list item
foreach ($current_tags as $tag) {
$tag_title = $tag->name; // tag name
echo '<li><img src="/img/tags/'.$tag_title.'.png"></li>';
}
echo '</ul>';
}
However, the only way to get this working is for me to edit content-single-product.php or single-product.php and place it in my theme in the woocommerce folder.
Is there a better way?
I'd like to control exactly where in the source order of that page it is displayed.
Figured it out. In functions.php:
/**
* Add test
*/
add_action( 'woocommerce_after_single_product_summary', 'tjobbetest', 5 );
function tjobbetest() {
$current_tags = get_the_terms( get_the_ID(), 'product_tag' );
//only start if we have some tags
if ( $current_tags && ! is_wp_error( $current_tags ) ) {
//create a list to hold our tags
echo '<ul class="product_tags">';
//for each tag we create a list item
foreach ($current_tags as $tag) {
$tag_title = $tag->name; // tag name
echo '<li><img src="/img/tags/'.$tag_title.'.png"></li>';
}
echo '</ul>';
}
}
Trying to remove the gallery shortcode from the post content and save in a variable for use elsewhere in the template. The new Wordpress gallery tool is great for selecting which images they want and assigning captions, hoping to use this to create the gallery, but then pull it out of the content on the front-end.
So this little snipped works just fine for removing the gallery and reapplying formatting... however I want to save that gallery shortcode.
$content = strip_shortcodes( get_the_content() );
$content = apply_filters('the_content', $content);
echo $content;
Hoping to save the shortcode so it can be parsed into an array and used to recreate a custom gallery setup on the front-end. An example of this shortcode I'm trying to save is...
[gallery ids="1079,1073,1074,1075,1078"]
Any suggestions would be greatly appreciated.
Function to grab First Gallery shortcode from post content:
// Return first gallery shortcode
function get_shortcode_gallery ( $post = 0 ) {
if ( $post = get_post($post) ) {
$post_gallery = get_post_gallery($post, false);
if ( ! empty($post_gallery) ) {
$shortcode = "[gallery";
foreach ( $post_gallery as $att => $val ) {
if ( $att !== 'src') {
if ( $att === 'size') $val = "full"; // Set custom attribute value
$shortcode .= " ". $att .'="'. $val .'"'; // Add attribute name and value ( attribute="value")
}
}
$shortcode .= "]";
return $shortcode;
}
}
}
// Example of how to use:
echo do_shortcode( get_shortcode_gallery() );
Function to delete First gallery shortcode from Post content:
// Deletes first gallery shortcode and returns content
function strip_shortcode_gallery( $content ) {
preg_match_all( '/'. get_shortcode_regex() .'/s', $content, $matches, PREG_SET_ORDER );
if ( ! empty( $matches ) ) {
foreach ( $matches as $shortcode ) {
if ( 'gallery' === $shortcode[2] ) {
$pos = strpos( $content, $shortcode[0] );
if ($pos !== false)
return substr_replace( $content, '', $pos, strlen($shortcode[0]) );
}
}
}
return $content;
}
// Example of how to use:
$content = strip_shortcode_gallery( get_the_content() ); // Delete first gallery shortcode from post content
$content = str_replace( ']]>', ']]>', apply_filters( 'the_content', $content ) ); // Apply filter to achieve the same output that the_content() returns
echo $content;
just use the get_shortcode_regex():
<?php
$pattern = get_shortcode_regex();
preg_match_all('/'.$pattern.'/s', $post->post_content, $shortcodes);
?>
that will return an array of all the shortcodes in your content, which you can then output wherever you feel, like so:
<?php
echo do_shortcode($shortcodes[0][1]);
?>
similarly, you could use the array entries to check for shortcodes in your content and remove them with str_replace():
<?php
$content = $post->post_content;
$content = str_replace($shortcodes[0][1],'',$content);
?>
Something like $gallery = do_shortcode('[gallery]'); might work.
I'm trying to get the following code to work:
if( is_home() ):
echo 'User is on the homepage.';
else:
echo 'User is not on the homepage';
endif;
If I place it in the themes header or footer then it works but if I place it in my plugin, it doesn't work. I've tried is_single() and is_page() too and they don't work inside the plugin. Any idea what the problem is?
is_home() and several other WP functions are not always defined, Try use a suitable hook to include your code. Example:
add_action('wp', 'check_home');
// or add_action('init', 'check_home');
function check_home($param)
{
if (is_home()):
echo 'User is on the homepage.';
else:
echo 'User is not on the homepage';
endif;
}
EDIT:
In any case, if you want to echo data use a hook inside the body tag. Example using the_content hook:
add_filter('the_content', 'check_home');
function check_home($content)
{
if (is_home())
$echo = 'User is on the homepage.';
else
$echo = 'User is not on the homepage';
return $echo . '<hr />' . $content;
}