How to customize New Blog Templates frontend thumbnails

Hi, the template name was appearing for “New Blog Templates” just when I was mousing hover the thumbnails. But with a jquery code I have inserted it at the thumbnail top. But I am still getting an error with my code when I browse the templates category. Please, take a look at esites.pro and check it out for realizing the error. The code I made is this one:

var templateNames = jQuery( ‘.template-name’ );

var previewWrap = jQuery( ‘.theme-previewer-wrap’ );

for ( i=0; i < templateNames.length ; i++ ) {

templateNames.eq( i ).remove();

previewWrap.eq( i ).prepend( templateNames.eq( i ) );

}

Do you have any idea about how to change it in the backend for not getting the error anymore? Is there any hook for that?

Thank you!

  • Michelle Shull
    • DEV MAN’s Apprentice

    Hey there, diegpl! Happy Friday.

    I'm looking at esites.pro, and the tooltip on hover actually looks great to me, I'm not seeing an error? Can you let me know more specifically what you're seeing here, so I can take a closer look? I took a screenshot of what I'm seeing here.

    Thanks!

  • Bojan Radonic
    • Head of Support

    Hey there @diegpl,

    Hope you’re well today and sorry for the late reply. I can see the issue now when viewing the categories, the title is only displayed when hovered on.

    I’ll include an available developer from second level support line in this thread for his valuable opinion on this issue. Please note that, developer response might be slower than usual staff response, so we appreciate your patience on this.

    Best regards,

    Bojan

  • Bojan Radonic
    • Head of Support

    Hey there @diegpl,

    Hope you’re well today and sorry for the late reply. I can see the issue now when viewing the categories, the title is only displayed when hovered on.

    I’ll include an available developer from second level support line in this thread for his valuable opinion on this issue. Please note that, developer response might be slower than usual staff response, so we appreciate your patience on this.

    Best regards,

    Bojan

  • diegpl
    • Syntax Hero

    Hi man, thank you for your answer. But I don`t think the developer is needed here though. I just need the frontend hooks list, related to the title and thumbnail, for customizing the plugin. Or if just the programmer has it, that is ok then.

    Obs.: the forum is not accepting apostrophe for words contraction.

    Thank you very much!!!

  • Michael Bissett
    • Recruit

    Hey @diegpl, my apologies for the delay here!

    After doing a good deal of research into this, the problem looks to be due to the code being called too far down the page. I see that you’re presently calling your script inside the footer, but we’ll want to move that up the page, and hook into “the_content” instead.

    The first clue to this is on line 118 of:

    /blogtemplates/blogtemplates.php

    add_filter( 'the_content', 'nbt_display_page_showcase' );

    Further up the page, you’ll see this mentioned on line 106:

    nbt_render_theme_selection_scripts( $settings );

    If we move down to line 329 of that same file, you’ll see the “nbt_render_theme_selection_scripts” laid out, inside of it the CSS and jQuery code for each type of template selector.

    The thing is, the content area gets reloaded each time that you click on a tab, which means you’ll want to have your code fire on the reload of that content area. That should allow you to apply your code changes for every category tab. :slight_smile:

    Hope this helps! :slight_smile:

    Kind Regards,

    Michael

  • diegpl
    • Syntax Hero

    Ok, currently, my function is like this:

    add_filter('wp_footer','custom_thumbnails');
    function custom_thumbnails() {
    echo "<script type='text/javascript'>
    jQuery('#blog_template-selection').children('h3').text('choose your template & start to edit it!');
    console.log( jQuery('.template-name') );
    var templateNames = jQuery( '.template-name' );
    var previewWrap = jQuery( '.theme-previewer-wrap' );
    for ( i=0; i < templateNames.length ; i++ ) {
    templateNames.eq( i ).remove();
    previewWrap.eq( i ).prepend( templateNames.eq( i ) );
    }
    </script>";

    So, I tried to call it through the content as you said, changing wp_footer for the_content hook, using filter or action, and both has just deleted the whole content, bringing just the function:

    add_action( 'the_content','custom_thumbnails');
    and
    add_filter( 'the_content','custom_thumbnails');

  • diegpl
    • Syntax Hero

    I also tried to make it run with nbt_display_page_showcase() function adding @include before the filter, again just above $content. But it still did not work:

    function custom_thumbnails() {
    echo "<script type='text/javascript'>
    jQuery('#blog_template-selection').children('h3').text('choose your template & start to edit it!');
    console.log( jQuery('.template-name') );
    var templateNames = jQuery( '.template-name' );
    var previewWrap = jQuery( '.theme-previewer-wrap' );
    for ( i=0; i < templateNames.length ; i++ ) {
    templateNames.eq( i ).remove();
    previewWrap.eq( i ).prepend( templateNames.eq( i ) );
    }
    </script>";
    }
    @include add_filter('wp_footer','custom_thumbnails');

  • diegpl
    • Syntax Hero

    I also tried this:

    $filterFunction = add_filter('wp_footer','custom_thumbnails');
    $content .= ob_get_clean() + $filterFuncion;

    But it did not work.

    I also tried to do this:

    $filterFunction = add_filter('wp_footer','custom_thumbnails');
    $content .= ob_get_clean();
    $content .= $filterFuncion;

    But it still did not work too :disappointed:

  • diegpl
    • Syntax Hero

    I have inserted it in the end of nbt_render_theme_selection_scripts() and it has run, but still just once, not after I try the category browsing :disappointed:

    So, can you please, be more clear about what I should do about it? Thank you very much!

  • Michelle Shull
    • DEV MAN’s Apprentice

    Hey there, diegpl!

    I just threw up the bat signal for our second line support team to have a look here and see if they can provide some guidance here. I know they’ve got a lot on their plates right now, so I sent a message to Mike as well, to see if he can recall some details about the fix he gave you.

    While I don’t think the second line team will need it, would you mind sending in some details just in case they’d like to take a direct look at your site?

    https://premium.wpmudev.org/contact/

    Subject: “Attn: Michelle Shull

    -WordPress admin username

    -WordPress admin password

    -login url

    -FTP credentials (host/username/password)

    -link back to this thread for reference

    -any other relevant urls

    Select “I have a different question” for your topic – this and the subject line ensure that it gets assigned to me.

    Thanks!

  • diegpl
    • Syntax Hero

    Ok, I have sent it, but I do not think this is something they need to take a look directly at my server, because I am not integrating anything else with it. I am just wanting a way for running a custom jQuery code every time that nbt_display_page_showcase() function is called. But it is there though :wink:

    Thank you very much!!!

  • Michael Bissett
    • Recruit

    Hey @diegpl,

    After digging into this further, while I had to rewrite the function itself a bit, the key thing is hooking into the AJAX calls that the plugin makes when loading the list of templates, by adding the function to the “wp_ajax_nbt_filter_categories” & “wp_ajax_nopriv_nbt_filter_categories” actions:

    add_filter('wp_footer','custom_thumbnails');
    add_action( 'wp_ajax_nbt_filter_categories', 'custom_thumbnails', 1 );
    add_action( 'wp_ajax_nopriv_nbt_filter_categories', 'custom_thumbnails', 1 );

    function custom_thumbnails($content) {
    //add_filter( 'the_content', 'nbt_display_page_showcase' );

    $new_content = "<script type='text/javascript'>
    jQuery('#blog_template-selection').children('h3').text('choose your template & start to edit it!');
    console.log( jQuery('.template-name') );
    var templateNames = jQuery( '.template-name' );
    var previewWrap = jQuery( '.theme-previewer-wrap' );
    for ( i=0; i < templateNames.length ; i++ ) {
    templateNames.eq( i ).remove();
    previewWrap.eq( i ).prepend( templateNames.eq( i ) );
    }
    </script>";

    $content .= $new_content;

    echo $content;

    }

    After doing that, I’m now seeing your code being loaded when I switch template categories. :slight_smile:

    Could you confirm the same on your end please?

    Kind Regards,

    Michael

  • Michael Bissett
    • Recruit

    Hey @diegpl,

    Your original code was inserted into this file, which I went ahead and tweaked, editing your custom thumbnails script:

    /wp-content/plugins/translate-new-blog-templates/insert-it-at-head.php

    As a side note for next time, it’d really be appreciated if the location of the custom code was mentioned, took me a fair amount of digging before I stumbled into it. :slight_smile:

    Glad to hear that you like the changes, hope you’re doing well today! :smiley:

    Kind Regards,

    Michael

  • diegpl
    • Syntax Hero

    Hi, thank you a log for it. It is really good :wink:

    But I have customized the margin columns as they are odd or even, but now they are touching each other. What is the best way to not let that happen? Is it with CSS or something else? Because by CSS I was not able to think in anything…

    Thank you!

  • Michael Bissett
    • Recruit

    Hey @diegpl,

    I do see what you mean about the touching columns here, but I’m not sure that I understand what it is you’re after, could you help me out here? :slight_smile:

    Just looking at things, I’d want to remove this code:

    body .theme-previewer-wrap:nth-child(4n) {
    margin-right: 0px;
    }

    And I’d want to insert this code:

    @media only screen and (min-width: 769px) and (max-width: 1040px) {

    body .theme-previewer-wrap .template-name {
    height: 40px;
    }

    body .theme-previewer-wrap button.select-theme-button {
    width: 100%;
    margin-left: -5px;
    font-size: 13px;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 13px;
    padding-bottom: 13px;
    }

    }

    Granted, it does make the boxes for the template titles taller, but given that the heights differ when you go down to a smaller screen size, there has to be some way to compensate for that.

    Also, within the adjustments I’ve provided here, it also helps to make the buttons fit more on smaller dimensions. :slight_smile:

    Kind Regards,

    Michael

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.