How to Add Buttons using Thesis Shortcodes and to Open in a New Page

by Elaine on March 9, 2012

wordpress killer thesis theme How to Add Buttons using Thesis Shortcodes and to Open in a New PageThesis tutorial – So I LOVE my new Thesis short codes that I implemented last week.  I joined the mailing list at DIYthemes and they send out little Thesis or website tips every week.  Few weeks ago they sent out a tutorial on how to add pretty buttons to your website using short codes.  It was a pretty long tutorial but really easy.  You really don’t need to upload any pictures to your folder.  It’s all code you add to your css and custom_functions.php.   The tutorial is here: After you follow the instructions in the tutorial, you will end up with buttons like this!  Pretty neat!  I love them:

Standard Buttons:

Red ButtonOrange ButtonGreen ButtonBlue ButtonGray ButtonDark Button

Bevel Buttons:

Red ButtonOrange ButtonGreen ButtonBlue ButtonGray ButtonDark Button

Engraved Buttons:

The only thing I didn’t like about the buttons were that the links were opening on the same page.  I wanted the links to open in a new page.  I tried adding a target into the shortcode, but shortcodes don’t work like that.  So I made some changes in the custom_functions.php file. Below is how I made my Thesis shortcode buttons open in a new page – Target = _blank.

Overview of how to change the code so short codes will open in a new window:

  • Go to Thesis Custom File Editor
  • Edit Custom_functions.php in Thesis Custom File Editor
  • Add code to links to open in a new window
cmsmind thesis shortcode buttons target blank  How to Add Buttons using Thesis Shortcodes and to Open in a New Page

Wordpress Thesis - Custom File Editor

1.  Go to Thesis Custom File Editor

  • Login as your Wordpress Administrator
  • Click on ‘Thesis’, ‘Custom File Editor’

2.  Edit Custom_functions.php in Thesis Custom File Editor

  • cmsmind wordpress thesis shortcode buttons target blank 2 How to Add Buttons using Thesis Shortcodes and to Open in a New Page

    Wordpress Thesis - Edit Custom_Functions.php

    Under Currently Editing, use the drop down and select:

    • custom_functions.php
  • Click on ‘Edit Selected File

3.  Add code to links to open in a new window

Always remember to take a backup of your custom_functions.php before making any changes.  If something is messed up in this file, your whole site will be down.

  • Change the code in 3 places:

a.  Search in your code for:

$output = ‘<div class=”engraved”><a href=”‘ . $link . ‘” class=”‘ . $color . ‘”>’ . do_shortcode($content) . ‘</a></div>’;

  • Add the code in red:

$output = ‘<div class=”engraved”><a href=”‘ . $link . ‘” class=”‘ . $color . ‘” target=”_blank”>’ . do_shortcode($content) . ‘</a></div>’;

b. Search in your code for:

$output = ‘<a href=”‘ . $link . ‘” class=”‘. $type . ‘ ‘ . $color . ‘” ><span>’ . $icon . ‘</span>’ . do_shortcode($content) . ‘</a>’;

  • Add the code in red:
$output = ‘<a href=”‘ . $link . ‘” class=”‘. $type . ‘ ‘ . $color .”  target=”_blank”><span>’ . $icon . ‘</span>’ . do_shortcode($content) . ‘</a>’;

c.  Search in your code for:

$output = ‘<a href=”‘ . $link . ‘” class=”‘ . $type . ‘ ‘ . $color . “>’ . do_shortcode($content) . ‘</a>’;

  • Add the code in red:

$output = ‘<a href=”‘ . $link . ‘” class=”‘ . $type . ‘ ‘ . $color . ” target=”_blank”>’ . do_shortcode($content) . ‘</a>’;

cmsmind thesis shortcode buttons target blank 3 How to Add Buttons using Thesis Shortcodes and to Open in a New Page

Wordpress Thesis -Shodecode change for buttons to open in new window

Save your custom_functions.php.   Now all my thesis button shortcode links open in a new page.  I’m very happy with them.

Thanks,

Elaine

 How to Add Buttons using Thesis Shortcodes and to Open in a New Page

Elaine

Elaine is the founder of CmsMind, an online blog providing Joomla and WordPress tutorials. Elaine lives in Toronto and when she is not online, she is either Marathon and Triathlon training or travelling and racing somewhere in the world. Find her also at: Save Money, Premium Themes and Templates, and at Webhosting Tips.

More Posts - Website

Leave a Comment

Captcha Captcha Reload

Older Post:

Newer Post: