How to make Custom Course Button shortcode?

[yudhafebrian]

Hi, i need your help, i want to make custom shortcode of [course_button id] like this: http://prntscr.com/khjqds i need to add locked icon for unpurchased course & unlocked icon for purchased course thank you

[MrVibe]

Try adding this code in your child theme - funcitons.php   add_shortcode('yudhafebrian_course_button',function($atts,$content){ extract(shortcode_atts(array( 'id' => '', ), $atts)); $return = ''; if(!empty($id)){ ob_start(); echo '<div class="yudhafebrian_course_button">'; the_course_button($id); echo '</div>'; $return = ob_get_clean(); } return $return; });

[MrVibe]

CSS to be included : .yudhafebrian_course_button a.course_button, .yudhafebrian_course_button a.button, .yudhafebrian_course_button input.course_button{position:relative;padding-left:60px;color:#fff !important;padding:0; width:250px !important;padding: 15px 15px 15px 30px !important; background-color: #bdc4d0 !important;border-radius: 6px 6px 6px 6px;font-size: 15px;}   .yudhafebrian_course_button input.course_button{ background:#1ace9e !important; }   .yudhafebrian_course_button a.course_button:before,.yudhafebrian_course_button a.button:before,.yudhafebrian_course_button input.course_button:before{ content:"\f023" !important; font-size:24px; font-family:'fontawesome' !important; position:absolute;left:20px; top:10px;color:#fff; }   .yudhafebrian_course_button form{position:relative;}.yudhafebrian_course_button form:before{ content:"\f09c" !important;font-family:'fontawesome' !important;position:absolute;left:70px;z-index:999;top:20px;font-size:24px;color:#fff }

[MrVibe]

[Author]

Posts