I was wondering if I can use two short codes in 1. I know you can replace variables in shortcodes but what I'm looking for is to use a shortcode say [apple] which will provide a link to the link I give in the shortcode but then if I want an icon next to that link be able to use [apple icon] which than provide a link with the icon to the left of it.
add_shortcode('apple', 'apple');
function apple()
{
return '<a href="http://example.com/apple>Apple</a>';
}
So is it possible to add icon to where if we add icon to the short code it will also return an image too which I would specify in the shortcode.
You will want to use attributes.
add_shortcode( 'apple', 'apple' );
function apple( $atts, $content = null )
{
extract( shortcode_atts( array( 'icon' => 'false'), $atts ) );
if($icon == 'true'){
$output = '<img src="apple.png" />';
}
$output .= 'Apple';
return $output;
}
You would then call it like
[apple icon="true"]
Here is the documentation https://codex.wordpress.org/Function_Reference/add_shortcode
If I understand your question correctly you shouldn't need to create a shortcode in a shortcode. The shortcode is already executing within your plugin/functions so you should be able to simply invoke your function (or the icon function) directly within your shortcode handler function. No need to run it through shortcodes again.
If it's not your own shortcode you are looking to call you can call do_shortcode
http://codex.wordpress.org/Function_Reference/do_shortcode
To do what you want, it's not necessary to have two shortcodes, just make your shortcode accept arguments:
add_shortcode('apple', 'apple');
function apple($args) {
$default = array('icon' => '');
$args = wp_parse_args($args, $default);
$content = '';
if ($args['icon']) {
$content.= '<img src="icon.png">';
}
$content.= '<a href="http://example.com/apple>Apple</a>';
return $content;
}
To use this, you would then enter your shortcode as follows:
[apple icon="yes"]
If it's simply a "yes/no" for the icon.
Or, you could make it so it loads the icon dynamically based on what you set icon equal to, which would require some modifications to the function:
function apple($args) {
$default = array('icon' => '');
$args = wp_parse_args($args, $default);
$content = '';
if ($args['icon']) {
$content.= '<img src="' . $args['icon'] . '">';
}
$content.= '<a href="http://example.com/apple>Apple</a>';
return $content;
}
And your shortcode would then look like so:
[apple icon="my_icon.png"]
(Note, you'd probably need to pass in a fully qualified domain name, like so: [apple icon="http://example.com/images/my_icon.png"])
Related
I want to add some PHP code (to read out URL variables via get_query_var) in the content area of a Wordpress page. To do that I use the following function in my functions.php
function php_execute($html){
if(strpos($html,"<"."?php")!==false){ ob_start(); eval("?".">".$html);
$html=ob_get_contents();
ob_end_clean();
}
return $html;
}
add_filter('the_content','php_execute',100);
With this, I'm able to read out a URL variables of my URL /thank-you/?order_id=ABCDE with <?php echo get_query_var( 'order_id' );?>.
Now I want to add this order ID to a URL (in order to prefill a field in a survey) and tried to add it to the corresponding URL like so:
<iframe src="https://XXX.wufoo.com/embed/YYYYY/def/field414=<?php echo get_query_var( 'order_id' );?>"> Link to survey
Unfortunately the resulting source code looks like this:
<iframe src="https://XXX.wufoo.com/embed/YYYYY/def/field414=ABCDE „> Link to survey
So instead of field414=ABCDE"> it says field414=ABCDE „>
I'm very new to PHP and think that there might be a problem in the function but can't figure it out.
Does anyone see a mistake somewhere?
Thanks,
Patrick
Setup correctly iframe tag.
Then change you php_execute functions to this.
add_filter( 'the_content', 'php_execute' );
function php_execute( $content )
{
$orderId = isset($_GET['order_id']) ? trim($_GET['order_id']) : false;
if ($orderId) {
$content .= '<iframe src="https://XXX.wufoo.com/embed/YYYYY/def/field414=' . $orderId . '">';
$content .= 'Link to survey';
}
return $content;
}
I have a shortcode that queries through Worpress posts by category name and displays them on the front end. If there are no posts in that category, the user can write a "no posts available" message.
The wpautop wraps the message with <p>...</p>.
I want to style this <p>. I can't simply just add CSS to the paragraph tag obviously. It's not that simple. The styling needs to be isolated to this message only. So, can someone help me modify this code below to wrap the return in a div container with a class?
Thanks
$listing = new WP_Query( apply_filters( 'display_posts_shortcode_args', $args, $original_atts ) );
if ( ! $listing->have_posts() ) {
/**
* Filter content to display if no posts match the current query.
*
*/
return apply_filters( 'display_posts_shortcode_no_results', wpautop( $no_posts_message ) );
}
Use a below sample :p
$page_cont = wpautop('YOUR_CONTENT');
$added_class = str_replace('<p>', '<p class="text-center">', $page_cont);
echo $added_class;
You can do it by creating alternative function for wpautop().
wpautop() function is coded in wp-includes/formatting.php, copy the function to the functions.php in your template directory and edit.
1) Change the function name and add a new parameter for class name,
function wpautop( $pee, $br = true ) {
as
function wpautopNew( $pee, $className = null, $br = true ) {
2) Search and change this loop in the function
// Rebuild the content as a string, wrapping every bit with a <p>.
foreach ( $pees as $tinkle ) {
$pee .= '<p>'. trim($tinkle, "\n") . "</p>\n";
}
as this
// Rebuild the content as a string, wrapping every bit with a <p>.
foreach ( $pees as $tinkle ) {
$pee .= '<div class="'.$className.'"><p>' . trim($tinkle, "\n") . "</p></div>\n";
}
3) Use the new function and give a class name as second argument.
wpautopNew( $no_posts_message, 'yourclassname' )
I just install Wordpress SEO plugin by Yoast, test the title re-write function and it works in my title bar (single post). However when I try to call the title in widget, I just get error message
Warning: Missing argument 1 for kpndg()...
I insert this code in theme functions.php
add_filter( 'wpseo_title', 'kpndg' );
function kpndg( $title ) {
return $title;
}
Then call it in my widget:
$out.='<div class="trending-bar add-active bar-' . $i . '">';
$out.='<a class="trending-link" href="'.get_permalink().'"> </a>';
$out.='<div class="title">'.kpndg().'</div>';
$out.='<div class="trending-color-wrapper">';
$out.='<div class="trending-color-layer"></div>';
$out.='<div class="trending-color"></div>';
$out.='<div class="trending-meta">' . $meta . '</div>';
$out.='</div>';
$out.='</div>';
I can't figure out what is the problem in that code.
FYI: I use Engine theme by Industrial Themes
This line: $out.='<div class="title">'.kpndg().'</div>';
You need to specify an argument... Or, alternatively, set a default value for the $title argument:
add_filter( 'wpseo_title', 'kpndg' );
function kpndg( $title = 'foo' ) {
return $title;
}
Edit
Are you sure you didn't mean to use get_post_meta(get_the_ID(), '_yoast_wpseo_title', true); in place of kpndg()?
Edit #2
Instead of adding a new filter for wpseo_title, just create a "helper function":
function kpndg() {
return get_post_meta(get_the_ID(), '_yoast_wpseo_title', true) ?: get_the_title();
}
Then, within the loop, you can call echo kpndg()
According to jQuery.lazyload any images I'd like to "lazyload" need to have the src attribute replaced with data-original.
I'm assuming I can do this using WordPress get_image_tag filter, but I'm stuck on how to actually make it happen.
function image_src( $id, $alt, $title, $align, $size ) {
$html = '<img data-orginial="' . esc_attr($img_src) . '"/>';
return $html;
}
add_filter( 'get_image_tag', 'image_src', 10, 5 );
For lazyload to work a lazy class also needs to be placed on the IMG, which I managed to get working using WordPress get_image_tag_class filter
function image_class( $classes ) {
return $classes . ' lazy';
}
add_filter( 'get_image_tag_class', 'image_class' );
Any thoughts on how I can change the IMG output to replace data-orginial instead of src?
Rich-
I ran into the same problem and went down the same path as you, trying to use get_image_tag with poor results. So I came up with a JS workaround - the code comments should show you how to get this working:
function() {
// To get lazy loading working on blog post
// 1- Assign all image source paths into a sourcePath variable
var sourcePath = $("figure").find("img").attr("src");
// 2- Nullify source paths, move path to data-original attribute and add lazy-load class to img
$("figure").find("img").attr({
"src" : " ",
"data-original" : sourcePath
}).addClass("lazy-load");
// 3- Applies lazy-loading jQuery plugin to image elements
$("img.lazy-load").lazyload({
effect : "fadeIn"
});
}
You will need to replace the src part
function image_src( $id, $alt, $title, $align, $size ) {
if( ! is_admin() ) $html = str_replace("img src=","img data-original=",$html);
return $html;
}
add_filter( 'get_image_tag', 'image_src', 10, 5 );
You may have to adjust it to make it match the original <img> settings.
Edit: added Nath's suggestion.
Trying to create a special button on the Tiny MCE editor on the Post Editor of Wordpress. I want to create a button for my created shortcode tooltips.
Check out my desired output:
I have the following code for my Tooltip shortcode:
//Text tooltip
function tooltip($atts, $content = ''){
$atts = shortcode_atts(
array(
'class' => '',
'title' => ''
), $atts);
$html = '<a class="' . $atts['class'] .'" title="'. $atts['title']. '" href="#">' . $content . ' <span>' .$atts['title']. '</span> </a>';
return $html;
}
add_shortcode('tooltip', 'tooltip');
Now when you execute this you will use the following codes for the shortcode:
[tooltips class="top_tooltip" title="Your Tooltip here"] Text here [/tooltip]
What I have done is that created some function to DISPLAY MY CREATED CUSTOM BUTTON TOOLTIP SHORTCODE on the functions.php file on my theme using the following codes.
//Create Tiny MCE buttons
function mce_tooltip($button) {
$buttons[] = 'superscript';
return $button;
}
add_filter('mce_buttons_2', 'mce_tooltip');
/*
* Callback function to filter the MCE settings
*/
function mce_tooltip( $init_array ) {
// Define the style_formats array
$style_formats = array(
// Each array child is a format with it's own settings
array(
'class' => '',
'title' => ''
);
// Insert the array, JSON ENCODED, into 'style_formats'
$init_array['style_formats'] = json_encode( $style_formats );
return $init_array;
}
// Attach callback to 'tiny_mce_before_init'
add_filter( 'tiny_mce_before_init', 'mce_tooltip' );
I tried the code but it won't show up my CUSTOM button for my shortcode on the TINY MCE Editor on Wordpress. Any idea how to do it better?
Check your code. I guess there is invalid return value
function mce_tooltip($button) {
$buttons[] = 'superscript';
return $button;
}
For TinyMCE Advanced Version: 4.1.1 follow this steps:
In /wp-content/plugins/tinymce-advanced/tinymce-advanced.php (function get_all_buttons()) add $buttons[] = 'yourButton'
http://prntscr.com/5ywb4p
In /wp-includes/js/tinymce/tinymce.min.js after some button add your own
e.addButton('yourButton',{title:'yourButton',text:"yourButton",'class' : 'yourButton-btn', onclick : function() { e.focus(); e.selection.setContent('<YourTag>' + e.selection.getContent() + '</YourTag>'); } })
http://prntscr.com/5ywc48
Then go into tinymce settings in wp-admin and add your new button to editor.
http://www.gavick.com/blog/adding-your-own-buttons-in-tinymce-4-editor/
Try this tutorial, it works. It teaches how to add a custom button to the new tinymce 4 and how to use it for your own shortcodes