Email Opt In

digitalnomadquest · November 2, 2018, 5:38pm

Hi,

I tried the e-mail opt in provided by X Theme instead of my mailchimp plugin. I have a few questions:

Second page doesn’t load after you subscribe
If you go on digitalnomadquest.com the email subscribe is on the right hand side. or
http://digitalnomadquest.com/home/ - the email sub is on the bottom.

When I click subscribe - it either doesn’t move to the next page I have them directed to, or it does after a really long time like 5-10 seconds.

How do I fix this?

For some reason there’s a line jutting out on my subscribe box
Please check http://digitalnomadquest.com/home/ - you can see a black line coming out. How do I remove this?

How do I make it so the opt in is embedded automatically at the bottom of each post and page?
My current plugin (Mailmunch for Mailchimp) allows me to embed my opt-in onto every single page + post. If I remove this and use yours - how do I keep that going on each post and page rather than type in the shortcode on each page?

Thanks,
Sharon

ruenel · November 2, 2018, 7:31pm

Hello Sharon,

Thanks for writing in!

1.) I have tested your form by inserting X Staff and staff@theme.co email and after I have submitted, it redirects me to the next page. By the way, since you have WP SuperCache, you will need to clear the plugin cache first after making any site changes before your test your site again. Caching plugins are best turned on when you are finished building your site.

2.) The block square is coming from a custom code in one of the text element. You added this:

<span style="padding: 4px; background-color: rgba(0, 0, 0, 0.82);"></span>

If you remove that, then the square will also be removed.

3.) You can add this custom code in your child theme’s functions.php file which will add the email form at the end of every posts.

// =============================================================================
// Add email form right at the end of every posts
// =============================================================================
function add_emailform_below_post() {   
  
  // single post
  if( is_singular('post') ){
    echo do_shortcode('[tco_subscribe form="25213"]');
  }

}
add_action( 'x_before_the_content_end', 'add_emailform_below_post', 10 );
// =============================================================================

We would loved to know if this has work for you. Thank you.

digitalnomadquest · November 2, 2018, 11:13pm

Hi,

For the custom code to remove (#2)- where do I remove it from? I can’t find it.

Also for #3 - if you scroll all the way down on this:

It looks like the email optin adds it kind of strangely onto the end.

Is there any way to use the exact one I put on the digitalnomadquest.com/home page into the bottom of the posts + pages?

Thanks,
Sharon

ruenel · November 3, 2018, 1:09am

Hello Sharon,

2.) The code is in the text element. Please edit your section, find the text element where you have added the shortcode and remove the code.

3.) Are you referring to the whole section?

Please save this section as a block template. Then go to X > Global Blocks and create a new global block. You can then insert the newly saved block template. Save your changes and it will have it’s own global block shortcode. You can use this shortcode to replace the one I have provided and then the whole section will be displayed at the end of your posts.

Hope this helps.

digitalnomadquest · November 3, 2018, 1:35am

Hi thanks for the response. Sorry for all the questions!

This is where I put the shortcode, but I don’t think I put that code you mentioned. Are you referring to another area?

Yes that whole section - sorry could you guide me on how to save this section as as block template? And once I do this would I extract the code somewhere and then paste this on the areas you referred to? Thanks so much.

Best,
Sharon

ruenel · November 3, 2018, 3:50am

Hello Sharon,

The black square is because of this code:

<p><span style="padding: 4px; background-color: rgba(0, 0, 0, 0.82);">[tco_subscribe form="25213"]</span></p>

I have edited it and remove the span tag. Basically only the email form shortcode is left.

I have also saved your section and created it as a block template. I then created a Global Block and inserted the newly saved template. Now that you have the Global Block shortcode, all you have to do is to update the PHP code which I have given you in my previous reply. You may use this code instead:

// =============================================================================
// Add email form right at the end of every posts
// =============================================================================
function add_emailform_below_post() {   
  
  // single post
  if( is_singular('post') ){
    echo do_shortcode('[cs_gb id=25244]');
  }

}
add_action( 'x_before_the_content_end', 'add_emailform_below_post', 10 );
// =============================================================================

One thing I noticed though. You do not have a child theme. What you have been trying to accomplish requires a template customization, we would highly to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released.

Hope this helps. Please let us know how it goes.

digitalnomadquest · November 3, 2018, 8:21pm

Hi - thanks for this! If I use a child theme, will it replace everything I’ve been working on?

ruenel · November 3, 2018, 10:51pm

Hello Sharon,

