When you use a localhost WordPress site to create blog posts, at some point you will need to copy those posts to a hosted WordPress on a server.
Note: I’m using ‘localhost WordPress’ to indicate a local copy of WordPress, even though on a Chromebook the local address is ‘penguin.linux.test’. See my post about installing WordPress on a Chromebook.
It is very simple to export content to an XML file and import that XML file on the server, but any images you have uploaded to your local WordPress will not transfer. In this post, I will discuss why this happens, and give you some options.
- Full backup/restore of the entire site
- Export blog posts from localhost WordPress
- Import the post on your hosted WordPress site
- Options to include images in imported posts
Full backup/restore of the entire site
If you have a personal blog, or at least a blog where you are the only content creator, it might be tempting to simply pull a full copy of your WordPress site down to your laptop, and then push it back up again when you have made changes. There is nothing wrong with pulling down a full copy to your laptop.
The issue comes when you have created new posts on your laptop, and want to move them back to the hosted site. Do you really want to replace your entire production site just to add a couple of posts? I know that I don’t.
If you are tempted to go this way, you should at least upload the new localhost site to a staging site and test it before deploying it to your primary site.
A good plugin for making site copies is Duplicator.
The rest of this post will look at options that do not require replacing your entire site just to add a new post.
Export blog posts from localhost WordPress
Assuming that you have added a new post to your localhost WordPress site, you need to export it from localhost and import it on your hosted site.
WordPress gives you an export tool that seems quite straightforward, but it only creates an XML file, regardless of what options you chose.
The XML file contains the text content from posts and pages, but the media (images, etc.) are simply exported as references to the original location of the content.
If your original site had links to media on other sites, like Pinterest, Google images, etc., this will not an issue.
However, if you export a post from site-1 and import it on site-2, the post will look fine on site2, but the images will still point back to site-1.
This might be what you want, and if not, you can use a plugin like ‘Auto Upload Images’ to pull the images from site-1 to site-2.
‘Auto Upload Images’ is by Ali Irani, and the plugin still works fine on WordPress 5.4.2, even though it says ‘not tested’ on anything after 5.2.7. Even so, when I need to use it I install it, use it, and remove it again.
This plugin works fine when you are copying a post between two sites on the internet – at import time you can choose to import the images that are hosted on the first website and the import server will upload the image from that website.
However, the hosted import server cannot see your localhost WordPress website, so any images that you have uploaded to your localhost WordPress site will not be imported to the hosted server, even using the Auto Upload plugin.
Selecting which posts to export from localhost WordPress
If you only have new posts on your localhost WordPress site, then you can just select to export all content.
Since my localhost WordPress site often has posts that are already in production and several posts that are not complete yet, I need to export a subset of the posts on my local WordPress site – usually just one that I want to deploy to a hosted server.
One technique is to create a category called ‘export’, assign the post to that category, and use the Categories dropdown to just export that post.
However, the Categories dropdown on the export screen only shows categories that have at least one published post.
If you want to export a Draft post from your localhost WordPress site, you need to add the ‘export’ category to a published post as well as your draft post, and then select ‘export’ in the Categories dropdown and select ‘Draft’ in the Status dropdown.
When you click the Download Export button, it will perform the export and download the XML file to your laptop. The XML file contains the text of your post and references to all the images used in the posts and pages.
Import the post on your hosted WordPress site
Now go to your site, and select Tools / Import. You will see a screen like this:
Click ‘Install Now’ on the WordPress option at the bottom of the list, and when it has installed, the option will become ‘Run Importer’:
When you click on ‘Run Importer’, you finally get to the first actual import screen.
Click on ‘Choose File’ and select the XML file that you downloaded from your localhost WordPress. Then click ‘Upload file and import’.
Be careful with the ‘Assign Authors’ option.
The first choice ‘Assign Authors’ determines the user that is assigned to the posts and pages you are importing.
- If you leave the settings at the default, as shown below, the users that created the content on the wordpress.com site will be created on your new site.
- If you don’t want to keep the same author name, you can type in a login name for a new user which will be created and all content will be assigned to that user.
- Finally, you can select an existing user on your new site. If you select an existing user, then all the imported content will be assigned to that user – this is the option that I generally use.
The second choice ‘Download and Import the Attachments’ needs a little discussion, though I usually just click it on.
- The most important point is that this flag only has an effect if you are importing a file that includes ‘All content’ from another site, or the export from WordPress.com. In other words, if you are importing a file where you only exported certain posts, this flag will have no effect regardless of how you set it, so you may as well ignore it.
- As noted above, none of the actual images that are used in your posts or pages are included in the XML file. Instead, the XML file contains content with hard-coded links back to the localhost or penguin.linux.test site.
- The ‘Download and Import’ checkbox only affects media that was on your exported site: If your content has links to media on other sites, like Pinterest, Google images, etc., checking the ‘Download and Import’ box will NOT attempt to download the images to your new site – they will be left off-site.
- If you are importing ‘All content’ on your hosted WordPress from a localhost export and you leave the ‘Download and Import’ checkbox blank, your posts and pages will be imported, and the text will look correct, but all images will display as unavailable since they will have the original localhost address.
- If you are importing ‘All content’ on your hosted WordPress from a localhost export and you set the ‘Download and Import’ checkbox, the images used in your posts will all fail to be downloaded to your new site and you will get a series of error messages after the import.
Another potential issue to keep in mind: if you have a localhost WordPress site running, and you import a post onto your hosted site which includes links to images on localhost (or penguin.linux.test), when you display the post, your browser will fetch the images from the localhost site, and the post will look fine. Anyone else accessing the same post will not see the images, since their browsers cannot access your localhost WordPress site.
So in summary: you can use the export and import to copy a post from localhost WordPress to your hosted WordPress site, and the text will import perfectly but the images will not. What to do?
Options to include images in imported posts
A. Keep images on the hosted site
If you have a good internet connection to your localhost WordPress site, you could upload any images to the media library on your hosted site, which is where you want them eventually. You can get the URL for the image by clicking on the image in the hosted media library and making note of the ‘Copy Link’ value, and then insert it into your post on localhost WordPress using the image ‘Insert from URL’.
Note that if you have inserted images like this, and then take your laptop on the road with no internet, you will not immediately lose the images. You browser will have cached them, so you can continue working with the images intact.
If you do happen to clear your browser cache, you can still work on the text of the post around the image placeholders. You do add Alt text describing all your images for accessibility, don’t you?
Advantages of this approach:
- You take action (upload to hosted site) at the time you are dealing with the image, so there is nothing to remember or fix later.
- There is no real loss of time – when you are ready to insert the image into the post, you just upload it to the hosted site, and insert the image by URL into the post.
- When you import the post to your hosted site, only the text is imported, but nothing is lost.
B. Keep new images separate on localhost
If you are working away from a good internet connection for a while, and still want to create blog posts with images (possibly photos you are taking), you will need to upload those images to your hosted server when you get your internet back.
One way is to keep the images to be used in blog posts in a folder per blog post on your laptop, and instead of uploading the image to your localhost WordPress, just put a placeholder in your blog post with the image name.
Then when you get back to an internet connection, you can upload the images to your hosted site, and replace the placeholders with links to the images on your hosted site, as discussed in the previous section.
A slight variation of this is to put a placeholder in the post for an image that you don’t have yet, such as a note to look for an image or take a screenshot.
C. Upload images to localhost WordPress
This is a modification of option B above, but instead of keeping your images in a folder to upload to the hosted site later, you upload them to your localhost WordPress so you can see them while you are writing, but keep these images apart so that you can upload them to the hosted site later.
First, go to settings/media and uncheck the Organize my uploads checkbox.
After that change, any image files uploaded are stored under wp-content/ uploads, rather than being put into folders by year and month. This will keep these new uploads distinct from the usual image content.
When you have an internet connection again, upload the images from wp-content/ uploads to the media library of the hosted site.
Note that when you uploaded images to your localhost site, WordPress will have created a number of files in wp-content/uploads for each image you upload.
The files with the sizes in the name were created by WordPress during the upload, so when you are uploading to your hosted site, you just upload files without the image sizes in the names.
Then, still on the localhost WordPress site, go through the post replacing each image with the version you just uploaded to your hosted site, using the URL from the hosted site.
Then you can delete all the image files in wp-content/ uploads, and set the checkbox back to organize the uploaded images by month.
I find that having a localhost WordPress is very productive, and I tend to use a mixture of options A and B to deal with images.
These days, even before Covid kept us close to our home wifi, it was common to have a good internet connection just about anywhere using a phone personal hotspot. When I want to write a blog post on a train or a remote beach where I don’t have a signal, I’m happy to be able to type and format text, and leave adding images until later.