{"id":6915,"date":"2018-05-16T10:52:37","date_gmt":"2018-05-16T17:52:37","guid":{"rendered":"http:\/\/www.dognmonkey.com\/techs\/?p=6915"},"modified":"2020-01-09T09:46:56","modified_gmt":"2020-01-09T17:46:56","slug":"create-shortcodes-for-color-buttons-with-links","status":"publish","type":"post","link":"https:\/\/www.dognmonkey.com\/techs\/create-shortcodes-for-color-buttons-with-links.html","title":{"rendered":"Create Shortcodes for Color Buttons With Links"},"content":{"rendered":"<p><em>Bootstrap buttons are great, but for some reasons they don&#8217;t accept links. This is how I create color buttons with link using shortcodes.<\/em><\/p>\n<ul>\n<li><em>Create the color button in css.<\/em><\/li>\n<\/ul>\n<p>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}<\/p>\n<ul>\n<li><em>Shortcodes by create btn_shortcodes.php.<\/em><\/li>\n<\/ul>\n<blockquote><p>&lt;?php<br \/>\nadd_shortcode( &#8216;blue&#8217;, &#8216;title_s&#8217; );<br \/>\nfunction title_s($atts, $content = null) {<br \/>\nextract(shortcode_atts(array(<br \/>\n&#8216;blue&#8217; =&gt; &#8221;,<br \/>\n), $atts));<\/p>\n<p>return &#8216;&lt;bblue&gt;&lt;span&gt;&#8217;.$content.'&lt;\/span&gt;&lt;\/bblue&gt;&#8217; ; }<\/p>\n<p>add_shortcode( &#8216;red&#8217;, &#8216;title_r&#8217; );<br \/>\nfunction title_r($atts, $content = null) {<br \/>\nextract(shortcode_atts(array(<br \/>\n&#8216;red&#8217; =&gt; &#8221;,<br \/>\n), $atts));<\/p>\n<p>return &#8216;&lt;bred&gt;&lt;span&gt;&#8217;.$content.'&lt;\/span&gt;&lt;\/bred&gt;&#8217; ; }<\/p>\n<p>add_shortcode( &#8216;green&#8217;, &#8216;title_g&#8217; );<br \/>\nfunction title_g($atts, $content = null) {<br \/>\nextract(shortcode_atts(array(<br \/>\n&#8216;green&#8217; =&gt; &#8221;,<br \/>\n), $atts));<\/p>\n<p>return &#8216;&lt;bgreen&gt;&lt;span&gt;&#8217;.$content.'&lt;\/span&gt;&lt;\/bgreen&gt;&#8217; ; }<\/p>\n<p>add_shortcode( &#8216;black&#8217;, &#8216;title_b&#8217; );<br \/>\nfunction title_b($atts, $content = null) {<br \/>\nextract(shortcode_atts(array(<br \/>\n&#8216;black&#8217; =&gt; &#8221;,<br \/>\n), $atts));<\/p>\n<p>return &#8216;&lt;bblack&gt;&lt;span&gt;&#8217;.$content.'&lt;\/span&gt;&lt;\/bblack&gt;&#8217; ; }<\/p><\/blockquote>\n<ul>\n<li><em>Add btn_shortcodes.php to function.php, make sure the path is correct.<\/em><\/li>\n<\/ul>\n<blockquote><p><em>include &#8216;iphp\/btn_shortcodes.php&#8217;;<\/em><\/p><\/blockquote>\n<ul>\n<li><em><a href=\"\/\/www.dognmonkey.com\/techs\/\" target=\"_blank\" rel=\"noopener noreferrer\"><button class=\"w3-button w3-green w3-round-xlarge\">this is green button with link<\/a><\/button><\/em><\/li>\n<\/ul>\n<div class=\"igallery\"><a class=\"preview\" title=\"green button shortcode usage\" href=\"\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/green_b.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-thumbnail wp-image-6916\" src=\"\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/green_b-200x47.jpg\" alt=\"green button shortcode usage\" width=\"200\" height=\"47\" \/><\/a><\/div>\n<ul class=\"lcp_catlist\" id=\"lcp_instance_0\"><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Bootstrap buttons are great, but for some reasons they don&#8217;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. &lt;?php add_shortcode( &#8216;blue&#8217;, &#8216;title_s&#8217; ); function title_s($atts, $content = null) <a href=\"https:\/\/www.dognmonkey.com\/techs\/create-shortcodes-for-color-buttons-with-links.html\" class=\"more-link\">&#8230;<\/a><\/p>\n","protected":false},"author":1,"featured_media":7501,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[288,20],"tags":[1209,1206,1207,1208],"class_list":["post-6915","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-wordpress","category-wordpress","tag-bootstrap","tag-button","tag-button-with-link","tag-create-color-button"],"views":122,"_links":{"self":[{"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/posts\/6915","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/comments?post=6915"}],"version-history":[{"count":3,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/posts\/6915\/revisions"}],"predecessor-version":[{"id":7166,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/posts\/6915\/revisions\/7166"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/media\/7501"}],"wp:attachment":[{"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/media?parent=6915"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/categories?post=6915"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/tags?post=6915"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}