CODEWITHSUNDEEP
phphtmlwordpressshortcode
user3063771
user3063771

Reputation: 75

Using wordpress shortcode to add html attributes

I am modifying a wordpress theme. I want to be able to give the option to have a link open in a new tab using shortcode. 

// add shortcode for About Our Charity Section
function theme_about_charity($atts, $content = null){
    extract(shortcode_atts(array(
        'title' => '',
        'icon' => '',
        'link' => '', 
        'last'  => '',
        'newTab' => ''
    ),$atts));
        return ' <div class="about-box" id="'.(($last == 'yes') ? 'last' : '').'">
                    <h3><i class="fa fa- '.$icon.'"></i><a href="'.$link.'" target="'.($newTab == 'yes')? '_blank' : '_self' . '">' .$title.'</a></h3>
                    <p>'.$content.'</p>                             
                </div>';
    }
add_shortcode('about_charity','theme_about_charity');

when the user creates the shortcode:

[about_charity icon="icon" title="title" link="#" newTab="yes" ]lorem ipsum[/about_charity]

Right now the code is just printing, "_blank" onto my web page.

The code works for modifying the id attribute of the div but not the target attribute of the link. Can someone explain this and offer a suggestion for how to make this work? Thanks!

Upvotes: 1

Views: 843

Answers (1)

Laxman Prajapati
Laxman Prajapati

Reputation: 199

There are two mistakes we found

We have resolved and updated code as below Please replace the below function as well as a shortcode.

Function as below: 

// add shortcode for About Our Charity Section
function theme_about_charity($atts, $content = null){
    extract(shortcode_atts(array(
        'title' => '',
        'icon' => '',
        'link' => '', 
        'last'  => '',
        'newtab' => ''
    ),$atts));
    return '<div class="about-box" id="'.(($last == 'yes') ? 'last' : '').'">
                <h3><i class="fa fa- '.$icon.'"></i><a href="'.$link.'" target="'.(($newtab == 'yes') ? '_blank' : '_self') . '">' .$title.'</a></h3>
                <p>'.$content.'</p>                             
            </div>';
}
add_shortcode('about_charity','theme_about_charity');

Shortcode as below:

[about_charity icon="icon" title="title1" link="https://www.google.com" newtab="yes" ]lorem ipsum[/about_charity]

I hope it will work for you Because we have tried and it get works for me.

Thanks!

Upvotes: 2

Related Questions