Loading...
WordpressWordpress Tutorials

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

Wordpress Killer Thesis ThemeThesis 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:

[button type=”standard” color=”red” link=”#”]Red Button[/button][button type=”standard” color=”orange” link=”#”]Orange Button[/button][button type=”standard” color=”green” link=”#”]Green Button[/button][button type=”standard” color=”blue” link=”#”]Blue Button[/button][button type=”standard” color=”gray” link=”#”]Gray Button[/button][button type=”standard” color=”dark” link=”#”]Dark Button[/button]

Bevel Buttons:

[button type=”bevel” color=”red” link=”#”]Red Button[/button][button type=”bevel” color=”orange” link=”#”]Orange Button[/button][button type=”bevel” color=”green” link=”#”]Green Button[/button][button type=”bevel” color=”blue” link=”#”]Blue Button[/button][button type=”bevel” color=”gray” link=”#”]Gray Button[/button][button type=”bevel” color=”dark” link=”#”]Dark Button[/button]

Engraved Buttons:

[button type=”engraved” color=”red” link=”#”]Red Button[/button][button type=”engraved” color=”orange” link=”#”]Orange Button[/button][button type=”engraved” color=”green” link=”#”]Green Button[/button][button type=”engraved” color=”blue” link=”#”]Blue Button[/button][button type=”engraved” color=”gray” link=”#”]Gray Button[/button][button type=”engraved” color=”dark” link=”#”]Dark Button[/button]

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
Wordpress Thesis - Custom File Editor
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

  • Wordpress Thesis - Edit Custom_Functions.php
    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>’;

Wordpress Thesis -Shodecode change for buttons to open in new window
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

Leave a Reply

Your email address will not be published. Required fields are marked *

Captcha Captcha Reload