Tag - Update

How to Update WordPress Theme without Losing Customization


One of the best things about WordPress is the easy customization options that you get with WordPress themes and plugins.

You can also take these customizations to the next level by adding your own code snippets and CSS styles to your WordPress theme.

The problem arises when an update becomes available for your theme. If you are not careful, then there is a high chance that you’ll lose some of those changes you made to your theme.

In this article, we will show you how to easily update a WordPress theme without losing customization. We will also cover how to properly customize your themes, so you are not affected when a new theme update is released.

Properly updating WordPress theme without losing customizations

How Theme Updates Work in WordPress?

WordPress comes with a powerful system to install updates for not just WordPress itself but for plugins and themes as well.

Your WordPress website regularly checks for updates and display them under Dashboard » Updates page.

WordPress updates

When a theme update becomes available, you’ll also see a notification on the Appearance » Themes page.

Theme updates

Updates are really important for the security and performance of your WordPress website. Aside from security and bug fixes, theme developers can also introduce new features with these updates.

You can simply click on the update button to install the new version.

WordPress will then download the theme package, unzip it, and replace the old files with the newer version.

This will overwrite all old theme files installed on your website. If you manually added custom code to your WordPress theme files, then you’ll lose those changes.

That being said, let’s take a look at which theme changes are safe and which customizations will be erased.

What Type of Theme Customizations Can You Lose During an Update?

There are multiple ways you can customize a WordPress theme. Some of these theme customizations are safe because your changes are stored in the WordPress database itself.

This includes all changes made through the built-in WordPress theme customizer which you can access by visiting Appearance » Customize page.

WordPress theme customizer

The theme customizer allows you to modify your WordPress theme and store all changes in the WordPress database. You can change the header image, colors, layout, custom CSS, and more.

Your WordPress widgets and navigation menus are also not affected by the theme updates.

Popular WordPress themes like Astra and Ocean WP now come with companion plugins. These plugins are used to add extra features to your theme. Any theme changes made using these companion plugins are also not affected by the theme update.

If you customize your WordPress layout using a WordPress page builder like Divi, Beaver Builder, Elementor, etc, then those changes will also not be impacted.

Any other features that you have added to your website using a plugin are also safe. For example, your WordPress contact forms, Google Analytics, email newsletter popups, and more.

Customizations that you’ll lose during the update

If you have added any code to your theme’s functions.php file, then it will disappear. Any CSS changes that you have added directly to your theme’s stylesheet (style.css) file will also be wiped off.

Now that we know which changes will be erased, let’s talk about how to preserve and restore them after the theme update.

Step 1. Preparing for The Theme Update

First thing you need to do is connect to your WordPress hosting account using an FTP client.

Once connected, go to the /wp-content/themes/ folder and download your theme folder to your computer.

Download your WordPress theme

This folder will be the backup of your theme, and we will use it later to copy and paste customizations after updating the theme.

Step 2. Download The Updated Theme and Move Customizations

Now we want to transfer customizations we have made to the old theme files to the updated version.

Simply visit your theme’s website and download the latest version to your computer. Locate the theme’s zip file and extract it.

You should now have both, the new version and your old customized theme on your computer.

If you remember the changes you made to your theme, then simply copy and paste the code snippets from the old theme to the new version.

On the other hand, if you do not remember the changes you made, then you will have to find them first. The easiest way to do this is by comparing your theme files.

You’ll need to use a file comparison software like WinMerge (kaleidoscope for Mac, Meld for Linux).

Open both theme folders in file comparison software. It will show files side by side allowing you to quickly compares files to locate the customizations you have added to the old theme.

Compare theme changes

You can then copy and paste the code from the old theme file to the same file in the new theme.

Step 3. Upload the New Theme Folder

After copying your changes to the new theme, you are now ready to upload the updated version to your website.

Simply connect to your website using the FTP client and go to the /wp-content/themes/ folder. Select the new theme folder and update it to your website.

Upload updated theme

Your FTP client will warn you that the files with the same name already exist. You need to choose <strongOverwrite to make sure that your old theme files are replaced by new files.

Overwrite

That’s all. You have successfully updated your WordPress theme. Visit your website to make sure that everything is working as expected.

How to Avoid Losing Changes During Theme Update

If you want to add code snippets or custom styles to your WordPress theme, then there are some best practices that you should follow.

The best solution is to create a child theme and add your custom code to child theme’s files.

However, many WordPress beginners may not feel comfortable creating a child theme. Luckily, there are easier solutions available.

For all your custom code changes, you can use the code snippets plugin.

It allows you to safely add custom code snippets without breaking your website, and your changes will not be affected by theme updates. You can even change your WordPress theme without losing those changes.

For CSS code, you can save it all under the theme customizer’s ‘Additional CSS’ tab.

