How to Import WordPress Posts Including Images From One WordPress Site To Another

Today, we are going to show you how to import the images from WordPress posts from one website to another.

I’m sure you have tried going to Tools –> Import / Export and checking the box to include images and then you see that only the post content gets imported right?

Why the images do not get imported

The reason for this is the export step that causes issues with the image attachment. The WordPress export feature doesn’t include the ‘attachment’ post type unless you select the All content export option. If you are simply just trying to export posts from one website to another; you will lose your attachments, unfortunately.

If you do a compare from exporting just Posts and All content, the issue is quite obvious. Within the first file; in which we specified we only wanted Published statuses, the attachments are referenced in the posts, but the attachment table is ignored. In the second file, in which we exported All Statuses; the attachment table is included. In other words, the WordPress export function defines Attachment posts as something other than Published. Seems a bit of a pain but fortunately, we have a solution to the problem.

Imagine if you had a blog with 900 posts all with featured images and images within the posts and then there wasn’t a way to import this to a new site? Well, whenever there is a problem, there is always a good solution 😉

How to get your images into your new website…

Okay so if you are only wanting to import/export posts with images, then we recommend using the Auto Upload Images plugin, which can be used even to upload the images after you’ve imported the posts already.

What exactly does this plugin do?

  • It looks for image URLs in your posts (imported posts do still have image URLs in them, but they point to the site the content was exported from);
  • It then gets those external images and uploads them to the local WordPress uploads directory and adds the images to the media library;
  • And finally, it replaces the old image URLs with new URLs.

This process is easy to do and is relatively quick. Once you’ve finished the import, you can remove the plugin once the work is completed.

Step by step process

Step 1: Prepare your export file from the old website

Simply go to Tools > Export and export your posts only.

Step 2: Import your posts into your new website

On your new website, again go to Tools > Import and import the posts you exported. The importer has an option to download and import file attachments, but this won’t work if you’re not migrating all content, so you can simply ignore this option.

Step 3: Install and activate the Auto Upload Images plugin

Download the Auto Upload Images plugin and add it to your plugins folder, or simply search the name in your new website and install and activate the plugin. This will add an option under Settings > Auto Upload Images, but the default settings are all you need.

Step 4: Get the image from your old site into your new site

As of now, the plugin doesn’t have an option to automatically go through your posts and bulk upload all the images. Instead of this, it updates each post individually when you save them. If you have a lot of blog posts on your website, this can be some serious tedious work but we have a solution to that. You can go to your posts overview screen and bulk update your posts.

So what you do here is you select multiple posts and then under Bulk Actions; choose Edit and press the Apply button. Then, without making any adjustments, click the Update button. Depending on your server you may get a timeout as the process runs, so it’s a good idea to do this maybe 20 to 50 posts at a time.

To change the Pagination, you can click Screen Options at the top right and change the default value to the value of your choice.

Step 5: Check your posts and deactivate/uninstall the plugin

When all is done you can check your posts and confirm they now reference local images. You then no longer need the plugin and you can safely deactivate and delete it.

Do note, it’s always a good idea to make a backup of your new site first (at least of your site’s database).

Alternative Solution?

The other solution is to use the Export Featured Images plugin. Although the plugin hasn’t been updated in a very long time, it still works! This will allow you to export the featured images from posts or custom post types (CPT’s) by creating a WordPress XML export including the images.

Step by step process

  • First export the posts from your old site via Tool > Export and Import the posts to your new website
  • Then use this plugin in your old site and go to Tools > Export Featured Images and select post types. This will create a new .xml file for you.
  • Now, in your new site go to Tool and select WordPress Import. Then select the .xml file which you downloaded in the previous step.

And that’s it, just as simple as that. Now you will have all your posts mapped with featured images, pretty sweet right?

If you have found this helpful, or have a different solution you would like us to mention, please leave a comment below!

Happy Coding.

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to Add a Single Bootstrap Carousel to a Single Product Gallery using WooCommerce

Today we are going to show you how to replace the WooCommerce Gallery and Thumbnails to a single Bootstrap 4 Carousel.

