title: Changed cloned content with PHP and jQuery
body: <p>In a template, I want to clone the content of "#content-standard" into #content-blue. That is done in jQuery and works fine. The cloned content gets different styling, which is set in its new parent with class "new-bgcolor".</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="content-wrapper"&gt;
  &lt;div class="content-container-main"&gt;    
      &lt;div id="content-blue" class="new-bgcolor"&gt; 
      &lt;/div&gt;
  &lt;/div&gt;    
  &lt;div id="content-standard"&gt;
      &lt;main id="front-page" role="main"&gt;
      &lt;?php $args = array('posts_per_page'=&gt;1,'cat=-2'); 
          if(!isset($loopfront)){ $loopfront='';} $loopfront = new WP_Query($args); 
          while ( $loopfront-&gt;have_posts() ) { $loopfront-&gt;the_post(); get_template_part( './parts/content', 'page' );}unset($loopfront); ?&gt;
      &lt;/main&gt;             
  &lt;/div&gt;  
  </code></pre>
  
  <p></p>
  
  <p>But after cloning, I need to replace a certain piece of this content to match with the new styling from new-bgcolor. </p>
  
  <p>The content from content-standard get generated by fetching the theme part content-page.php in the folder parts. For content-standard inside the div content-blue, I need to load another template part, which loads a function. What this function does is cloning and altering an uploaded image with an iMagick script and extends the name so the changed image doen't overwrite the original.</p>
  
  <p>So template part "content-page.php" with #content-standard" loads an image "//localhost:3000/content/uploads/2017/09/image.jpg", template part "content-page_blue.php" should load "//localhost:3000/content/uploads/2017/09/image-blurred.jpg"</p>
  
  <p>content-page_blue.php gets the blurred image by this function.</p>
  
  <pre><code>&lt;?php $page = get_post(); $image_alt = get_post_meta( $page-&gt;ID, '_wp_attachment_image_alt', true); $featured = wp_get_attachment_image( get_post_thumbnail_id($page-&gt;ID), 'full' ); $thumb_id = get_post_thumbnail_id();  $thumb_url = wp_get_attachment_image_src($thumb_id,'thumbnail-size', true); $path = pathinfo($thumb_url[0]); $extension = pathinfo($thumb_url[0], PATHINFO_EXTENSION); $newfilename = $path['filename']."-blurred"; $newfile = $path['dirname']."/".$newfilename.".".$extension; $thumbs = get_field('thumbs', $page-&gt;ID);?&gt;&lt;?php if($featured) { ?&gt; &lt;div id="post-featured-&lt;?php echo $post-&gt;ID; ?&gt;" class="post-image"&gt;&lt;a href="&lt;?php the_permalink(); ?&gt;"&gt;&lt;img src="&lt;?php echo $newfile; ?&gt;"/&gt;&lt;/a&gt;&lt;p&gt;&lt;?php echo get_post(get_post_thumbnail_id())-&gt;post_excerpt;?&gt;&lt;/p&gt;&lt;/div&gt;&lt;?php } ?&gt;
  </code></pre>
  
  <p>This is also tested and works fine in a previous setup. The problem with the new setup is that I can't seem to load "content-page_blue.php" in the cloned div. My knowledge of jQuery is limited and I used this:</p>
  
  <pre><code>$("#content-standard").clone().appendTo("#content-blue"); var newContent = $('#content-blue').siblings('#content-standard'); $('#content-blue').load("parts/content-page_blue.php" + newContent);
  </code></pre>
  
  <p>It can't find the template part and bounced an </p>
  
  <blockquote>
    <p>404 Error <a href="http://localhost:3000/parts/content-page_blue.php" rel="nofollow noreferrer">http://localhost:3000/parts/content-page_blue.php</a></p>
  </blockquote>
  
  <p>Maybe this has got to do with the WP Skeleton setup (which puts the content and WP folder in a public folder) in combination of the page that loads the script is different from the template parts? It looks like this:
  <a href="https://i.stack.imgur.com/rQYyu.png" rel="nofollow noreferrer">theme setup.</a>
  Any help is appreciated and sorry for the long story.</p>