Pro Sites and New Blog Templates customization

I have to queries:
1. I need to know if that's possible to redirect this button "choisir ce site" to "reservez votre site". So when a user chooses template the page will be automatically scrolled down to the "reservez votre site" button.

2. I need to force users to choose the templete before to create a website, so they shouldn't be able to create a site without choosing a template.

Is this possible?

  • Adam Czajczyk

    Hello Sarah

    I hope you're well today and thank you for your question!

    Currently, the way to "force" template selection is to actually set one of the templates as default one. In such case, if no selection is made by the user, that default one will be created.

    You could try this little code snippet tho:

    <?php
    function prosites_nbt_button_behavior() {
        ?>
        <script type="text/javascript">
        jQuery(function($) {
    		$("#check-prosite-blog").hide();
            $('.theme-previewer-overlay .select-theme-button').click(function(e) {
    			$("#check-prosite-blog").show();
    			 $('html, body').animate({
                        scrollTop: $("#check-prosite-blog").offset().top
                  }, 100);
    		});
        });
        </script>
        <?php
    }
    add_action('wp_footer', 'prosites_nbt_button_behavior');

    What it does (when tested on my setup) is:

    - it hides the "reserve your site" button entirely (to "force" choice)
    - upon clicking "select this theme" button it shows the "reserve your site" button back
    - it scrolls the page down to that button

    It's based on JS but shouldn't be added via any "builder/composer" option. Instead, please add it as an MU plugin, like this:

    - create an empty file with a .php extension (e.g. "pro-sites-nbt-scroll.php")
    - copy and paste entire code inside (using some "clean text" editor such as e.g. Notepad++, Sublime or similar)
    - upload the file (via FTP or cPanel's "File Manager") to the "/wp-content/mu-plugins" folder of your WP install.

    If there is no "mu-plugins" folder inside "wp-content" folder, just create one.

    Give it a try please and let me know if it helped.

    Best regards,
    Adam

  • Sarah

    Hi Predrag,

    As mu-plugin is easy to use I tested what Adam gives to me. And also because in that mu-plugin there was the possibility to hide the button "create a website" until the user select a templete, so that will force him to choose a templete.

    I don't try your code, it seems that it works for you so if you can help me to mix those both code so that will be greate.

    Could you help me please?

    Regards, Sarah.

  • Predrag Dubajic

    Hi Sarah,

    I'm sorry but I think I'm a bit confused about what's going on here exactly.

    On your registration page the button is not visible until you select the template, and when you do select it the page will scroll down to button that will be shown now.
    So can you explain a bit more where exactly is the issue, and perhaps some steps I could follow to see the issue in order to understand it better.

    Best regards,
    Predrag

  • Adam Czajczyk

    Hi Sarah

    Thanks for pointing that issue out, I admit I didn't notice it at first.

    The problem here is that when you change the template category (click on one of the templates menu buttons) the content inside is loaded via AJAX so the "click()" JS function from my code is no longer properly binding to the button. That requires a bit different call so here's an updated code for you:

    <?php
    function prosites_nbt_button_behavior() {
        ?>
        <script type="text/javascript">
        jQuery(function($) {
    		$("#check-prosite-blog").hide();
    
    		$('body').on('click', '.theme-previewer-overlay .select-theme-button', function() {
    
    			$("#check-prosite-blog").show();
    			 $('html, body').animate({
                        scrollTop: $("#check-prosite-blog").offset().top
                  }, 100);
    		});
        });
        </script>
        <?php
    }
    add_action('wp_footer', 'prosites_nbt_button_behavior');

    To use it simply replace the one I previously gave you with this one. Give it a try please and let me know if it's now working for you :slight_smile:

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.