We’re going to assume that you have already added WooCommerce Support and WooCommerce Product Gallery Slider, if not, you can add these by adding the following code to your functions.php file:


add_theme_support('woocommerce');
add_theme_support( 'wc-product-gallery-slider' );

# You can also add Lightbox Gallery as follows:
add_theme_support( 'wc-product-gallery-lightbox' );

So if you have added a featured image and a gallery to your single product, once styled you will end up something that looks like this:

This already works as a slider, but you have to use the thumbnails to navigate between the different images.

The way that we added a Bootstrap 4 carousel to this in place of the thumbnails was as follows:

Step 1

Navigate to the following directory; /wp-content/plugins/woocommerce/templates/single-product

Copy the product-image.php to your child theme folder, for this; this will be placed in /your-theme/woocommerce/single-product directory.

It’s always best-practise to copy any WooCommerce templates to your theme or child folder, the reason for this is that these files wouldn’t end up being replaced if you update the file in the /plugins/ directory.

Step 2

We are now going to remove the following section from the product-image.php file:


<div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', $wrapper_classes ) ) ); ?>" data-columns="<?php echo esc_attr( $columns ); ?>" style="opacity: 0; transition: opacity .25s ease-in-out;">
	<figure class="woocommerce-product-gallery__wrapper">
		<?php
		if ( $product->get_image_id() ) {
			$html = wc_get_gallery_image_html( $post_thumbnail_id, true );
		} else {
			$html  = '<div class="woocommerce-product-gallery__image--placeholder">';
			$html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image" />', esc_url( wc_placeholder_img_src( 'woocommerce_single' ) ), esc_html__( 'Awaiting product image', 'woocommerce' ) );
			$html .= '</div>';
		}

		echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', $html, $post_thumbnail_id ); // phpcs:disable WordPress.XSS.EscapeOutput.OutputNotEscaped

		do_action( 'woocommerce_product_thumbnails' );
		?>
	</figure>
</div>

And we are going to replace this with the following:


<?php
    global $product;

    $attachment_ids = $product->get_gallery_image_ids();
    $image_links[] = get_the_post_thumbnail_url();
    $product_inc = 1;

    foreach( $attachment_ids as $attachment_id ) {
        $image_links[] = wp_get_attachment_url( $attachment_id );
    }
?>

<div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', $wrapper_classes ) ) ); ?>" data-columns="<?php echo esc_attr( $columns ); ?>" style="opacity: 0; transition: opacity .25s ease-in-out;">
	<!-- Product Carousel -->
	<div id="product-carousel" class="carousel slide carousel-fade" data-ride="carousel">
		<div class="carousel-inner" role="listbox">
			<?php
			    foreach( $image_links as $image_link_url ) { ?>
			    	<div class="carousel-item <?php echo ($product_inc==1)?'active':''; ?>">
			        	<?php echo '<img class="prod-car-img" src="'.$image_link_url.'" />'; ?>
			        </div>
			        <?php $product_inc++;
			    }
			?>
		</div>	
		<a class="carousel-control-prev" href="#product-carousel" role="button" data-slide="prev">
			<span class="carousel-control-prev-icon" aria-hidden="true"></span>
			<span class="sr-only">Previous</span>
		</a>
		<a class="carousel-control-next" href="#product-carousel" role="button" data-slide="next">
			<span class="carousel-control-next-icon" aria-hidden="true"></span>
			<span class="sr-only">Next</span>
		</a>						
	</div><!-- #Product Carousel -->
</div>

Result

To summarise what we have done here, we have basically added the ‘featured-image’ to an array (image_links[]). We then looped through the thumbnails to get the image URL’s of the product gallery and then looped the array containing all images together in the Bootstrap 4 Carousel.

What do you end up with?

We now have a Bootstrap 4 Carousel which combines the featured image with the product gallery, we have removed the thumbnails and instead added a Bootstrap 4 carousel in its place.

Awesome huh?

If you need any help, or if this has helped you; please leave a comment below!

Happy coding folks!

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share