Best approach to alter simple markup contained within a parent theme function when child theming?

So Im not entirely sure what the best way to accomplish this task is exactly. I tried out some things just to see what worked but I have no idea if how I accomplished this task is the most appropriate way, so Im hoping some much smarter folks than myself can enlighten me hopefully…

In short, the theme that I’m child theming seems to aggregately use functions in order to execute different blocks of code for the themes layout.

The code that I needed to make some small alterations to were contained within multiple functions inside the parent theme, and the only way that I figured out via trial and error to make my changes work inside my child theme was to copy over the functions that needed to be changed from the parent theme, and then simply re-declare them by appending the name of the function slightly.

This worked fine, but I have no idea if this is bad practice so I wanted to double check with the community on what the best way to approach this sorta thing would be.

All thats really being changed is Im removing the avatar that is being
marked up in the header. – I could technically just hide this with
CSS, but I dont want to completely hide “all” avatars on my site with
this ID in the process so I opted to alter the code instead.

The original set of functions from the parent theme:

/**
* This function contains large post title markup.
* It is used in ‘flexia_post_large_title’ method.
*
* @since v0.0.5
*/
function flexia_post_large_title_markup() {
$thumbnail = ”;
if (function_exists(‘has_post_thumbnail’)) {
if ( has_post_thumbnail() ) {
$thumbnail = wp_get_attachment_url( get_post_thumbnail_id() );
}
}
?>
<header class=”page-header single-blog-header” <?php if ( ! empty( $thumbnail ) ) : ?>
style=”background-image: url(‘<?php echo esc_attr($thumbnail); ?>’);” <?php endif; ?> <?php if ( empty( $thumbnail ) ) : ?>
style=”background-image: url(‘<?php echo esc_attr(get_header_image()); ?>’);” <?php endif; ?>>
<div class=”header-inner”>
<div class=”header-content”>
<?php the_title( ‘<h1 class=”blog-title”>’, ‘</h1>’ ); ?>
<?php flexia_post_large_title_author_avatar_markup(); ?>
</div>
</div>
<div class=”header-overlay”></div>
</header>
<?php
}

/**
* This function contains large post title author avatar markup.
* It is used in ‘flexia_post_large_title_markup’ method.
*
* @since v0.0.5
*/
function flexia_post_large_title_author_avatar_markup() {

if( class_exists( ‘CMB2_Bootstrap_230’ ) ) {
global $post;
$post_title_header_meta = get_post_meta( $post->ID, ‘_flexia_post_meta_key_header_meta’, true );
$post_title_header_post_author = get_post_meta( $post->ID, ‘_flexia_post_meta_key_header_author_meta’, true );
if( $post_title_header_meta == ‘yes’ || $post_title_header_meta == NULL ) {
if( $post_title_header_post_author == ‘yes’ || $post_title_header_post_author == NULL ) {
?>
<div class=”blog-author”>
<div class=”author-avatar”>
<?php echo get_avatar( get_the_author_meta( ‘ID’ ), ‘flexia-thumbnail-avatar’ ); ?>
<div class=”author-body”>
<h4 class=”author-heading”><?php the_author(); ?></h4>
</div>
</div>
</div>
<?php
}else {
return false;
}
}else {
return false;
}
}else {
?>
<div class=”blog-author”>
<div class=”author-avatar”>
<?php echo get_avatar( get_the_author_meta( ‘ID’ ), ‘flexia-thumbnail-avatar’ ); ?>
<div class=”author-body”>
<h4 class=”author-heading”><?php the_author(); ?></h4>
</div>
</div>
</div>
<?php
}
}
/**
*
*/
function flexia_post_large_title_header_meta_markup() {
?>
<header class=”entry-header single-blog-meta single-post-meta-large”>
<?php
if ( ‘post’ === get_post_type() ) : ?>
<div class=”entry-meta”>
<?php flexia_updated_on(); ?>
</div><!– .entry-meta –>
<?php
endif; ?>
</header><!– .entry-header –>
<?php
}

/**
* This function will show/hide large post title
*
* @since v0.0.5
*/
function flexia_post_large_title() {
$flexia_single_posts_layout = get_theme_mod(‘flexia_single_posts_layout’, ‘flexia_single_posts_layout_large’);
if( class_exists( ‘CMB2_Bootstrap_230’ ) ) {
global $post;
$post_title = get_post_meta( $post->ID, ‘_flexia_post_meta_key_page_title’, true );
$post_title_header_meta = get_post_meta( $post->ID, ‘_flexia_post_meta_key_header_meta’, true );
if( $post_title == ‘default’ || $post_title == NULL ) {
if( $flexia_single_posts_layout == ‘flexia_single_posts_layout_large’ ) {
flexia_post_large_title_markup();
if( $post_title_header_meta == ‘yes’ || $post_title_header_meta == NULL ) {
flexia_post_large_title_header_meta_markup();
}
}else {
return false;
}
}elseif( $post_title == ‘large’) {
flexia_post_large_title_markup();
if( $post_title_header_meta == ‘yes’ || $post_title_header_meta == NULL ) {
flexia_post_large_title_header_meta_markup();
}
}else {
return false;
}
}else {
if( $flexia_single_posts_layout == NULL || $flexia_single_posts_layout == ‘flexia_single_posts_layout_large’ ) {
flexia_post_large_title_markup();
flexia_post_large_title_header_meta_markup();
}
}

}

