I am developing an custom theme which could be a child theme of any arbitrary theme out there that has custom theme functions defined.

The home page is simply configured as list of latest posts. I need to filter the posts for categories and custom fields with Ajax .

The Ajax part including jQuery for the filter UI and the ajax action seem to work just fine.

However, iIf I run my custom query and use the parent theme's blog template as intented, the template part I am calling seems not to know all parent theme functions within my custom loop. While the 'filtered' posts list is being rendered, it does not use all Parent Theme settings.

This is, because parent_custom_theme_function(); in the template part seems not to work from within my custom query loop.

The My-Child/index.php file:

<?php
/**
 * The theme's index.php file.
 *
 */

// Do not allow directly accessing this file.
if ( ! defined( 'ABSPATH' ) ) {
    exit( 'Direct script access denied.' );
}
?>
<?php get_header(); ?>
<section id="content" <?php ThemeClass()->layout->add_class( 'content_class' ); ?> <?php ThemeClass()->layout->add_style( 'content_style' ); ?>>

    <?php get_template_part('templates/blog-list', 'teaser-post' ); ?>

    <?php get_template_part( 'templates/blog-list', 'filter-panel' ); ?>

    <div id="slp-sorted-posts-container"></div>

    <?php get_template_part( 'templates/blog', 'layout' ); ?>
</section>
<?php do_action( 'theme_after_content' ); ?>
<?php get_footer(); ?>

The jQuery part:

function slpAjaxSortPosts() {
    jQuery( '#filter input[type="radio"]' ).on( 'change', function () {
        jQuery( '#filter' ).submit();
    } )
    jQuery( '#filter' ).submit( function ( event ) {
        event.preventDefault();
        var filter = jQuery( '#filter' );
        jQuery.ajax( {
            url: filter.attr( 'action' ),
            data: filter.serialize(),
            type: filter.attr( 'method' ),
            beforeSend: function ( xhr ) {
                filter.find( '#most-read-posts' ).text( 'Sortiere...' );
            },
            success: function ( data ) {
                filter.find( '#most-read-posts' ).text( 'Meistgelesene Beiträge' );
                jQuery( '#slp-sorted-posts-container' ).html( data );
            }
        } );
    })
}



/*
    RUN CUSTOM JS CODE
 */
app = jQuery( document ).ready( function () {

    slpAjaxSortPosts();

} )

The Ajax action in my custom plugin:

Class MyCustomizer {

        function __construct() {

            // WP Ajax Hook is always connected to 'admin-ajax.php' even when used in frontend
            if ( is_admin() ) {
                add_action( 'wp_ajax_post_filter', array( $this, 'ajax_sort_posts' ) );
                add_action( 'wp_ajax_nopriv_post_filter', array( $this, 'ajax_sort_posts' ) );
            }

        }

       function ajax_sort_posts() {

            global $wp_query;

            $attr = array(
                    'posts_per_page' => 5 // Filter args not yet set
            );
            $wp_query = new WP_Query( $attr );

            if ( $wp_query->have_posts() ) :
                get_template_part( 'templates/blog', 'layout' );
            endif;

            wp_reset_postdata();
        }

}
$my_customizer = new MyCustomizer();

Note: templates/blog-layout.php reads the original parent theme's file as I have no override for this in my child theme.

Now, the result is: the queried posts are being rendered within the appropriate container. But any parent theme functions referring to the parent theme class return an empty value instead the actual value from, say, the theme settings. Hence, the template part does not set all css classes properly.

Couldn't found any helpful content on Duckduckgo nor on Stackoverflow.

Can anyone point me in the right direction, how to implement an Ajax post filter within a child building on any parent theme right?