I have a problem with a shortcode.
Check this theme out:
http://themeforest.net/item/elogix-responsive-business-wordpress-theme/full_screen_preview/1958520
Please navigate to "Shortcodes-> Toggle" and see the example.
I want to use the toogle function, however, i want to be able to use an image beside the title, like a symbol.
However, when i do this within wordpress, the title will not be shown, and the shortcode gets messed up.
The core code looks like this:
function minti_toggle( $atts, $content = null)
{
extract(shortcode_atts(array(
'title' => '',
), $atts));
return '<div class="toggle"><div class="title">'.$title.'<span></span></div><div class="inner"><div>'. do_shortcode($content) . '</div></div></div>';
}
add_shortcode('toggle', 'minti_toggle');
I am still new at PHP, so I cannot seem to see, where it limits me to only use letters within the title tag, and not an image file as well.
Best Regards
Patrick
Okay, so i figured out the problem, if anyone else needs this:
The problem was, when adding a tag, it would disrupt the title tag, and not display anything.
So i edited the code, so i could input another value, which would then be showed left to the title:
function minti_toggle($atts, $content = null)
{
extract(shortcode_atts(array(
'title' => '',
'image' => ''
), $atts));
return '<div class="toggle"><div class="title">'.$title.'<span style="float:left;margin-right:5%"><img width="22" height="22" src="'.$image.'" class="alignnone wp-image-157"></span></div><div class="inner"><div>'. do_shortcode($content) . '</div></div></div>';
}
add_shortcode('toggle', 'minti_toggle');
This code returns the code input for image. So the shortcode would be
If you want to be able to edit the code in a css file instead, just delete the style in the , and make a class for this in the style.css.
Hope this helps someone :)
For Setting background image in title.
Please make change in .css file of plugins.
.title{
background:url('imageurl');
background-repeat: no-repeat;
}
Related
When I view regular page from visual composer, it works fine like this:
http://vrshealth.com/qc2
Margins, backgrounds, etc are all working.
I needed to make a custom post type "quality-check" and am using archive-quality-check.php to display this and the vc-custom-xxxx styles are not loading for some reason:
http://dev-vrshealth.pantheonsite.io/quality-check/
I did some research and the only thing I could find is that page-specific VC styles don't work with Ajax-loaded pages. But it is not loaded through ajax.
Here is the relevant code from archive-quality-check.php which displays if you haven't already chosen a product lot # to display:
<?php if ($_SERVER['REQUEST_METHOD'] != 'POST'): ?>
<div class="col-xs-12 col-md-12" id="page-content">
<?php
$post_id4098 = get_post(4098);
$content = $post_id4098->post_content;
$content = apply_filters('the_content', $content);
$content = str_replace(']]>', ']]>', $content);
WPBMap::addAllMappedShortcodes();
echo do_shortcode($content);
?>
</div>
I feel like I must be missing something here, like a function to output metadata or some type of custom css, but I can't find any documentation which explains how.
Had the same problem.
Just insert this before echoing content.
get_post_meta( $id, '_wpb_shortcodes_custom_css', true )
Worked for me on latest WP and VC versions.
The answer that Laurent gave worked great for me! However I would suggest creating a function for it in your functions.php file. Maybe something like this:
function vc_custom_css($id) {
$shortcodes_custom_css = get_post_meta( $id, '_wpb_shortcodes_custom_css', true );
if ( ! empty( $shortcodes_custom_css ) ) {
echo '<style type="text/css">';
echo $shortcodes_custom_css;
echo '</style>';
}
}
Then you can just use vc_custom_css($yourPostID); whenever it is required.
Hi I had the same issues, so I have searched in the pluggin, and finaly this works for me :
$vcM = Vc_Manager::getInstance();
$vc = $vcM->vc();
$vc->addShortcodesCustomCss($pop_up_id);
The issue with vc-custom-xxxx styles described in this topic happening to me quite frequently, with various WordPress Themes.
I have tried an approach with function from the second answer. However there is still the issue, when loading page preview via "Preview changes" button. The style' meta data does not updated unless you manually re-save the page before viewing the preview.
The most correct answer was given by Pierre Mar, but I'd like to put a small note on it. You need to replace $pop_up_id with your current post id.
The final function would look like:
function vc_echo_custom_css($post_id) {
$vcM = Vc_Manager::getInstance();
$vc = $vcM->vc();
$vc->addShortcodesCustomCss($post_id);
}
Include it in your Child's theme functions.php file, and then you can call it from any template like:
vc_echo_custom_css(4098);
I'm trying to have a feature where users can change the background image of certain divs via the theme customizer. I've tried many different ways but can't seem to get it to work.
As of right now I have it to where I'm able to change the background of one div but not able to get more than that one.
Function.php file
function meraki_custom_background_cb() {
ob_start();
_custom_background_cb(); // Default handler
$style = ob_get_clean();
$style = str_replace( 'body.custom-background', '#featured-home-image', $style );
echo $style;
}
add_theme_support( 'custom-background',
array(
'wp-head-callback' => 'meraki_custom_background_cb',
'default-color' => '000000',
'default-image' => '%1$s/images/background.jpg',
)
);
header.php file
<style type="text/css" id="custom-background-css">
body.custom-background { background-color: #bdd96e; }
</style>
I'm pretty sure what this is doing is just replacing the string 'body.custom-background' with the ID #featured-homeimage', which works great, but only for one div.
Is there a way to make this possible for multiple divs? Thanks in advance for your help.
Working on a Wordpress site and where I need to have a post with php content.
I figured out that this is only possible with a plugin or a shortcode in the functions.php
Googled around, tried a lot but it isn't working out, so i definitely doing something wrong.
code I have in functions.php:
function anniversary_link($text) {
$url = the_permalink();
return "<a href='$url'>$text</a>";
}
add_shortcode('permalink', 'anniversary_link');
And the post I have:
and the result I get when clicking the link:
The shortcode has to reference to the single.php page and al the static code's references to the single.php page is just:
<?php the_permalink() ;?>
Is this te 'correct' way to use href on a post (is there a better/cleaner way to get this working)?
Edit
Updated my code thanks to nathan Edit edit: in functions.php
function anniversary_link( $atts ) {
$atts = shortcode_atts( array(
'text' => '',
), $atts, 'permalink' );
$url = get_permalink();
return '' . $atts['text'] . '';
}
add_shortcode('permalink', 'anniversary_link');
And how I use this short code inside a post (I think that I incorrectly use the shortcode):
Result:
Edit Edit
This is how I call the dynamic anniversary post:
<?php echo get_posts(array( 'category_name' => 'Anniversary' ))[0]->post_content ;?>
(inside the header)
solution thanks to nathan
Reading through the code you've posted I see three issues.
The way you're accessing the 'text' attribute.
The function you're using to get the permalink.
The way you're inserting your shortcode into your content.
Shortcode Attributes
The first parameter of a shortcode callback should be an array of attributes, not a single string. Naming your parameter $text has no bearing on the value and won't pull the text attribute of your shortcode.
Change the name of your parameter from $text to $atts and set a default value for the text attribute. Setting a default value is a good practice with shortcodes and can be done using the shortcode_atts() function.
Return vs. Output Functions
The second issue is your use of the_permalink(). the_permalink() doesn't return a permalink but outputs it directly instead. As such you can't assign it to a variable.
The new function
function anniversary_link( $atts ) {
// Set defaults where needed
$atts = shortcode_atts( array(
'text' => '',
), $atts, 'permalink' );
// Replace the_permalink().
// Given the level of simplicity it doesn't need it's own variable.
$url = get_permalink();
// Put together a new return statement.
// Various ways this could be formatted. I went with something clear and easy to understand.
return '' . $atts['text'] . '';
}
Usage
In your code you're using the shortcode inside the href attribute of a link. The shortcode returns a full link, not a URL, and therefore shouldn't be inside another a tag.
Example:
[permalink text="My Link Text"]
// Outputs My Link Text
I would like to customize the read-more link on my WordPress theme, however I would like it to be able to get the attributes sent in the read more tag.
So the <--more--> tag would return the default
While <--more Some Attribute --> would return Some Attribute.
I'm aware that I can edit the read more text with what's below. I just can't figure out how to get the attributes or vars that are passed to the more short-code. If I could figure this out I could simply check if it exists and if not then place in the default text.
function modify_read_more_link() {
return '<div class="read-more"><a class="more-link button" href="' . get_permalink() . '">Custom Read More Link Text</a></div>';
}
what customization you are trying to do ? what about changing the class or using that class use jquery and customize the div !!!
WordPress makes this technique easy, and customizable.
https://codex.wordpress.org/Customizing_the_Read_More
I found the answer to my problem.
Inside my function.php file I needed
function wrap_readmore($more_link) {
//Check if link contains default (more...), if it does replace with Read More
if (preg_match('(more…)', $more_link)) {
$more_link = str_replace('(more…)', 'Read More', $more_link);
}
return '<div class="small-12 columns text-center">' . $more_link . '</div>';
}
add_filter('the_content_more_link', 'wrap_readmore');
I have a Wordpress site that outputs content from individual blog posts with the_content()
Blog posts all consist of two things, a small gallery and some text:
<div class="gallery"><img></img>Blah Blah</div>
<p>Text</p>
<p>Text</p>
I'd like to split the gallery and the text and output the gallery in a div on the left and the text in a div on the right like this:
<div id="left">GALLERY CONTENT</div>
<div id="right">TEXT CONNTENT</div>
I have tried to do this with strip_tags(the_content(), '<p>') but this does not - it continues to output everything including the gallery.
What is the correct way to do this?
It is not really clear to me what you really want to do , and on to of it , you included some (very little ) source code from output, but to get a real shot at answering you need to include the relative code from the template file.
( And +1 for understanding alone that you should NOT TOUCH YOUR CORE FILES )
Anyhow, I suspect that you only want to disable the auto P generated by wordrpess , so try
remove_filter('the_content', 'wpautop');
(add to functions.php in theme.)
alternatively , you could use
add_filter('use_default_gallery_style', '__return_false');
Which will just "reset" the gallery styling .
or even filter your own gallery styles , which allows you to target them better.
add_filter( 'gallery_style', 'my_own_gallery_style', 99 );
function my_own_gallery_style() {
return "<div class='gallery'>"; // put your own
}
If it does not produce the right output for you, please include more specifics and / or more code .
There are of course more advanced ways to handle this , but Without more info it is difficult to target .
For example you can create your own gallery style by removing the original shortcode function, and then adding your own, but those are a bit more advanced techniques.
// deactivate WordPress function
remove_shortcode('gallery', 'gallery_shortcode');
// activate your own own function
add_shortcode('gallery', 'my_own_gallery_shortcode');
// the own renamed function
function my_own_gallery_shortcode($attr) {
...
}
Now on the other hand , If you want to "catch" some parts of 'the_content' and display it in a loop in a different manner , you can always use a different technique, like described HERE on another answer .
You are using the_content which displays the content instead of returning it.
Change your code to
strip_tags(get_the_content(), '<p>')
I had this exact same problem a while ago. Here's what I did (in single.php, which is where I had the problem):
if ( get_post_format() == 'gallery' ) :
$content = get_the_content();
$gallery_regex = '/\[gallery.*]/s'; //identify the [gallery] tags within the content
//get gallery code
$gallery = preg_match($gallery_regex, $content, $matches);
$gallery = $matches[0];
//remove gallery from content
add_filter('the_content', function($content){
$gallery_regex = '/\[gallery.*]\s*/s';
return preg_replace($gallery_regex, ' ', $content);
});
endif;
Basically, I used regex to remove the gallery tags from the content.
$gallery still contains the shortcode. We can't just randomly display it, or it'll actually show the shortcode. We need to execute it, which will show the output:
if ( get_post_format() == 'gallery' ) {
echo '<div id="left">'. do_shortcode($gallery) .'</div>';
}
Your content no longer contains the gallery, so you can do this:
<div id="right"><?php the_content(); ?></div>