The child theme will not replace everything you have been working. The child theme will inherit all the features and functions of the parent theme. The child theme is important because all those customizations and functions that you have added will not be overwritten when there is a theme update. Having said that, you must transfer all those custom php functions from the parent theme to the child theme’s functions.php file.

Before doing the child theme switch, please do this:

Go to your dashboard (https://theme.co/apex/dashboard) and download the child theme.
In your WordPress, go to X > Validation and find the Theme Options Manager.
Export your theme options by downloading it to your local computer.
Go to Appearance > Themes > Add New and upload the child theme you have downloaded.
Once uploaded and installed, activate your child theme
Go back to X > Validation > Theme Option Manager and import the previous downloaded XCS file. This is to make sure that you will have the same settings.
And lastly, please make sure that all your custom php code added in the parent theme’s functions.php file must be transferred to your child theme’s functions.php file

Hope this helps. Please let us know how it goes.

digitalnomadquest · November 4, 2018, 7:48pm

Hi, I installed the child theme, but now when I check the editor for the functions.php section, it looks blank. And when I edit it the whole site breaks. Can you advise?

ruenel · November 4, 2018, 8:27pm

Hello Sharon,

I have logged in and went ahead to edit your child theme’s functions.php file.
It now contains this code:

<?php

// =============================================================================
// FUNCTIONS.PHP
// -----------------------------------------------------------------------------
// Overwrite or add your own custom functions to X in this file.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Enqueue Parent Stylesheet
//   02. Additional Functions
// =============================================================================

// Enqueue Parent Stylesheet
// =============================================================================

add_filter( 'x_enqueue_parent_stylesheet', '__return_true' );



// Additional Functions
// =============================================================================


// =============================================================================
// Add email form right at the end of every posts
// =============================================================================
function add_emailform_below_post() {   
  
  // single post
  if( is_singular('post') ){
    echo do_shortcode('[tco_subscribe form="25213"]');
  }

}
add_action( 'x_before_the_content_end', 'add_emailform_below_post', 10 );
// =============================================================================

// Displaying Excerpt in Recent Posts
// =============================================================================

function x_shortcode_recent_posts_v2( $atts ) {
  extract( shortcode_atts( array(
    'id'           => '',
    'class'        => '',
    'style'        => '',
    'type'         => 'post',
    'count'        => '',
    'category'     => '',
    'offset'       => '',
    'orientation'  => '',
    'show_excerpt' => 'true',
    'no_sticky'    => '',
    'no_image'     => '',
    'fade'         => ''
  ), $atts, 'x_recent_posts' ) );

  $allowed_post_types = apply_filters( 'cs_recent_posts_post_types', array( 'post' => 'post' ) );
  $type = ( isset( $allowed_post_types[$type] ) ) ? $allowed_post_types[$type] : 'post';

  $id            = ( $id           != ''     ) ? 'id="' . esc_attr( $id ) . '"' : '';
  $class         = ( $class        != ''     ) ? 'x-recent-posts cf ' . esc_attr( $class ) : 'x-recent-posts cf';
  $style         = ( $style        != ''     ) ? 'style="' . $style . '"' : '';
  $count         = ( $count        != ''     ) ? $count : 3;
  $category      = ( $category     != ''     ) ? $category : '';
  $category_type = ( $type         == 'post' ) ? 'category_name' : 'portfolio-category';
  $offset        = ( $offset       != ''     ) ? $offset : 0;
  $orientation   = ( $orientation  != ''     ) ? ' ' . $orientation : ' horizontal';
  $show_excerpt  = ( $show_excerpt == 'true' );
  $no_sticky     = ( $no_sticky    == 'true' );
  $no_image      = ( $no_image     == 'true' ) ? $no_image : '';
  $fade          = ( $fade         == 'true' ) ? $fade : 'false';

  $js_params = array(
    'fade' => ( $fade == 'true' )
  );

  $data = cs_generate_data_attributes( 'recent_posts', $js_params );

  $output = "<div {$id} class=\"{$class}{$orientation}\" {$style} {$data} data-fade=\"{$fade}\" >";

    $q = new WP_Query( array(
      'orderby'             => 'date',
      'post_type'           => "{$type}",
      'posts_per_page'      => "{$count}",
      'offset'              => "{$offset}",
      "{$category_type}"    => "{$category}",
      'ignore_sticky_posts' => $no_sticky
    ) );

    if ( $q->have_posts() ) : while ( $q->have_posts() ) : $q->the_post();

      if ( $no_image == 'true' ) {
        $image_output       = '';
        $image_output_class = 'no-image';
      } else {
        $image              = wp_get_attachment_image_src( get_post_thumbnail_id(), 'entry-cropped' );
        $bg_image           = ( $image[0] != '' ) ? ' style="background-image: url(' . $image[0] . ');"' : '';
        $image_output       = '<div class="x-recent-posts-img"' . $bg_image . '></div>';
        $image_output_class = 'with-image';
      }

      $excerpt = ( $show_excerpt ) ? '<div class="x-recent-posts-excerpt"><p>' . preg_replace('/<a.*?more-link.*?<\/a>/', '', cs_get_raw_excerpt() ) . '</p></div>' : '';

      $output .= '<a class="x-recent-post' . $count . ' ' . $image_output_class . '" href="' . get_permalink( get_the_ID() ) . '" title="' . esc_attr( sprintf( csi18n('shortcodes.recent-posts-permalink'), the_title_attribute( 'echo=0' ) ) ) . '">'
                 . '<article id="post-' . get_the_ID() . '" class="' . implode( ' ', get_post_class() ) . '">'
                   . '<div class="entry-wrap">'
                     . $image_output
                     . '<div class="x-recent-posts-content">'
                       . '<h3 class="h-recent-posts">' . get_the_title() . '</h3>'
                       . '<span class="x-recent-posts-date">' . get_the_date() . '</span>'
                        . $excerpt
                     . '</div>'
                   . '</div>'
                 . '</article>'
               . '</a>';

    endwhile; endif; wp_reset_postdata();

  $output .= '</div>';

  return $output;

}

add_filter('wp_head', 'custom_recent_posts');

function custom_recent_posts() {
  remove_shortcode( 'x_recent_posts' );
  remove_shortcode( 'recent_posts' );
  add_shortcode( 'x_recent_posts', 'x_shortcode_recent_posts_v2' );
  add_shortcode( 'recent_posts', 'x_shortcode_recent_posts_v2' );
}
// =============================================================================

As you noticed, I already moved your custom PHP code from the parent theme’s functions.php file.

Please check it now.

digitalnomadquest · November 10, 2018, 8:43am

Hi thanks for this!

I redesigned the e-mail opt in but the global block is still the old one:

How do I make it into the newly updated one?(on digitalnomadquest.com/home) -->

Also is there any way to make the opt in have a slightly smaller form and bigger image on the side?

Thanks!
Sharon

rad · November 10, 2018, 12:56pm

Hi Sharon,

You mean that the form at the bottom of your home page should be this?

In that case, you should replace that entire area with the global block element, based on existing content, it’s not a global block but just section with columns, images, and so on.

Thanks!

digitalnomadquest · November 10, 2018, 6:03pm

Sorry I mean the ones in the bottom of the posts should be this:

If you scroll all the way down here you’ll be able to see it: http://digitalnomadquest.com/consistency-is-key/

ruenel · November 10, 2018, 8:10pm

Hello Sharon,

Once you save a section as a template, anything that you may changed in the original section will not affect the template nor the page or global block that you have applied the template on. What you need to do is to save your section changes as a new template and you re load it to the page or global block where you have used the template.

Hope this make sense.

digitalnomadquest · November 12, 2018, 4:56am

Hi - I’m still confused at how to save this as a global block. How do I do this?

Also is there any way to create an opt-in form that’s a pop up on my website? Currently I’m using the Mailchimp / Mailmunch plugin but when I get rid of it I want to replace it with a pop up from the theme. Thanks!

paul.r · November 12, 2018, 5:45am

Hi Sharon,

I think you mean how to save it as a template? Please review the link below.

For your pop-up, you can try convertplus plugin. It comes bundled with the theme and can be installed from validation page.

Hope that helps

digitalnomadquest · November 12, 2018, 6:43am

Cool I got the global block shortcode working. How do I make that email opt-in appear on pages as well (not just posts?) For example: http://digitalnomadquest.com/start-here/

paul.r · November 12, 2018, 6:47am

Hi Sharon,

You can change the conditional statement to include your pages.

eg.

Change this

if( is_singular('post') ){

to this

if( is_singular('post') || is_singular('page') ){

Hope that helps.

digitalnomadquest · November 12, 2018, 7:05am

Hi this duplicated the form on my home page: digitalnomadquest.com - can you advise? (I will change it back for now until I get a response)

paul.r · November 12, 2018, 7:14am

Hi,

In your homepage, you have added it section 6, you need to delete section 6 and change the conditional to this.

if( is_singular('post') || is_singular('page') ){

No need to add it within conerstone as that code will add it to all pages.

Thanks