Topic: Using H1 instead of H4 for card title

Author

Posts

December 28, 2015 at 7:07 pm #723754

Participant

Hi – as many sites recommend using H1 as the main heirarchy topics of a page, if I want to place those inside the Cornerstone flip cards, my only option for the title is H4. In some of your other plugins, we can do “H1 looks like H4” – that little trick, so that the content is indexed the way we want, but the design can use smaller text.

Is this possible in the flip cards? I know I can make the text larger or smaller via CSS, but I’m really looking to actually change the H4 tag to H1.

Is this possible?

If so, these cards are GREAT!

If not, I’m stuck.

Thank you.

Bill

December 28, 2015 at 10:25 pm #723913

Zeshan

Member

Hi Bill,

Thanks for writing in!

This isn’t possible out of the box to change card heading level. However, I’ll consider it a featured request and will forward to our development team. This way it can be taken into consideration for future development. All of these items are discussed with our team internally and prioritized based on the amount of interest a particular feature might receive.

In the meantime, if you want to change the heading level of all card elements to H1, you can use following workaround. Please note that this change will be applied to all the card elements and adding more than one H1 tag may effect your sites SEO.

I’m assuming you already have a child theme installed in your site. So just add following code in your child theme’s functions.php file:

// Card - Replace H4 tag with H1
// =============================================================================

function x_shortcode_card_v2( $atts ) {
  extract( shortcode_atts( array(
    'id'                   => '',
    'class'                => '',
    'style'                => '',
    'animation'            => '',
    'center_vertically'    => '',
    'front_style'          => '',
    'front_icon'           => '',
    'front_icon_size'      => '',
    'front_icon_color'     => '',
    'front_image'          => '',
    'front_image_width'    => '',
    'front_title'          => '',
    'front_text'           => '',
    'back_style'           => '',
    'back_title'           => '',
    'back_text'            => '',
    'back_button_text'     => '',
    'back_button_link'     => '',
    'back_button_color'    => '',
    'back_button_bg_color' => '',
    'padding'              => ''
  ), $atts, 'x_card' ) );

  $id                   = ( $id                   != ''     ) ? 'id="' . esc_attr( $id ) . '"' : '';
  $class                = ( $class                != ''     ) ? 'x-card-outer ' . esc_attr( $class ) : 'x-card-outer';
  $style                = ( $style                != ''     ) ? 'style="' . $style . '"' : '';
  $animation            = ( $animation            != ''     ) ? ' ' . $animation : ' flip-from-left';
  $center_vertically    = ( $center_vertically    == 'true' ) ? ' center-vertically' : '';
  $front_style          = ( $front_style          != ''     ) ? $front_style : 'border: 1px solid #ddd; color: #272727; background-color: #fafafa;';
  $front_icon           = ( $front_icon           != ''     ) ? $front_icon : '';
  $front_icon_size      = ( $front_icon_size      != ''     ) ? $front_icon_size : '36px';
  $front_icon_color     = ( $front_icon_color     != ''     ) ? $front_icon_color : '#272727';
  $front_image          = ( $front_image          != ''     ) ? $front_image : '';
  $front_image_width    = ( $front_image_width    != ''     ) ? $front_image_width : 'auto';
  $front_title          = ( $front_title          != ''     ) ? wp_specialchars_decode( $front_title ) : 'Front Title';
  $front_text           = ( $front_text           != ''     ) ? wp_specialchars_decode( $front_text ) : 'This is where the text for the front of your card should go. It\'s best to keep it short and sweet.';
  $back_style           = ( $back_style           != ''     ) ? $back_style : 'border: 1px solid #ddd; color: #272727; background-color: #fafafa;';
  $back_title           = ( $back_title           != ''     ) ? wp_specialchars_decode( $back_title ) : 'Back Title';
  $back_text            = ( $back_text            != ''     ) ? wp_specialchars_decode( $back_text ) : 'This is where the text for the back of your card should go.';
  $back_button_text     = ( $back_button_text     != ''     ) ? $back_button_text : 'Click Me!';
  $back_button_link     = ( $back_button_link     != ''     ) ? $back_button_link : '#';
  $back_button_color    = ( $back_button_color    != ''     ) ? $back_button_color : '#ffffff';
  $back_button_bg_color = ( $back_button_bg_color != ''     ) ? $back_button_bg_color : '#ff2a13';
  $padding              = ( $padding              != ''     ) ? $padding : '35px';

  if ( $front_image != '' ) {
    $front_graphic = '<div class="x-face-graphic"><img style="margin: 0; width: ' . $front_image_width . ';" src="' . $front_image . '"></div>';
  } else if ( $front_icon != '' ) {
    $front_graphic = '<div class="x-face-graphic"><i style="margin: 0; font-size: ' . $front_icon_size . '; color: ' . $front_icon_color . ';" class="x-icon-' . $front_icon . '" data-x-icon="&#x' . fa_unicode( $front_icon ) . ';"></i></div>';
  } else {
    $front_graphic = '';
  }

  $data = cs_generate_data_attributes( 'card', array() );

  $output = "<div {$id} class=\"{$class}{$animation}{$center_vertically}\" {$data}{$style}>"
            . '<div class="x-card-inner">'
              . "<div class=\"x-face-outer front\" style=\"{$front_style}\">"
                . '<div class="x-face-inner">'
                  . "<div class=\"x-face-content\" style=\"padding: {$padding};\">"
                    . $front_graphic
                    . "<h1 class=\"x-face-title\">{$front_title}</h1>"
                    . "<p class=\"x-face-text\">{$front_text}</p>"
                  . '</div>'
                . '</div>'
              . '</div>'
              . "<div class=\"x-face-outer back\" style=\"{$back_style}\">"
                . '<div class="x-face-inner">'
                  . "<div class=\"x-face-content\" style=\"padding: {$padding};\">"
                    . "<h4 class=\"x-face-title\">{$back_title}</h4>"
                    . "<p class=\"x-face-text\">{$back_text}</p>"
                    . "<a class=\"x-face-button\" style=\"color: {$back_button_color}; background-color: {$back_button_bg_color};\" href=\"{$back_button_link}\">{$back_button_text}</a>"
                  . '</div>'
                . '</div>'
              . '</div>'
            . '</div>'
          . '</div>';

  return $output;
}

add_filter('init', function() {
  remove_shortcode( 'x_card' );
  add_shortcode( 'x_card', 'x_shortcode_card_v2' );
});

Hope this helps. 🙂

Thank you!

December 29, 2015 at 8:35 am #724352

billium99

Participant

Thanks! I’ll try this after you guys troubleshoot why Revolution Slider breaks the Cornerstone editor on my site.

I have a separate thread going for that, so I’ll get to this one hopefully later today.

Thanks

Bill

December 29, 2015 at 9:23 am #724393

Rupok

Member