How to add rel="" to a button element

[Julius]

The title says it all.

If not possible, do you have some helper classes or other ideas to quickly style custom a tag?

Btw, it’s not for nofollow, but i need to insert a string to activate a pop-up for my payment system “Simplero”. It’s them dicating that it has to be rel=“simplero-landing-page”

[Prasant]

Hello Julius,

Thanks for writing in!

In your case you can use the button shortcode instead of the button element and then add the Rel attribute in the shortcode. For more information on the shortcode, please take a look at following resource:

http://demo.theme.co/integrity-1/shortcodes/buttons/#example

Thanks.

[Julius]

Thanks, didn’t think about that!

[ruenel]

You are most welcome!

[Julius]

That didn’t work unfortunately, seems like i can’t add rel="" to a button shortcode. The rel attribute doesn’t show up in the inspector in chrome either

[ruenel]

Hello @Julius,

Sorry if it did not work out for you.

To resolve your issue, assuming that your child theme is set up, please add the following code in your child theme’s functions.php file

// Custom Button Shortcode
// =============================================================================

function x_shortcode_button( $atts, $content = null ) {
  extract( shortcode_atts( array(
    'id'               => '',
    'class'            => '',
    'style'            => '',
    'type'             => '',
    'shape'            => '',
    'size'             => '',
    'float'            => '',
    'block'            => '',
    'circle'           => '',
    'icon_only'        => '',
    'href'             => '',
    'title'            => '',
    'target'           => '',
    'info'             => '',
    'info_place'       => '',
    'info_trigger'     => '',
    'info_content'     => '',
    'lightbox_thumb'   => '',
    'lightbox_video'   => '',
    'lightbox_caption' => '',
    'rel'              => ''
  ), $atts, 'x_button' ) );

  $id    = ( $id    != '' ) ? 'id="' . esc_attr( $id ) . '"' : '';
  $class = ( $class != '' ) ? ' ' . esc_attr( $class ) : '';
  $style = ( $style != '' ) ? 'style="' . $style . '"' : '';
  $type  = ( $type  != '' ) ? ' x-btn-' . $type : '';
  $shape = ( $shape != '' ) ? ' x-btn-' . $shape : '';
  $size  = ( $size  != '' ) ? ' x-btn-' . $size : '';
  switch ( $float ) {
    case 'left' :
      $float = ' alignleft';
      break;
    case 'right' :
      $float = ' alignright';
      break;
    default :
      $float = '';
  }
  $block            = ( $block            == 'true'  ) ? ' x-btn-block' : '';
  $icon_only        = ( $icon_only        == 'true'  ) ? ' x-btn-icon-only' : '';
  $href             = ( $href             != ''      ) ? $href : '#';
  $title            = ( $title            != ''      ) ? 'title="' . $title . '"' : '';
  $target           = ( $target           == 'blank' ) ? cs_output_target_blank( false ) : '';
  $lightbox_thumb   = ( $lightbox_thumb   != ''      ) ? $lightbox_thumb : '';
  $lightbox_video   = ( $lightbox_video   == 'true'  ) ? ', width: 1080, height: 608' : '';
  $lightbox_caption = ( $lightbox_caption != ''      ) ? 'data-caption="' . $lightbox_caption . '"' : '';

  $tooltip_attr = ( $info != '' ) ? cs_generate_data_attributes_extra( $info, $info_trigger, $info_place, '', $info_content ) : '';

  if ( is_numeric( $lightbox_thumb ) ) {
    $lightbox_thumb_info = wp_get_attachment_image_src( $lightbox_thumb, 'full' );
    $lightbox_thumb      = $lightbox_thumb_info[0];
  }

  if ( $lightbox_video != '' ) {
    $lightbox_options = "data-options=\"thumbnail: '" . $lightbox_thumb . "'{$lightbox_video}\"";
  } else {
    $lightbox_options = "data-options=\"thumbnail: '" . $lightbox_thumb . "'\"";
  }

  if ( $circle == 'true' ) {
    $output = "<div {$id} class=\"x-btn-circle-wrap{$class}{$size}{$block}{$float}\" {$style}><a class=\"x-btn{$type}{$shape}{$size}{$block}{$icon_only}\" href=\"{$href}\" {$title} {$target} {$tooltip_attr} {$lightbox_caption} {$lightbox_options}>" . do_shortcode( $content ) . "</a></div>";
  } else {
    $output = "<a {$id} class=\"x-btn{$class}{$type}{$shape}{$size}{$block}{$float}{$icon_only}\" {$style} href=\"{$href}\" {$title} {$target} {$tooltip_attr} {$lightbox_caption} {$lightbox_options}>" . do_shortcode( $content ) . "</a>";
  }

  return $output;
}

add_action('wp_head', 'change_recent_posts_to_v2');

function change_recent_posts_to_v2() {
  remove_shortcode( 'x_button' );
  add_shortcode( 'x_button', 'x_shortcode_recent_posts_v2code' );
}
// =============================================================================

And when inserting a button shortcode, you can now include the rel tag in it like this:

[button rel="simplero-landing-page" type="real" shape="rounded" size="mini" href="#example" title="Example"]Round Button[/button]

Hope this helps. Please let us know how it goes.