Additional CSS

For more information, see our guide on how to add custom CSS in WordPress.

Alternatively, you can also use the powerful CSS Hero plugin to easily customize the styles without even writing any CSS code.

We hope this article helped you update your WordPress theme without losing customization. If you come across any issues, then check out our guide on most common WordPress errors and how to fix them.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.



Source link

How to Update Your Old WordPress Posts with Gutenberg Block Editor


Wondering how to update your old blog posts with Gutenberg, the new WordPress block editor? If you haven’t upgraded to WordPress 5.0, then you’re not alone.

A lot of readers are concerned because Gutenberg is a completely new experience. The good news is that your old articles are safe even after upgrading to Gutenberg. In this article, we’ll show you how to update your old articles with Gutenberg, the new WordPress Block editor.

You may also want to know what will happen to your existing content after upgrading your blog to Gutenberg.

update-your-old-articles-with-gutenberg

What’s The Difference Between Classic Editor and Gutenberg Editor?

Before we get started, let’s first discuss the major differences between the old Classic Editor and the new Gutenberg Editor.

The Classic Editor was a text editor that looked very similar to Microsoft Word. It had a single editing field with formatting options at the top. Here’s what the Classic Editor looks like:

Old WordPress editor

On the other hand, the new Gutenberg editor is a fully block-based editor. You’ll add all the content in the form of blocks. Here’s how the Gutenberg Block Editor looks like:

New WordPress Block Editor also known as Gutenberg

Blocks are content elements which are separate from each other with their own set of formatting options. There’re individual blocks for every piece of content including:

  • Regular text or paragraph
  • Image
  • Button
  • Gallery
  • List
  • Table
  • Embeds, etc.

Plus, you can find more blocks and widgets provided by your plugins and theme.

gutenberg-blocks

In order to create or edit a post in the new Gutenberg editor, you’ll need to use blocks. Here’s how to update your old blog posts and pages with Gutenberg block editor.

Editing Your Older WordPress Articles with Gutenberg

If you’ve updated your WordPress blog to 5.0 or the later version, then you’ll have the new Gutenberg block editor as your default editor.

The good part about Gutenberg is that it doesn’t affect any of your old content, and you can easily edit them.

To edit an older article, simply edit it as you would normally do in WordPress.

On the post edit screen, you’ll see the entire content wrapped inside a single Classic block.

classic-block-guteberg-edit

The same post would look like the screenshot below in the old classic editor.

classic-wp-editor

As you can notice, the content is same however the way it’s organized looks slightly different.

Yes, that’s the only change you’ll see.

The new WordPress block editor will not make any changes to the content, and it would still look the same on your website.

Now, you have two options to edit your old blog posts and pages:

  1. Continue editing inside the Classic block
  2. Convert your old content to new Gutenberg blocks
  3. The first option is to continue editing your old article inside the Classic block.

    The Classic block offers you the same Classic editor interface with formatting options at the top. This should be fairly straight forward.

    The second option is converting your old content into new Gutenberg blocks.

    You can do this by clicking on the three-dot menu option on the top right corner of Classic block.

    From the menu dropdown, you need to select Convert to Blocks option.

    convert-to-blocks-wp-block-editor

    That’s it!

    Your old content will be automatically converted into appropriate blocks. The content inside the Classic block will be split into several different blocks.

    wp-block-editor-classic-block-converted

    Now, you can edit your old article using the new Gutenberg editor blocks. Each block is a separate entity with its own formatting options, styles, and design options.

    For example, in our screenshot above, there’s an image block and a paragraph block.

    If you want to make changes to how the image appears, then you can simply click the image to select the block, and the editing options will appear at the top.

    You will also see more options under the Block tab in the right column of the screen.

    image-block-edit-options

    You can realign the image, make it full width, add Alt text, change image dimensions, add a link, and more.

    Following the same process, you can edit all of the blocks and make your article look visually impressive.

    Once you’re done making all the necessary edits, you can simply click the Update button at the top right of the screen to save your changes.

    Note: Although Gutenberg works fine with most themes and plugins, some may still not have Gutenberg support. It’s better to test your theme and plugins for Gutenberg compatibility before switching to it.

    The new WordPress Gutenberg editor offers an easy and flexible way of creating content in WordPress. However if you are not ready to use it yet, then you can disable Gutenberg and keep using the classic editor.

    You can keep using the Classic editor until 2022 which should be enough time for getting familiar with the new WordPress block editor. We have a complete Gutenberg Block Editor tutorial for beginners that you should check out.

    We hope this article helped you learn how to update your old articles with Gutenberg Block Editor. You may also want to see our list of the must have WordPress plugins for professional websites.

    If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

    The post How to Update Your Old WordPress Posts with Gutenberg Block Editor appeared first on WPBeginner.



    Source link