My crude attempt at amending the code in order to make some simple changes to the markup which is placed in my child theme’s functions.php
(Ive commented out the parts that Ive deleted from the original function so you can see what Ive removed easier):

// This function contains large post title markup.
// It is used in ‘flexia_post_large_title’ method.

function hbps_flexia_post_large_title_markup() {
$thumbnail = ”;
if (function_exists(‘has_post_thumbnail’)) {
if ( has_post_thumbnail() ) {
$thumbnail = wp_get_attachment_url( get_post_thumbnail_id() );
}
}
?>
<header class=”page-header single-blog-header” <?php if ( ! empty( $thumbnail ) ) : ?>
style=”background-image: url(‘<?php echo esc_attr($thumbnail); ?>’);” <?php endif; ?> <?php if ( empty( $thumbnail ) ) : ?>
style=”background-image: url(‘<?php echo esc_attr(get_header_image()); ?>’);” <?php endif; ?>>
<div class=”header-inner”>
<div class=”header-content”>
<?php the_title( ‘<h1 class=”blog-title”>’, ‘</h1>’ ); ?>
</div>
</div>
<div class=”header-overlay”></div>
</header>
<?php
}

// Change blog header titles by removing Avatar and including By: before Author

// This function contains large post title author avatar markup.
// It is used in ‘flexia_post_large_title_markup’ method.

function hbps_flexia_post_large_title_author_avatar_markup() {

if( class_exists( ‘CMB2_Bootstrap_230’ ) ) {
global $post;
$post_title_header_meta = get_post_meta( $post->ID, ‘_flexia_post_meta_key_header_meta’, true );
$post_title_header_post_author = get_post_meta( $post->ID, ‘_flexia_post_meta_key_header_author_meta’, true );
if( $post_title_header_meta == ‘yes’ || $post_title_header_meta == NULL ) {
if( $post_title_header_post_author == ‘yes’ || $post_title_header_post_author == NULL ) {
?>
<div class=”blog-author”>
<div class=”author-avatar”>
<!– <?php echo get_avatar( get_the_author_meta( ‘ID’ ), ‘flexia-thumbnail-avatar’ ); ?> –>
<div class=”author-body”>
<h4 class=”author-heading”>By: <?php the_author(); ?></h4>
</div>
</div>
</div>
<?php
}else {
return false;
}
}else {
return false;
}
}else {
?>
<div class=”blog-author”>
<div class=”author-avatar”>
<!– <?php echo get_avatar( get_the_author_meta( ‘ID’ ), ‘flexia-thumbnail-avatar’ ); ?> –>
<div class=”author-body”>
<h4 class=”author-heading”>By: <?php the_author(); ?></h4>
</div>
</div>
</div>
<?php
}
}

function hbps_flexia_post_large_title_header_meta_markup() {
?>
<header class=”entry-header single-blog-meta single-post-meta-large”>
<?php
if ( ‘post’ === get_post_type() ) : ?>
<div class=”entry-meta”>
<?php flexia_updated_on(); ?>
</div><!– .entry-meta –>
<?php
endif; ?>
</header><!– .entry-header –>
<?php
}

// This function will show/hide large post title

function hbps_flexia_post_large_title() {
$flexia_single_posts_layout = get_theme_mod(‘flexia_single_posts_layout’, ‘flexia_single_posts_layout_large’);
if( class_exists( ‘CMB2_Bootstrap_230’ ) ) {
global $post;
$post_title = get_post_meta( $post->ID, ‘_flexia_post_meta_key_page_title’, true );
$post_title_header_meta = get_post_meta( $post->ID, ‘_flexia_post_meta_key_header_meta’, true );
if( $post_title == ‘default’ || $post_title == NULL ) {
if( $flexia_single_posts_layout == ‘flexia_single_posts_layout_large’ ) {
hbps_flexia_post_large_title_markup();
if( $post_title_header_meta == ‘yes’ || $post_title_header_meta == NULL ) {
hbps_flexia_post_large_title_header_meta_markup();
}
}else {
return false;
}
}elseif( $post_title == ‘large’) {
hbps_flexia_post_large_title_markup();
if( $post_title_header_meta == ‘yes’ || $post_title_header_meta == NULL ) {
hbps_flexia_post_large_title_header_meta_markup();
}
}else {
return false;
}
}else {
if( $flexia_single_posts_layout == NULL || $flexia_single_posts_layout == ‘flexia_single_posts_layout_large’ ) {
hbps_flexia_post_large_title_markup();
hbps_flexia_post_large_title_header_meta_markup();
}
}

}

Read more here:: Best approach to alter simple markup contained within a parent theme function when child theming?

Leave a Reply

Your email address will not be published. Required fields are marked *