By default the feature list cornerstone element has an h4 element but I’d rather it have an h3 element. How would I go about changing that?
Hello There,
Thanks for writing in! To change the feature box h4 element to an h3 element, you will have to modify the featured box element. Assuming that you have already installed a child theme, please add the following code in your child theme’s functions.php file
// Custom Feature Box
// =============================================================================
function custom_x_shortcode_feature_box( $atts, $content = '' ) {
extract( shortcode_atts( array(
'id' => '',
'class' => '',
'style' => '',
'graphic' => '',
'graphic_size' => '',
'graphic_shape' => '',
'graphic_border' => '',
'graphic_color' => '',
'graphic_bg_color' => '',
'graphic_icon' => '',
'graphic_image' => '',
'graphic_animation' => '',
'graphic_animation_offset' => '',
'graphic_animation_delay' => '',
'title' => '',
'title_color' => '',
'text' => '',
'text_color' => '',
'link_text' => '',
'link_color' => '',
'href' => '',
'href_title' => '',
'href_target' => '',
'align_h' => '',
'align_v' => '',
'side_graphic_spacing' => '',
'max_width' => '',
'child' => '',
'connector_width' => '',
'connector_style' => '',
'connector_color' => '',
'connector_animation' => ''
), $atts, 'x_feature_box' ) );
//
// Allow text attribute to be used instead of content.
//
if ( '' == $content && '' != $text ) {
$content = cs_decode_shortcode_attribute( $text );
}
$title = cs_decode_shortcode_attribute( $title );
$id = ( $id != '' ) ? 'id="' . esc_attr( $id ) . '"' : '';
$class = ( $class != '' ) ? 'x-feature-box ' . esc_attr( $class ) : 'x-feature-box';
$style = ( $style != '' ) ? $style : '';
$graphic = ( $graphic != '' ) ? $graphic : 'icon';
$graphic_size = ( $graphic_size != '' ) ? $graphic_size : '60px';
$graphic_shape = ( $graphic_shape != '' ) ? $graphic_shape : 'square';
$graphic_border = ( $graphic_border != '' ) ? $graphic_border : '';
$graphic_color = ( $graphic_color != '' ) ? $graphic_color : '#ffffff';
$graphic_bg_color = ( $graphic_bg_color != '' ) ? $graphic_bg_color : 'transparent';
$graphic_icon = ( $graphic_icon != '' ) ? $graphic_icon : '';
$graphic_image = ( $graphic_image != '' ) ? $graphic_image : '';
$graphic_animation = ( $graphic_animation != '' ) ? $graphic_animation : 'none';
$graphic_animation_offset = ( $graphic_animation_offset != '' ) ? $graphic_animation_offset : '50';
$graphic_animation_delay = ( $graphic_animation_delay != '' ) ? $graphic_animation_delay : '0';
$title_color = ( $title_color != '' ) ? $title_color : '';
$text_color = ( $text_color != '' ) ? $text_color : '';
$link_text = ( $link_text != '' ) ? $link_text : '';
$link_color = ( $link_color != '' ) ? ' style="color: ' . $link_color . ';"' : '';
$href = ( $href != '' ) ? $href : '#';
$href_title = ( $href_title != '' ) ? $href_title : $link_text;
$href_target = ( $href_target == 'blank' ) ? ' target="_blank"' : '';
$align_h = ( $align_h != '' ) ? $align_h : 'center';
$align_v = ( $align_v != '' ) ? $align_v : 'top';
$side_graphic_spacing = ( $side_graphic_spacing != '' ) ? $side_graphic_spacing : '20px';
$max_width = ( $max_width != '' ) ? ' max-width: ' . $max_width . ';' : ' max-width: none;';
$child = ( $child == 'true' ) ? $child : '';
$connector_width = ( $connector_width != '' ) ? $connector_width : '1px';
$connector_style = ( $connector_style != '' ) ? $connector_style : 'dashed';
$connector_color = ( $connector_color != '' ) ? $connector_color : '#2ecc71';
$connector_animation = ( $connector_animation != '' ) ? $connector_animation : 'none';
//
// Graphic - design.
//
$graphic_font_size = 'font-size: ' . $graphic_size . ';';
if ( $graphic_border != '' && $graphic_shape != 'hexagon' && $graphic_shape != 'badge' ) {
$graphic_border = ' ' . $graphic_border;
} else {
$graphic_border = '';
}
if ( $graphic != 'image' ) {
$graphic_colors = ' color: ' . $graphic_color . '; background-color: ' . $graphic_bg_color . ';';
} else {
$graphic_colors = '';
}
if ( $graphic_shape == 'hexagon' || $graphic_shape == 'badge' ) {
$graphic_pseudo_element_color = ' border-color: ' . $graphic_bg_color . ';';
} else {
$graphic_pseudo_element_color = '';
}
//
// Graphic - side alignment.
//
if ( $align_h != 'center' ) {
$side_align_style = ' style="display: table-cell; vertical-align: ' . $align_v . ';"';
$side_graphic_spacing = ( $align_h == 'left' ) ? ' margin-right: ' . $side_graphic_spacing . ';' : ' margin-left: ' . $side_graphic_spacing . ';';
} else {
$side_align_style = '';
$side_graphic_spacing = '';
}
//
// Graphic - attributes.
//
$graphic_container_class_style = ' class="x-feature-box-graphic ' . $graphic_shape . '"' . $side_align_style;
$graphic_outer_class_style = ' class="x-feature-box-graphic-outer ' . $graphic_shape . cs_animation_base_class( $graphic_animation ) . '" style="' . $side_graphic_spacing . '"';
$graphic_inner_class_style = ' class="x-feature-box-graphic-inner ' . $graphic_shape . '" style="' . $graphic_font_size . $graphic_pseudo_element_color . '"';
$graphic_style = ' style="margin: 0 auto;' . $graphic_border . $graphic_colors . '"';
//
// Graphic.
//
if ( $graphic == 'image' ) {
$graphic = '<div' . $graphic_container_class_style . '>'
. '<div' . $graphic_outer_class_style . '>'
. '<div' . $graphic_inner_class_style . '>'
. '<img class="' . $graphic_shape . '" src="' . $graphic_image . '"' . $graphic_style . '>'
. '</div>'
. '</div>'
. '</div>';
} else if ( $graphic == 'numbers' && $child == 'true' ) {
$graphic = '<div' . $graphic_container_class_style . '>'
. '<div' . $graphic_outer_class_style . '>'
. '<div' . $graphic_inner_class_style . '>'
. '<i class="number w-h ' . $graphic_shape . '"' . $graphic_style . '></i>'
. '</div>'
. '</div>'
. '</div>';
} else {
$graphic = '<div' . $graphic_container_class_style . '>'
. '<div' . $graphic_outer_class_style . '>'
. '<div' . $graphic_inner_class_style . '>'
. '<i class="x-icon-' . $graphic_icon . ' ' . $graphic_shape . '" data-x-icon="&#x' . fa_unicode( $graphic_icon ) . ';"' . $graphic_style . '></i>'
. '</div>'
. '</div>'
. '</div>';
}
//
// Connector.
//
if ( $child == 'true' ) {
$left = ( $align_h == 'left' ) ? ' left: 0;' : ' left: calc(100% - ' . $graphic_size . ');';
$right = ( $align_h == 'right' ) ? ' right: 0;' : ' right: calc(100% - ' . $graphic_size . ');';
$connector_class = cs_animation_base_class( $connector_animation );
$connector_style = 'style="' . $graphic_font_size . $left . $right . ' border-left: ' . $connector_width . ' ' . $connector_style . ' ' . $connector_color . ';"';
$connector_text = '<span class="visually-hidden">Connector.</span>';
if ( $align_v == 'top' ) {
$connector = '<span class="x-feature-box-connector full' . $connector_class . '" ' . $connector_style . '>' . $connector_text . '</span>';
} else {
$connector = '<span class="x-feature-box-connector upper' . $connector_class . '" ' . $connector_style . '>' . $connector_text . '</span>'
. '<span class="x-feature-box-connector lower' . $connector_class . '" ' . $connector_style . '>' . $connector_text . '</span>';
}
} else {
$connector = '';
}
//
// Content.
//
$title_color = ( $title_color != '' ) ? ' style="color: ' . $title_color . ';"' : '';
$text_color = ( $text_color != '' ) ? ' style="color: ' . $text_color . ';"' : '';
$link = ( $link_text != '' ) ? ' <a href="' . $href . '" title="' . $href_title . '"' . $href_target . $link_color . '>' . $link_text . '</a>' : '';
$output = '<div class="x-feature-box-content"' . $side_align_style . '>'
. '<h3 class="x-feature-box-title"' . $title_color . '>' . $title . '</h3>'
. '<p class="x-feature-box-text"' . $text_color . '>' . do_shortcode( $content ) . $link . '</p>'
. '</div>';
//
// Output.
//
$js_params = array(
'child' => ( $child == 'true' ),
'graphicAnimation' => $graphic_animation
);
if ( $child == 'true' ) {
$js_params['connectorAnimation'] = $connector_animation;
$js_params['alignH'] = $align_h;
$js_params['alignV'] = $align_v;
} else {
$js_params['graphicAnimationOffset'] = $graphic_animation_offset;
$js_params['graphicAnimationDelay'] = $graphic_animation_delay;
}
$data = cs_generate_data_attributes( 'feature_box', $js_params );
$element = ( $child == 'true' ) ? 'li' : 'div';
$ordered_content = ( $align_h == 'right' ) ? $output . $graphic : $graphic . $output;
$align_h = ' ' . $align_h . '-text';
$align_v = ' ' . $align_v . '-text';
$output = "<{$element} {$id} class=\"{$class}{$align_h}{$align_v} cf\" style=\"{$style}{$max_width}\" {$data}>"
. $connector
. $ordered_content
. "</{$element}>";
return $output;
}
function change_featuredbox(){
remove_shortcode( 'x_feature_box');
add_shortcode( 'x_feature_box', 'custom_x_shortcode_feature_box' );
}
add_action('wp', 'change_featuredbox');
// =============================================================================
Please be very careful in copying and pasting of the code. One invalid quote or a character could result to a fatal error.
Please let us know how it goes.
I placed this in the functions.php file in my child theme but nothing changed.
Hey There,
To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.
Thank you.
Hi There,
As you have under construction active you also need to provide us your login credentials in a secure note.
Thank you
Here you go.
Hello There,
Thanks for providing the information. I have logged in and modified the code. I went ahead and added it again in your child theme’s functions.php file. The feature box title is now using h3 tag.
Please check your site again.