Change HTML output of template in child theme

  • Resolved Gizant

    (@gizant)


    3 years, 9 months ago

    Sorry guys Im using the free version here.

    I want to swap the position of the title and the thumbnail in the relevant php template file of a child theme that I made. I noticed that the title and thumbnail are inside a <header> tag. So I went looking which template file has this markup, applied to the post type ‘post’

    So instead of this

    <header class="entry-header ast-no-meta">
    <div class="post-thumb-img-content post-thumb"></div>
    <div class="ast-single-post-order"></div>
</header>

    I want this

    <header class="entry-header ast-no-meta">
    <div class="ast-single-post-order"></div>
    <div class="post-thumb-img-content post-thumb"></div>
</header>

    I have found this code in the template file that applies to pages: /template-parts/content-page.php

    This file has

    
<header class="entry-header <?php astra_entry_header_class();?>">

        <?php astra_get_post_thumbnail();?>

        <?php
astra_the_title(
    '<h1 class="entry-title" ' . astra_attr(
        'article-title-content-page',
        array(
            'class' => '',
        )
    ) . '>',
    '</h1>'
);
?>
    </header><!-- .entry-header -->

    This looks great, I could just override this template file in my child theme and put astra_get_post_thumbnail() below

    However, template files that apply to posts of the the type ‘post’ have code that gets me lost in the functions calling functions trail that I don’t know how to follow anymore.

    However, one file that seems like a good candidate is blog.php in the astra/inc folder.

    This file seems to have code that looks like I can work with it.

    Like the function astra_blog_post_thumbnail_and_title_order() The function name seems to imply that it’s the one to get called to actually determine the order of the title and featured image. But this function then seems to call functions of which how to work with them is starting to elude me, like image_before_ Which of course I could look op and eventually find out which HTML that in turn will output, but then how do you put that into one piece of logic. And are you supposed to?

    I tried to override astra/inc/blog/blog.php and put a copy of it in astra-child/inc/blog/blog.php and put a die(); function in front of everything. But it doesn’t seem to be doing anything. Cleared caches, refreshed many times. And triple checked the file name and made sure I copied the folder hierarchy into the child theme.

    • This topic was modified 3 years, 9 months ago by Gizant.
Viewing 10 replies - 1 through 10 (of 10 total)

  • Hi @gizant,

    Just in case you are not aware, there’s an option to swap the position of the Featured Image and the Post Title on the Customizer. Please refer to this screenshot.

    However, if you prefer to deal with the code, you might find our Developer Documentation helpful for you. We can’t help you with a custom code for very specific needs as it will be out of the scope of our support, sorry. I will let the community help and give you some insight into this.

    Kind regards,
    Herman ??

    Thread Starter Gizant

    (@gizant)

    Thanks for getting to back to me

    I think one important detail I left out is, that I want to change the layout only when the post type is of a certain category.
    But yeah I’m definitely not asking for having code written for me.
    And I did get through the documentation but couldn’t find anything that would cover this issue.

    Hi @gizant,

    This article might help you swap the title and thumbnail.

    And to have the different layout only for a certain category, you might want to create a Post Template and use that Post Template when you write a post for a certain category.

    I hope it helps.

    Kind regards,
    Herman ??

    Thread Starter Gizant

    (@gizant)

    Thank you Herman for getting back to me on it!

    I figured building a template in a more rudimentary way should always work, those resources seem spot on.

    Cheers
    Kevin

    Hi @gizant,

    You’re most welcome.

    Unless you need more help, please mark this topic as Resolved.

    Kind regards,
    Herman ??

    Thread Starter Gizant

    (@gizant)

    I finally managed to look into it, but the article you mentioned only helps you the meta data in a different place. Neither the Title of Thumbnail seems to be part of that.
    Looking back, it looks I was still on the right track with my initial question mentioning the function that is even literally called astra_blog_post_thumbnail_and_title_order(). In the solution of the article you mentioned, this function just stays unchanged in the single-layout.php file.

    So I have a hunch that I need to ‘something’ with astra_blog_post_thumbnail_and_title_order() but I haven’t been able to find which template file to override or what the possibilites are. I looked up the function in the Astra documentation, but there isn’t anything that says how you can use that function only the automatically parsed information and the source file.

    What I also mentioned, is that I already found the kind of detail I’m looking for in the context of pages. Namely that for pages
    /template-parts/content-page.php seems to be the template file that I would need. But since I want to alter posts and not pages, I need to find the template file that is the equivalent of /template-parts/content-page.php. I tried my hand at astra/inc/blog/blog.php with no success (also already in my initial question).

    • This reply was modified 3 years, 8 months ago by Gizant.
    Thread Starter Gizant

    (@gizant)

    Okay, so a workaround was to simply insert the desired markup in that specific location. A bit quick and dirty which isn’t ideal but I couldn’t get a handle on how to do it the clean way.

    Here is how made an override in /themes/my-childtheme/template-parts/single/single-layout.php

    <header class="entry-header <?php astra_entry_header_class(); ?>">
  
    <?php astra_single_header_top(); ?>
    <?php 

    $cat_id = '2';
    $category = get_category($cat_id);
    
    if (in_category($category->name)){
    ?>
        <h1 class="entry-title"> <?php single_post_title(); ?> </h1>
    <?php } 
    else 
        astra_blog_post_thumbnail_and_title_order(); 
    ?>

     <?php astra_single_header_bottom(); ?>
		
	</header><!-- .entry-header -->

	<?php astra_single_header_after(); ?>
    <?php if (in_category($category->name)){ ?>
        <div class="post-thumb-img-content post-thumb"> <?php the_post_thumbnail(); ?> </div>
    <?php } ?>
    • This reply was modified 3 years, 8 months ago by Gizant. Reason: Edited out comment that had information on the client site
    • This reply was modified 3 years, 8 months ago by Gizant. Reason: code formatting broke
    • This reply was modified 3 years, 8 months ago by Gizant. Reason: Added code for the thumbnail

    Hi @gizant,

    Good to know that you have figured out a workaround for this.

    Unfortunately, providing custom code for a very specific need is beyond our support, thus we commonly will let the community take the part for this kind of query.

    Thank you for sharing this. I am sure it will helpful for other users with the same need.

    Kind regards,
    Herman ??

    Thread Starter Gizant

    (@gizant)

    @brainstormteam More than fair enough. I appreciate the following up and supporting finding a solution in the free version.

    Cheers
    Kevin

    We love doing it @gizant ??

    ?Do let us know if there’s anything else we can help you with.

    ??Have a nice day and stay safe!

    Kind regards,
    Herman ??

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Change HTML output of template in child theme’ is closed to new replies.