Codeless
  • Support Home
  • Themes
  • Support
  • WordPress Tutorials
    • How to Start a Blog
    • Best Website Builders
    • Best Small Business Hosting
    • Email Marketing Services
    • Cheap WordPress Hosting
  • Video Tutorials

Community Forums

How to add custom class to a button?

buttonclass
    • 5 years, 1 month ago simeonkartov
      Participant

      Hi there,

      I want to track button clicks with Google Analytics. But I can’t find a way to add a custom class to a button.

      The button is an <a> tag wrapped in a <div> tag. The <div> has a custom class, but not the <a>. I need to add a custom class to the actual <a> tag that contains the link.

      Can you help me?

      Thanks!

      • This topic was modified 5 years, 1 month ago by simeonkartov.
      • This topic was modified 5 years, 1 month ago by simeonkartov.
    • 5 years, 1 month ago Ludjon
      Keymaster

      Hi, Sure I can help you.

      If you have an HTML-CSS background, you can add it yourself on includes/codeless_builder/shortcodes/cl_button.php

      You can change the extra class parameter from the DIV to A element

      If you can’t, just send me credentials

      Thanks

       

      • 5 years, 1 month ago simeonkartov
        Participant
        This reply has been marked as private.
    • 5 years, 1 month ago simeonkartov
      Participant

      Hi there,

      Explain to me what exactly I have to do, please.

      I want exactly that to move the extra CSS class to the A element, not the div.

      Thanks!
      SK

    • 5 years, 1 month ago simeonkartov
      Participant

      I see I have to update this block of code:

      <div class="cl-btn-div cl-element <?php echo esc_attr( $button_id ).' '.esc_attr( $this->generateClasses('.cl-btn-div') ) ?>" <?php  $this->generateStyle('.cl-btn-div', '', true) ?>>
      	<a href="<?php echo esc_url( $link ) ?>" target="<?php echo esc_attr( $link_target ) ?>" class="<?php echo esc_attr( $this->generateClasses('.cl-btn') ); ?> 
      	<?php echo esc_attr( $extra_classes ); ?>" <?php $this->generateStyle('.cl-btn', '', true) ?> > <span><?php echo cl_remove_empty_p( cl_remove_wpautop($btn_title, true) ) ?></span></a>
      </div>

      Send me the updated code please.

    • 5 years, 1 month ago simeonkartov
      Participant

      Can I add my custom classes?

      For example, I have the same download button that appears on 4 different pages. I have to create 4 different google analytics events for this button as it always has different custom class to it.

      I want to add the same class to different buttons on different pages. Is this possible?

      Thanks!

    • 5 years, 1 month ago simeonkartov
      Participant

      I managed to move the custom class form the div to the a. But the problem is that the class autogenerates on each refresh. I cannot use it for tracking.

      Can we make it to generate a custom class and keep it like this?

    • 5 years, 1 month ago Ludjon
      Keymaster

      Sure,

      I will help you to add a custom param.

      go to includes/codeless_builder/config/cl-page-elements.php and search into

      file for ‘cl_button’

       

      at that block, after this “‘fields’ => array(” and before “‘btn_title’ => array(” add this block of code:

      'custom_user_class' => array(
      	'type'     => 'text',
      	'priority' => 10,
              'reloadTemplate' => true,
              'label'       => esc_attr__( 'Custom User Class', 'folie' ),
              'default'     => '',
      ),

      then go back to cl_button.php and replace the file with:

      <?php
      if ( ! defined( 'ABSPATH' ) ) {
      	die( '-1' );
      }
      
      $output = '';
      
      $atts = cl_get_attributes( $this->getShortcode(), $atts );
      extract( $atts );
      $button_id = 'cl_btn_div' . str_replace( ".", '-', uniqid("", true) );
      
      $extra_classes = codeless_button_classes('');
      
      ?>
      
      <div class="cl-btn-div cl-element <?php echo esc_attr( $button_id ).' '.esc_attr( $this->generateClasses('.cl-btn-div') ) ?>" <?php  $this->generateStyle('.cl-btn-div', '', true) ?>>
      	<a href="<?php echo esc_url( $link ) ?>" target="<?php echo esc_attr( $link_target ) ?>" class="<?php echo esc_attr( $custom_user_class ) ?> <?php echo esc_attr( $this->generateClasses('.cl-btn') ); ?> 
      	<?php echo esc_attr( $extra_classes ); ?>" <?php $this->generateStyle('.cl-btn', '', true) ?> > <span><?php echo cl_remove_empty_p( cl_remove_wpautop($btn_title, true) ) ?></span></a>
      </div>
      
      <?php
      
      if( $overwrite_style ): ?>
      
      <style type="text/css">
       .<?php echo esc_attr($button_id) ?> a:hover{ 
       	background-color: <?php echo esc_attr( $button_bg_color_hover ) ?> !important; 
       	color: <?php echo esc_attr( $button_font_color_hover ) ?> !important;
       }
       </style>
      
      <?php
      	$extra_classes = 'cl-btn';
      
      endif;

      This should help you
      Thanks

      • 5 years, 1 month ago simeonkartov
        Participant

        Thanks, works perfectly!

    • 5 years, 1 month ago Ludjon
      Keymaster

      You’re welcome :)

      If you like our theme and support, leave us a rating on Themeforest, it’s very important for us :)

      https://themeforest.net/downloads

      Thank You so much

Viewing 7 reply threads

You must be logged in to reply to this topic.

Login

Log In
Register

Renew Support

  • Renew Specular Support
  • Renew Tower Support
  • Renew Folie Support
  • Renew Handel Support
  • Renew June Support
  • Renew Picante Support
  • Renew Thype Support
  • Renew Regn Support

Search Forums

Forums

  • Bygge – Construction Theme
  • Converta – Software Theme
  • Folie – The WordPress Website Builder
  • Handel – Responsive Multi-Purpose Business Theme
  • June WooCommerce WordPress Theme
  • Livecast – Podcast Theme
  • Picante – Restaurant & Food WordPress Theme
  • Regn | Agency & Business WordPress Theme
  • Remake – Minimal Portfolio & Agency Theme
  • Specular – Multi-Purpose WordPress Theme
  • Suggest us Features
  • Tower – Business-Driven Multipurpose WP Theme
  • Vibrance – Photography Theme

Site Links

  • Support Policy
  • Specular Support Forum
  • Video Tutorials
  • Knowledge Base
  • Guides and Reviews

Useful Articles

  • Build a Website
  • Web Design & Development
  • Hosting
  • WordPress

Login

Log In
Register Lost Password