Techs11 | dognmonkey.com

macOS, Windows OS, Apple Software, iOS, WordPress, Internet, IoT, Net Working, Electronics, iPhone, Android, Hackintosh
create shortcode
CSS WordPress

Create Shortcodes for Color Buttons With Links

Bootstrap buttons are great, but for some reasons they don’t accept links. This is how I create color buttons with link using shortcodes.

  • Create the color button in css.

bblack,bblue,bgreen,bred, a {text-style:italic;font-size:17px;font-weight:500;color:#fff}bblack span,bblue span,bgreen span,bred span{padding:5px 13px;border-radius:5px}bblack span{background-color:#080808}bblue span{background-color:#1A447A}bred span{background-color:#930700}bgreen span{background-color:#004928}

  • Shortcodes by create btn_shortcodes.php.

<?php
add_shortcode( ‘blue’, ‘title_s’ );
function title_s($atts, $content = null) {
extract(shortcode_atts(array(
‘blue’ => ”,
), $atts));

return ‘<bblue><span>’.$content.'</span></bblue>’ ; }

add_shortcode( ‘red’, ‘title_r’ );
function title_r($atts, $content = null) {
extract(shortcode_atts(array(
‘red’ => ”,
), $atts));

return ‘<bred><span>’.$content.'</span></bred>’ ; }

add_shortcode( ‘green’, ‘title_g’ );
function title_g($atts, $content = null) {
extract(shortcode_atts(array(
‘green’ => ”,
), $atts));

return ‘<bgreen><span>’.$content.'</span></bgreen>’ ; }

add_shortcode( ‘black’, ‘title_b’ );
function title_b($atts, $content = null) {
extract(shortcode_atts(array(
‘black’ => ”,
), $atts));

return ‘<bblack><span>’.$content.'</span></bblack>’ ; }

  • Add btn_shortcodes.php to function.php, make sure the path is correct.

include ‘iphp/btn_shortcodes.php’;

green button shortcode usage

Paid Links

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.