I would like to have an element from home page on all pages

Hello, I would like to have the email subscription section on the home page at the bottom of all pages above the footer area. I am using Jannah theme with a child theme and the home page used Tie Labs for the layout.

  • Adam Czajczyk
    • Support Gorilla

    Hi Carl

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

    First thing to do would be to actually decide on how that subscription should work. Are you planning to use some newsletter/auto-responder plugin to handle messages directly from your site/server or are you going to integrate with some 3rd-party service like e.g. MailChimp or similar?

    Have you checked our Hustle plugin already? It provides such forms that can be used in popups, slide-ins or embedded anywhere on the site via shortcodes and it provides integrations with most major mailing providers:

    https://premium.wpmudev.org/project/hustle/

    I also noticed that it's a multisite so do you mean "every page of the main site of the multisite" or rather homepages of each site of the multisite?

    Let me know please and I'll be glad to assist you further.

    Best regards,
    Adam

    • Carl
      • Flash Drive

      Hi, I haven’t checked Hustle yet. I’m using a embedded form from MailerLite. I find it easier to use than MailChip. The embed is in a HTML block using the TieLabs builder which comes with the Jannah Theme. https://themeforest.net/item/jannah-wordpress-news-magazine-theme/19659555

      If possible ild like to keep using it as I’ve now learned how to use it. But unfortunately it doesn’t come with the ability to make global elements.

      I don’t want to change themes either.

      I’ve used Divi but found it problemsome and clunky.

      I don’t want it to go across both sites as each one uses different subscription forms and different layouts.

      Thanks for you help so far.

  • Adam Czajczyk
    • Support Gorilla

    Hello Carl

    Thank you for additional explanation.

    I checked the site but it seems the simplest way to do it in this case will be to use an additional code snippet. Adding this to your site should help:

    <?php 
    
    function wpmu_add_subscription_form_footer() {
    
    	if ( 1 == get_current_blog_id() ) {
    	?>
        <script type="text/javascript">
        jQuery(function($) {
    		var subform = '<iframe style="border: none; width: 100%; height: 132px;" src="https://landing.mailerlite.com/webforms/landing/d9t1d7"></iframe>';
            $('#footer').prepend( subform );
        });
        </script>
        <?php
    	}
    }
    add_action('wp_footer','wpmu_add_subscription_form_footer');

    To apply it to the site:

    1. create an empty file with a .php extension (e.g. "add-subscribe-form-above-footer.php")
    2. copy and paste the code into that file (using some "clean text" editor such as Notepadd++, Sublime, cPanel's "file manager" editor or similar)
    3. upload the file via FTP or cPanel to the "/wp-content/mu-plugins" folder of the site's WP install; if there's no "mu-plugins" folder right inside the /wp-content/" folder, just create an empty one first.

    The code should work "out of the box" adding the entire "subscription block" right above the footer on each page of the main site of the Multisite.

    Give it a try, please, and let me know if it worked for you.

    Best regards,
    Adam

  • Adam Czajczyk
    • Support Gorilla

    Hi Carl

    You can "cap" the width to 1024px max but you'll first need to make a small change in the code that I shared previously. The point is that this entire form - entire block actually - is an "iframe" element which means it's a "page within a page" (kind of "browser inside the browser") and we can't address CSS of the page inside the iframe. But we can "cap" the width of iframe itself.

    Follow these steps please:

    1. edit the code that I shared previously and replace this line

    var subform = '<iframe style="border: none; width: 100%; height: 132px;" src="https://landing.mailerlite.com/webforms/landing/d9t1d7"></iframe>';

    with this one

    var subform = '<div class="subscribe-block"><iframe style="border: none; width: 100%; height: 132px;" src="https://landing.mailerlite.com/webforms/landing/d9t1d7"></iframe></div>';

    2. Once the code is updated, add following CSS to your site (you can add it e.g. via "Appearance -> Customize -> Additional CSS" in site's back-end or via some "custom css" option of the theme; remember to clear cache on site if there is any after adding CSS):

    #footer .subscribe-block {
    	width:100%;
    	overflow:hidden;
    	display:block;
    	background:#E82545;
    }
    #footer iframe {
    	max-width:1024px;
    	width:100%;margin:0 auto;
    	display:block;
    }

    I hope that helps :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.