WordPress has released the beta for the release of version 6.5 for testing.
We have been watching the development closely and are quite excited to report on all the new features expected to be released in this version.
It will be the first major WordPress update of 2024, and many people have done significant work on it.
Let’s look at some of those amazing features and enhancements that are coming in WordPress.
Note: Using the WordPress Beta Tester plugin, you can try out the beta version on your computer or a staging environment. Please keep in mind that some of the features in the beta may not make it into the final release.
Here is a quick overview of changes coming in WordPress 6.5:
Earlier, we reported that Font Library will be included in WordPress 6.4. However, it was postponed and wasn’t included in the final release.
We are glad to report that it will be included in the WordPress 6.5.
This will allow users to manage fonts used in their WordPress theme and across their website.
Users can view the Font Library under the Styles panel in the site editor. Switch to the Typography view and then click on the Manage Fonts button.
This will bring up the Fonts popup.
By default, it will show you currently installed fonts for your WordPress theme. You can switch to the Upload tab to upload more fonts from your computer.
Switch to the Install Fonts tab to connect your website to Google Fonts.
You’ll then be able to browse Google fonts.
Search the font you want to install and then select the variation. Finally, click on the Install button to locally host the font and serve it from your website.
This will help site owners customize their site’s typography with custom fonts for their existing theme.
Custom Fields for Blocks
Another exciting feature that is debuting in WordPress 6.5 is the ability to associate custom fields with block attributes.
Custom fields in WordPress have been around for a very long time. They allow you to add custom metadata to your WordPress posts, pages, and other content types.
Now, developers and advanced users will be able to associate custom fields data to individual block attributes.
However, these connections are not just limited to custom fields. The block binding API introduced for this functionality also makes it possible to use other sources to provide dynamic data for blocks.
For those who want to test it out, add these two custom fields to your post:
mood
weather
You can see in the image below the custom fields interface:
Then, switch to the code editor view and add the following code inside a text field.
Next, you can preview your post to see the custom fields in action.
The theme should simply output the values of your meta keys.
This is just a very basic example.
Developers would be able to do much more by showing connections in the editor and the ability to choose dynamic values from a drop-down menu by registering those connections.
Plugin Dependencies
Some WordPress plugins depend on other WordPress plugins to provide certain functionalities.
For example, a WooCommerce payment addon would require WooCommerce to be installed for it to work.
Plugin authors can now add a Requires Plugins entry into the plugin header and mention the plugins required to be installed and activated for their plugin to work.
Those plugins will then need to be installed and activated by the user.
Once all the required plugins are activated, the user will be able to activate the main plugin that needs them.
The required plugins cannot be deactivated until the plugin dependent on those plugins is deactivated first.
Prior to WordPress 6.5, if a user installed such a plugin and activated it, they will see an error page.
This error page does not tell users which plugins to install or have instructions to go back to the plugins page. This feature is a big improvement in user experience.
Block Editor Improvements
The majority of WordPress users spend most of their time writing content, editing pages, and working with the block editor.
This is why each WordPress release has significant improvements and new features to improve the block editor.
WordPress 6.5 will be no different and is packing many enhancements to improve the content editing experience for all users.
Drop Shadow Effect
WordPress 6.5 will introduce a drop shadow effect for more blocks. Here are some of the blocks where users will be able to use the drop shadow effect.
Image
Columns and Column
Buttons
Simply click on the block and look for Border & Shadow under the Style Panel.
Smarter Overlay Colors for Cover Blocks
The cover block can now select the overlay color automatically based on the background color of the image you choose.
Rename Any Block in the List View
WordPress 6.4 allowed users to rename Group blocks in the list view for a better understanding of what each group block contains.
WordPress 6.5 will take it to the next step and allow users to rename any block in the list view.
Right Click on a Block in List View to See Settings
Now previously, you needed to click on the three-dot menu next to a block to see its settings in the list view.
In WordPress 6.5, you can just right-click on any block to see its settings.
Link Control Changes
Link Control in 6.5 will highlight your blog and front-page pages with different icons to distinguish them.
Right after you add a link or when you click on a link, it will show you a context menu.
Here, users can see where that link goes. It will automatically fetch the linked page title, and show the action buttons to edit, unlink, or copy the link.
Preferences Panel Updated
The preferences panel will be updated in WordPress 6.5.
It will now show Appearance and Accessibility panels and previous options are now better categorized.
Site Editor Changes
Site Editor is where users can make changes to their site, much like the former theme customizer.
This release will come with several improvements to the site editor.
Synced Patterns Get More Powers
Synced patterns help website owners create patterns to reuse later across their websites.
With WordPress 6.5, users will be able to override locked synced patterns for individual use cases.
For instance, a pattern for product review where a user wants to be able to edit the Pros and Cons but not the layout of the pattern.
To test it, add a synced pattern to a post and click on the Edit Original button.
This will open the isolated pattern edit mode.
From here, click on the block that you want to override. Then, under the block settings expand the Advanced panel and check the box next to the Allow Instance Overrides option.
This feature allows you to create synced patterns that need to be edited based on the context in which they are used.
Data View Enhancements
WordPress 6.5 will bring a better way to view your pages, patterns, and templates with in site editor.
You can view items in Grid view with large previews and sort them in different orders.
You can also see items in the table view.
For instance, you see your page list and start editing them without leaving site editor.
Improved Style Revisions
Previously, Style revisions showed a timeline and you had to browse through it to see what changes were applied.
WordPress 6.5 will bring better style revisions which show you a description of changes made for each revision.
The browsing between different revisions will also become smoother. You can also switch to a revision by clicking on Apply button.
You will also see the changes that were made but not Saved yet.
The Interactivity API
Another exciting feature making its way into WordPress 6.5 is the Interactivity API.
The API provides a framework for developers to create modern front-end interfaces that don’t require complete page reloads.
This enables developers to create user experiences that are more ‘Interactive’ than old-school web pages.
Think of reading comments on your favorite blog, and a new comment just pops up as you are writing your own reply. Or, imagine a live search feature that doesn’t slow down your website.
The team working on the project has made a demo website to showcase its capabilities.
Miscellaneous Under-The-Hood Changes
WordPress 6.5 release will be packed with changes targeted at developers or behind-the-scenes improvements. Let’s look at some of them:
Performance improvements: The Block and Site Editors will load two times faster and the input time will be four times faster than WordPress 6.4. (Details)
An improved library is introduced to load translations much faster. (Details)
Classic themes can now add support for appearance tools. (Details)
Overall, the beta release includes 681 enhancements and 488 bug fixes for the editor, including about 229 tickets for WordPress 6.5 Core.
We hope this article helped you discover what’s new in WordPress 6.5 and which new features to try out. We are particularly excited about the interactivity API and the glimpses of a future admin redesign.
Are you a new WordPress.org user who wants to learn how to edit your WordPress site?
Here at WPBeginner, we have helped millions of beginners build their websites using WordPress, which is the most popular website builder on the market. If you need help with editing your website, then you have come to the right place.
In this article, we will show you the basics of editing a WordPress website.
An Overview of Ways to Edit a WordPress Site
As an open-source content management system, WordPress has a lot of features to build and edit your website.
If you installed WordPress recently, then you may have come across Gutenberg, which is WordPress’s drag-and-drop block editor that allows you to customize a page or post. This feature is pretty easy and beginner-friendly.
You may have also seen the Full Site Editor.
This is an extension of Gutenberg that lets you use the block editor to customize block-based WordPress themes.
That said, if you use a classic, non-block WordPress theme, then the FSE won’t be available to you. Instead, you will have to use the WordPress Theme Customizer.
This feature doesn’t come with a drag-and-drop function, so it’s not as user-friendly. You have to edit your theme using some menu settings in the left-hand panel.
If you need more customization options that aren’t available in WordPress’s built-in features, then you can install a page builder plugin like SeedProd.
This is what we usually recommend to WordPress beginners. Like Gutenberg, SeedProd has a drag-and-drop feature. However, it offers more ways to get creative, like animation effects and more content block options to build your pages.
Some WordPress users also use the Classic Editor. It’s WordPress’s legacy page and post editor that looks a bit like a document editor.
This feature is no longer enabled by default in the latest WordPress versions. However, some people still use it because they are more familiar with it and want to keep their current website designs.
In this article, we will show you how to edit different parts of your WordPress website using the editors we’ve mentioned.
One of the first things you should do after installing WordPress is to choose and customize your theme. We will show you 3 ways to do that.
Customizing a Block Theme With the Full Site Editor
Full Site Editing was introduced in WordPress 5.9. It’s designed to make it easy to edit WordPress block themes using the block editor.
One tell-tale sign that you are using a block WordPress theme is you will see Appearance » Editor in your WordPress admin area. If you see Appearance » Customize instead, then you can skip to using the Theme Customizer.
If you want to find some free options, go to Appearance » Themes. Then, click ‘Add New Theme.’
After that, just switch to the ‘Block Themes’ tab.
You will then see dozens of block themes on your screen. For installation instructions, check out our step-by-step guide on how to install a WordPress theme.
Once you have the theme installed, you must go to Appearance » Editor.
Now, you will see the main Full Site Editing dashboard. You can then edit your theme’s navigation menu, styles, pages, templates, and patterns.
We will discuss these topics in the rest of the tutorial, but we will show you briefly how to change the style of your theme.
To do this, click the ‘Styles’ menu.
Now, you will see a list of the color scheme and typography pairings provided by the theme.
Every time you click on a style, the interface will preview it for you.
Once you are satisfied with your choice, just click ‘Save.’ Alternatively, you can create a custom style.
Customizing a Classic Theme With the Theme Customizer
If you use a classic WordPress theme, then you will work with the Theme Customizer to edit it. Simply head to Appearance » Customize from the WordPress admin area to access it.
Now, what you can customize here varies by the theme you are using.
For instance, if you have the Astra theme, then you can customize the style of your entire website, header, footer, sidebar, page, logo, and so on.
For this reason, we recommend reading your theme’s documentation for more instructions.
Our guide on the Theme Customizer can give you more detailed pointers.
Once you’ve made your changes, you can preview the website in different screen resolutions. Then, you can hit the ‘Publish’ button at the top to make your edits live.
One downside of the Theme Customizer is its user experience isn’t as flexible or easy as the block editor. If you feel this way, then we recommend using the next method instead.
Customizing a WordPress Theme With a Page Builder Plugin
Many WordPress users who aren’t satisfied with the platform’s built-in design features use a page builder to edit their site. This is a WordPress plugin that can replace the default editor for designing different parts of your website.
Most page builders come with a drag-and-drop functionality, so they are just as easy to use as the block editor. What’s more, they come with more page blocks and templates to personalize your website.
Out of all the page builders we’ve tried, we find SeedProd to be the best. It comes with 300+ templates for various industry categories, from eCommerce and accommodation to services.
Note: While SeedProd comes in a free version, we recommend upgrading to the Pro plan to access the Theme Builder. This is what we will use in this tutorial.
To use SeedProd, you will need to install the WordPress plugin first. After that, go to SeedProd » Settings to activate your Pro plan license. Simply insert your license key and click ‘Verify Key’ to complete this step.
As you can see, there are many theme template kits available, from online stores to service sites. Feel free to use the filtering and sorting settings to find the right one for your needs.
Once you’ve made your choice, just hover over the theme template and click the orange checkmark button to use it.
Now, just go back to the Theme Builder page and select a theme template you’d like to edit.
For demonstration purposes, we will show you how to edit the style of your SeedProd theme template. To do this, locate the ‘Global CSS’ theme template, hover over it, and click ‘Edit Design.’
You are now inside the SeedProd page builder and can customize your theme template’s style. Here, you can change your website’s colors, fonts, backgrounds, buttons, forms, and layout.
Let’s see how to change the theme’s default font. To do this, open the ‘Fonts’ menu. Then, just choose one of SeedProd’s many font and color options for the heading and body text.
All the changes you make will show up automatically in the right-side preview.
Once you are happy with the style, just click ‘Save’ to make these changes official.
Then, you can go back to SeedProd » Theme Builder and turn on the ‘Enable SeedProd Theme’ toggle in the top right corner.
If you have updated WordPress to the latest version, then most likely, you will use the Gutenberg block editor to edit a page or post.
You can create a new page by going to Pages » Add NewPage. This will automatically make an entirely blank page and direct you to the block editor.
On the other hand, if you want to edit an existing page, like the homepage or blog page, then you can go to Pages » All Pages. Hover your cursor over the page you want to edit, and then click ‘Edit.’
Alternatively, there is also the Quick Edit feature.
This allows you to modify the page’s title, URL slug, and last modified date.
You can do various things with the Quick Edit feature.
Examples include setting a password for the page, making it private, assigning it as a parent page, changing the page template, allowing/disallowing comments, and changing the page status.
To create a new post, simply head to Posts » Add NewPost to make a new blank post and edit it using the block editor.
Like before, you can edit an existing WordPress blog post by hovering your cursor over the selected post and clicking ‘Edit.’
The Quick Edit feature for posts is similar but with some minor differences.
Typically, you will start by clicking the ‘+’ add block button in the top left corner.
This is where you will find all the available blocks from WordPress and the plugins you use.
You can then drag and drop a block to the main editing area.
After that, you can use the block’s toolbar and settings sidebar to configure the block’s style, dimensions, spacing, and more.
If you have installed a WordPress plugin, then you may also see some settings below the editing interface.
For instance, the All in One SEO plugin will show you a section where you can optimize the page or post’s meta title and description for search engines.
We have plenty of guides for you to learn more about editing posts and pages, so be sure to check them out:
After that, just create a new post or page by going to Posts » Add New Post or Pages » Add New Page, and the Classic Editor will show up on your screen.
Unlike the block editor, you won’t add blocks to insert content into your page or post. Instead, you can only type text, format it using the controls at the top of the editing panel, and add media files to your content by clicking on the ‘Add Media’ button.
At the bottom and the sides of the editing interface, there are settings to publish the page/post, set the page or post’s categories/tags, upload a featured image, and so on.
You can also switch between the visual and text editing modes. With the second editor, you can modify the post or page’s HTML code.
How to Edit a WordPress Page With a Page Builder
If you already use a page builder like SeedProd to edit your theme, then you can use it to edit a page as well. This way, you can maintain your design’s consistency throughout all of your pages.
You will need to create a new page and open the block editor. If SeedProd is active, then you will see a button at the top that says, ‘Edit with SeedProd.’ Go ahead and click on it.
You can also do this with an existing page. However, do note that the content will not be transferred over, and you will have to create the page from scratch.
In the page builder, you will see that the SeedProd theme’s header and footer have been added. All you need to do is start building the page.
First, choose one of the 8 layouts to use on the page.
On the left-hand side, you will find all the blocks and sections that you can drag and drop onto the right-hand side, which is the template preview.
You can use these to insert content into the page.
Whenever you click a block or a section, the left-hand side will show the available settings to customize the element.
In the screenshot below, you can see that clicking on the Text block will make the block settings appear. You can customize the text, insert dynamic content, edit the HTML, change the alignment, and so on.
Once you are done editing the page, don’t forget to click ‘Save’ to make the changes live.
If you want to create a custom landing page from scratch, then you can also do that with SeedProd. All you need to do is go to SeedProd » Landing Pages. Then, click the ‘+ Add New Landing Page’ button.
Alternative: Thrive Architect is another great page builder option for designing attractive and conversion-focused landing pages.
How to Edit a WordPress Header, Footer, and Other Template Parts
You may also want to edit the WordPress header, footer, sidebar, and other parts of your theme template.
These are sections on your site that are not part of the main page or post content. However, they are essential for giving additional information or helpful navigation.
How you can edit these sections depends on what theme you are using, so let’s go through each option.
How to Edit a Block Theme’s Header, Footer, and Other Template Parts
If you have a block theme, then you can use the Full Site Editor to edit your theme’s header and footer.
In the Full Site Editor, a header and footer are considered template parts. These are also known as WordPress patterns (a set of reusable blocks) that appear throughout your website.
Other examples of a template part include the comment section and the post meta.
For the sake of example, we will show you how to edit your WordPress header, but you can repeat these steps with other template parts.
First, go to Appearance »Editor. Once you are in the Full Site Editor, just click ‘Patterns.’
You will now see a list of patterns provided by your WordPress theme.
Go ahead and scroll down to the Template Parts section. Then, select ‘Header’ and click on the Header template part.
Now, you need to click the pencil button next to the Header text.
This will open the block editor.
The block editor works the same way with template parts as it does with pages and posts. You can add various blocks to the header, configure the block, and update the changes when you are done.
Headers usually include a Site Logo (or the favicon), so feel free to add that here, too.
If you want to completely change how the header looks but don’t know where to start, click the ‘+’ add block button in the top left corner.
Then, navigate to the ‘Patterns’ tab and click ‘Headers.’ You will find many ready-to-use header layouts there.
Once you are done changing the header, click ‘Save.’ Since the header is a synced template part, all the changes you make here will apply across all pages that use the header.
Now, if you want to create a new header or any other template parts rather than editing the existing ones, you can go back to the ‘Patterns’ page. After that, click the ‘+ Create pattern’ button and select ‘Create template part.’
In the popup, give the template part a name and select the type of template part.
Then, click ‘Create.’ You will then be directed to the block editor and you can edit the template part like usual.
How to Edit a WordPress Header, Footer, and Other Widget-Ready Areas in a Classic Theme
In a classic theme, a WordPress widget is basically a block that you can add to widget-ready areas, like headers, footers, sidebars, and so on.
Every classic WordPress theme has different widget-ready areas. Some may include a sidebar, and some may not. So be sure to check your theme’s documentation for more information.
To use widgets, you have to go to Appearance » Widgets. Here, you can add, configure, and remove blocks in the available widget-ready areas.
How to Edit a WordPress Header, Footer, and Other Template Parts With a Page Builder
One of the benefits of using a page builder is you will have more options to customize headers, footers, sidebars, and other parts of your theme.
If you use SeedProd, you can go to SeedProd » Theme Builder. We will assume that you have installed a theme template kit from earlier.
The kit usually includes various theme templates. This may be a built-in page template, like a 404 or single post, or a part of a page, like a header, footer, pricing tables, and so on.
Go ahead and hover over a theme template. Then, click ‘Edit Design.’
Now, you can edit the header the same way as you would with a page.
Let’s say you want to add your social media links here. What you can do is hover over the header until the blue border appears and click the ‘+ Add Row’ button. Then, go ahead and select a row layout.
In our example, we want to add one more column so that the header can fit the image, menu, and social media links. That means we will need three columns in one row.
You can then drag and drop the blocks from the top row to the new row.
After that, just delete the top row so that your new row becomes the new header.
Now, just look for the Social Profiles block in the left-side panel.
Drag it into the right column, and you are done.
For more information about editing template parts, you can read these WordPress tutorials:
A navigation menu makes it easy for visitors to explore all your content without getting lost on your website. That’s why it’s important to design a menu that shows your essential pages and links to other relevant information.
If you use a block WordPress theme, then you can select the ‘Navigation’ menu from the Full Site Editor page.
If you use a classic WordPress theme, then you can go to Appearance» Menus. This is a dedicated page for you to add, arrange, and remove pages/posts and links to your menus.
Toward the bottom, you can change the links’ font size, spacing, divider, and alignment.
Don’t forget to click ‘Save’ to make the changes live.
How to Edit a WordPress Site With Code
If you are comfortable with code, then you can also use custom code snippets to edit your WordPress website. That said, we only recommend this method if you have the right technical know-how to avoid breaking your website.
One way you can edit a WordPress site with code is by adding CSS, which is a stylesheet that can change how HTML looks on the front end.
Classic theme users can go to Appearance »Customize and find the ‘Additional CSS’ field in the Theme Customizer.
Here, you can insert CSS code to style different HTML elements like colors and fonts.
This may be handy if your theme’s built-in options aren’t enough for your needs.
As for block theme users, you cannot add custom CSS within the Full Site Editor.
Instead, you have to go to the URL below to open the Theme Customizer and find the Additional CSS field. Make sure to replace the domain name with your own.
Another way to add CSS is with CSS Hero. This plugin makes adding custom CSS to WordPress themes easy, even for beginners. If you are interested in using it, then just check out our CSS Hero review.
How to Edit WordPress Theme Files
At times, some tutorials may require you to edit your WordPress theme files to make changes beyond what your built-in theme features allow. In this case, we recommend:
Creating a child theme first. This is like a copy of your WordPress theme that you can safely customize with some coding.
Backing up your website. It’s a good measure to do so that you can restore your website to a previous version in case of errors.
Editing a WordPress theme file requires going to your WordPress file directory from the backend. To do this, you will need to open your hosting provider’s file manager or connect to your website with an FTP client.
If you use Bluehost, then you can go to your dashboard and open the ‘Websites’ tab. After that, click ‘Settings’ on the website for which you want to open the theme files.
Now, simply scroll down to the ‘Quick Links’ section.
Then, click ‘File Manager.’ If you’re not sure where your root folder is, you can check the ‘Document Root’ function to see its path.
Once inside the file manager, you can go to your website’s root folder (usually named public_html).
Then, head to /wp-content/themes and find your current theme folder.
After that, you will find all of your WordPress theme files, which you can edit using a text editor.
Here are some things you can do by editing WordPress theme files:
If you want to add new custom code rather than editing the code that is already within your theme files, then we recommend using WPCode. It’s the best WordPress code snippets plugin for easily inserting and managing custom code snippets.
With this plugin, you won’t have to worry about accidentally breaking your website. WPCode will let you know if there are errors in the code and deactivate it. Plus, you can create PHP shortcodes for inserting custom content into your website.
To see WPCode in action, you can check out our full WPCode review in the WPBeginner Solution Center.
What Is the Best Way to Edit a WordPress Site for Beginners?
For beginners, we always recommend installing a page builder plugin like SeedProd to edit WordPress websites. The reason is that it’s just as easy to use as the block editor yet gives you much more control over your website design.
If you don’t want to use a plugin, then the next best thing is a block theme with the Full Site Editor. This feature is not entirely developed yet because WordPress is constantly working on the Gutenberg project. But as of now, it’s pretty user-friendly.
The Theme Customizer is not as flexible as the Full Site Editor because it lacks drag-and-drop functionality. That’s why we suggest classic theme users install SeedProd to improve their user experience.
As for coding, we only recommend it if you have created a child theme and backups of your site to avoid errors. But with the WPCode plugin, adding custom code to edit your WordPress site is much safer and won’t cause any errors or break your website.
Are you seeing a blank screen when you try to use the full site editor in WordPress?
The WordPress full site editor allows you to customize your website’s theme, including its header, footer, and page templates. However, some users are just seeing a blank screen when trying to open the site editor.
In this article, we will show you how to fix the blank site editor issue in WordPress.
What Is the Blank Site Editor Issue in WordPress?
The full site editor in WordPress is an editing interface that works with block themes and gives you more control over your website design. It allows you to use blocks for styling your website’s header, footer, sidebar, and other sections.
You can access it by selecting Appearance » Editor from the WordPress admin sidebar whenever you wish to customize your WordPress theme.
However, some users report seeing a blank screen whenever they try to access the site editor.
Some users just see a completely blank screen. That screen may be dark or light in color.
This issue is caused by incorrect WordPress settings. We will show you how to fix it in Method 1.
Other users can see part of the site editor’s interface, but the preview of their website is blank. They might also see a spinning circle indicating that the editor is trying to load the preview, but it never appears.
This happens when someone has disabled the REST API in WordPress. We show you how to fix this issue in Method 2.
With that being said, let’s take a look at how to fix the blank site editor in WordPress. You can use the links below to jump to the method you need to use:
Fixing the Blank Site Editor Issue in WordPress Settings
If you are seeing a completely blank screen when you try to use the site editor, then you have a problem with the URL settings on your WordPress website.
First, you need to navigate to Settings » General in your dashboard. Now, you need to find the ‘WordPress Address (URL)’ and ‘Site Address (URL)’ settings.
You need to make sure that the site address matches the WordPress address.
In particular, you need to make sure that if the WordPress address has a www or non-www URL, then the site address matches that exactly. In our screenshot above, these do not match, so ‘www.’ needs to be removed from the site address URL.
Once the two settings are identical, you need to scroll to the bottom of the General Settings page and click the ‘Save Changes’ button to store your settings.
You can now open up the site editor again, and it should work.
Fixing the Blank Site Editor Issue by Enabling the REST API
If the site editor is not loading a preview of your website, then the REST API might be disabled on your WordPress website.
What Is the REST API in WordPress?
The REST API was introduced in WordPress 4.4. It is useful for plugin developers because it provides an interface where they can access WordPress functionality and data to build their plugins.
The REST API is enabled by default, and the site editor uses it to render a preview of your website. So, if you have disabled the REST API on your website, then the site editor won’t be able to show a preview of your site.
Some website owners choose to disable the REST API in the hope of improving their site’s security and performance. They may have followed our guide on how to disable the JSON REST API in WordPress.
Our guide shows you how to disable the REST API using two methods: adding a code snippet in WPCode or installing the Disable REST API plugin.
To enable the REST API again, you will need to disable that code snippet or plugin, depending on which method you originally chose.
Disabling the REST API Code Snippet in WPCode
If you used WPCode to disable the REST API, then you need to navigate to Code Snippets in WordPress admin.
Once there, you need to find the ‘Disable WordPress REST API’ snippet and switch the ‘Status’ toggle off.
Alternatively, if you disabled the REST API by adding code directly to your functions.php file instead of using WPCode, then you will need to open that file using an FTP client or the file manager app in your hosting dashboard.
Then, you must edit the file and remove the custom code.
You should now be able to access the site editor and see the preview of your website.
Disabling the Disable REST API Plugin
If you used a plugin to disable the REST API, then you need to navigate to Plugins » Installed Plugins.
Once there, you need to scroll down to the plugin and click the ‘Deactivate’ link. In our example, we are working with the Disable REST API plugin, but you will use the same method if you have a different plugin installed.
You can now open up the site editor, and it should be working properly again.
Alternative: Using a Page Builder Plugin to Design Your Website
While the full site editor is a helpful tool for designing your website, it has some limitations. It is only available with block themes, and you will lose your customizations if you change your theme.
By contrast, WordPress page builders like SeedProd provide a drag-and-drop interface where you can design all your individual pages using blocks. They are compatible with any WordPress theme, and you can change your theme without losing your customizations.
You can get started by choosing a template/site kit or building completely from scratch.
You can even use SeedProd to design an entire theme for your website. For more details, you can see our guide on how to create a custom WordPress theme without writing any code.
Note: Using the WordPress Beta Tester plugin, you can try out the beta version on your computer or a staging environment. Please keep in mind that some of the features in the beta may not make it into the final release.
Twenty Twenty-Four Is The New Default Theme
It is a WordPress tradition to add a new default theme each year. Usually, it comes with the last release of the year.
WordPress 6.4 will ship with Twenty Twenty-Four, as the new default theme.
Keeping up the design philosophy of the previous default theme (Twenty Twenty-Three), the new theme will feature a minimalist layout out of the box.
However, don’t let its minimalist appearance deceive you. This powerful theme is packed with features.
It is made to work well with the Site Editor and ships with 6 style variations to choose from.
It also includes dozens of WordPress block patterns to use with the site editor or when writing posts and pages.
These patterns include several section patterns that help you quickly add entire sections to your pages or templates.
It also ships with four fonts that you can use when working on your site. This brings us to the next exciting feature expected to be released in 6.4, the Font Library.
Manage Fonts Across Your Website with Font Library
WordPress 6.4 will include the new Font Library feature. This will allow users to manage fonts used in their WordPress theme and across their website.
Users will be able to view the Font Library under the Styles panel in the site editor. They will also be able to add or remove fonts to their website.
Clicking on the Fonts icon on the panel will bring up the Font Library.
From here, you can upload fonts directly from your computer.
Want to use Google Fonts locally? Font Library will allow users to download and install Google Fonts on their WordPress website.
This will connect to Google servers only once to download the font files. After that, fonts will be served from your own servers.
WordPress 6.4 will allow users to enable lightbox popups for images in their posts and pages.
After adding an image, you can toggle the Expand on Click option under the block settings to open it in a lightbox popup.
This simple image popup will let your users enlarge images without leaving a page.
It is still very basic and in the early stages of development. For instance, for the Gallery block, you’ll have to set it for each individual image instead of the whole gallery.
If you need a better user experience with beautiful image galleries, we recommend using Envira Gallery or NextGen.
These are the best WordPress photo gallery plugins for photographers and portfolio websites with beautiful lightbox popups, animations, slideshows, gallery styles, and more.
Improved Command Palette
WordPress 6.3 came with a new command palette tool, which allowed users to quickly type in commands using the keyboard shortcut CTRL+K.
WordPress 6.4 will come with several improvements to the tool and new keyboard shortcuts. First, there is a subtle design update, which makes elements slightly darker.
Secondly, there are new commands and actions introduced to work with blocks. You can duplicate, transform, delete, or insert blocks from the command palette.
For instance, you can now select multiple blocks and transform them using the command palette.
Block Editor Enhancements
This release primarily focuses on improving and extending existing site and block editor features. The groundwork for phase 3 of the Gutenberg project has begun, which will focus more on collaboration.
WordPress 6.4 will merge several Gutenberg (the project name for the block editor) releases into the core. Each one of them includes several new features and enhancements.
Following are some of the more noticeable enhancements in Block Editor.
Block Hooks
WordPress 6.4 will bring Block Hooks functionality for developers. This would allow plugins to automatically add blocks upon activation.
Named after hooks used in WordPress core, block hooks will enable plugin developers to interact with the block editor and extend blocks without touching them.
For instance, a membership plugin can now add a login button in the navigation menu.
The block panel will show you which blocks are added by plugins and you will be able to turn them off/on.
Background Images for Group Block
Grouping blocks is the easiest way to create different sections of a layout in the post or full site editor.
Previously, users were only able to select background and text colors for the entire group block. WordPress 6.4 will also allow you to set a background image.
Improved Toolbars for Parent / Child Blocks
When working with blocks that have child blocks, the toolbar kept moving and changing as you moved around blocks.
This didn’t produce an ideal user experience for blocks like Navigation, List, and Quote.
WordPress 6.4 will now automatically attach the child toolbar to the parent and create a consistent user experience as you move around the inner blocks.
The Outline / List View Revamped
The List view shows you a quick outline of your page or post layout in site/block editor.
WordPress 6.4 will improve the list view by adding some cool new features.
First, you can now rename Group blocks in the list view. This would help you identify what each group block does and will make your layouts more readable.
It will also show previews for images and gallery blocks.
This is immensely helpful and makes the outline view a much more useful tool than ever before. Previously it just said ‘Image ‘and you had to click to select the block and view which image is there.
Improved Pattern Management
In the previous WordPress release, Reusable Blocks were merged into Patterns, and a new pattern management screen was added to the site editor.
WordPress 6.4 will come with improvements to the pattern management in site editor.
You will now be able to add pattern categories when creating a new pattern.
The Pattern creation modal will look the same across WordPress.
Inside the Site Editor, the Patterns tab will now show your patterns organized in categories.
Open in New Tab in Link Preview
In the previous WordPress release, the link preview control (the popup that appears when you add a link in WordPress) moved the option to ‘Open in new tab’ under the Advanced toggle.
This meant that users were required a few extra clicks to open a link in a new tab.
Based on user feedback a new checkbox is added in the link preview modal allowing users to easily open a link in a new tab.
Under The Hood Changes
WordPress 6.4 also includes several changes intended for developers. Here are some of the most significant under-the-hood changes.
TEMPLATEPATH and STYLESHEETPATH constants are deprecated. (#18298)
Framework to add revisions for post meta in WordPress. (#20564)
Theme developers can configure their own default min and max viewport widths for calculating fluid font sizes. (#59048)
A block hook field is added to block types. (#59346)
We hope this article helped you discover what’s new in WordPress 6.4 and which new features to try out. We are particularly excited about all the changes to the site editor.
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.
Do you want to know the difference between padding and margin in WordPress?
In WordPress, padding is the space between the content and the border within a block, while margin is the space between two separate blocks.
In this article, we will show you the difference between padding and margin and how to use them in WordPress.
What Is Padding in WordPress?
The padding feature on your WordPress website is used to create space inside a block.
For example, you can add space inside a Text block to make its layout more visually appealing and prevent text from appearing too close to the borders of the block.
You can also use padding to control how the content flows on your WordPress blog. For instance, if you add padding to the top and bottom of a Text block, you can make it easier for visitors to read the content.
What Is Margin in WordPress?
Margin is the space around the border of a WordPress block and its surrounding elements.
This can help you add space between two different blocks, creating a more spacious and clean layout for your site.
For example, you can add margins to the top and bottom of a Text block so that it remains visible even when the screen is resized.
Plus, you can also use margins to add space between Image and Text blocks to make your website visually appealing and more accessible for users.
What Is the Difference Between Padding and Margin in WordPress?
Here is a quick list of the differences between padding and margin in WordPress:
Padding
Margin
Padding means adding space between the content and the border of the block.
The margin feature adds space outside the border of the block.
Using padding does not affect the other blocks on your website.
Using a margin affects other blocks on your website.
Margins can create space between two different blocks.
How to Use Padding in WordPress
By default, the WordPress full site editor (FSE) comes with the padding feature.
However, keep in mind that if you are not using a block-based theme, then you won’t be able to add padding to your WordPress site unless you use custom CSS.
First, you need to visit the Appearance » Editor page from the WordPress admin sidebar to launch the full site editor.
Once you are there, just choose the page template where you want to add padding to your blocks from the ‘Templates’ sidebar on the left. This sidebar will display all the templates for different pages on your website.
After you have done that, the template that you chose will open up on the screen.
From here, click the ‘Edit’ button to start customizing your page template in the full site editor.
Next, choose the block where you want to add padding. Remember this means that you will be creating space between the content and the border of the block.
This will open the block’s settings in the block panel on the right side of the screen.
From here, you need to scroll down to the ‘Dimensions’ section and click on the three-dotted menu. This will open a prompt where you must select the ‘Padding’ option.
Next, simply use the slider to add padding to your block.
Keep in mind that this feature will add padding to all the sides of the block.
However, if you only want to add padding to the top or bottom of the block, then you can also do that by clicking the ‘Unlink Sides’ icon next to the ‘Padding’ option.
Then, you can use different sliders to add padding to the right, left, bottom, or top of the block.
Once you are done, just click the ‘Save’ button to store your settings.
How to Use Margin in WordPress
Just like padding, the margin feature comes built-in in the WordPress full site editor. However, this feature won’t be available if you are not using a block theme.
First, head over to the Appearance » Editor page from the WordPress dashboard.
Once you are there, choose the page template where you want to add margins from the column on the left.
This will open the page template that you chose on the screen.
From here, just select the ‘Edit’ button to start customizing your template in the full site editor.
Next, choose the block that you want to edit and scroll down to the ‘Dimensions’ section in the block panel on the right.
From here, simply use the sliders to set different margins for the top, bottom, left, and right corners of the block. Using this feature will create space around the block that you chose.
However, if you want to use a single slider to add equal margins around the block, then click the ‘Link Sides’ icon next to the ‘Margin’ option.
The block panel will now display a single ‘Margin Mixed’ slider on the screen that you can use to create equal margins around the block.
Once you are done, don’t forget to click the ‘Save’ button at the top to store your settings.
More Tips for Full Site Editing in WordPress
Other than adding padding and margins to your blocks, you can also use the full site editor to customize your entire WordPress theme.
For example, you can design all your page templates, add your own custom logo, choose brand colors, change the layout, adjust the font size, add background images, and more.
You can also add patterns and different blocks to your website to further customize it. For details, you may want to see our beginner’s guide on how to customize your WordPress theme.
Additionally, you can also use Global Styles to ensure consistency across your site. For more detailed instructions, you may want to see our guide on how to customize colors on your WordPress website.
However, if you don’t like using the full site editor and would prefer more control over your website’s appearance, then you can use SeedProd to build pages and even your entire theme.
It is the best landing page builder on the market that comes with a drag-and-drop builder that makes it super easy to create an amazing theme for your website.
Do you want to add an affiliate disclosure for each blog post automatically?
Affiliate marketing is one of the easiest ways to make money online. However, if you don’t disclose your affiliate links then you could end up in legal trouble.
In this article, we will show you how you can add an affiliate disclosure to all your WordPress blog posts.
Why Add an Affiliate Disclosure to Each WordPress Blog Post?
With affiliate marketing, you earn a commission every time someone clicks a referral link and makes a purchase. It’s a great way to make money online blogging with WordPress.
However, you must make it clear that your links are paid advertisements by adding an affiliate disclaimer. That just means posting a short notice explaining what affiliate marketing is, and that you get money from talking about the product or service.
Many countries have laws about failing to disclose paid endorsements. For example in the United States, you might get a fine from the Federal Trade Commission. You may even end up banned from reputable networks such as Amazon affiliates.
Even if you don’t get into legal trouble, customers who click on undisclosed affiliate links may feel tricked and stop visiting your WordPress website.
How to Add an Affiliate Disclosure to Each WordPress Blog Post
One option is to publish the affiliate disclaimer on its own page, as we do on WPBeginner.
You can then add a link to every page that features an affiliate URL. This may be a good choice if you have a longer disclosure and don’t want to distract from the post’s content.
If yours is short, then you can often add the full text of the disclaimer to every post.
No matter which option you choose, you can save time and effort by adding the affiliate disclosure automatically. Simply use the quick links below to jump straight to the method you want to use.
Pretty Links comes with an advanced auto-linking feature that allows you to enter the keywords or phrases that you want to turn into affiliate URLs.
Every time you type this word or phrase, Pretty Links will turn it into an affiliate URL automatically. Even better, if you have created a disclosure notice page, Pretty Links can also add a link to it in the post.
For example, if you add “MacBook Pro” as a keyword and then use that phrase in a new post, then Pretty Links will automatically turn “MacBook Pro” into an affiliate URL and add a link to your disclosure notice page.
Note: Pretty Links won’t insert the disclosure link if you only add affiliate URLs manually. It only works when a post uses automatic keyword linking.
To get started, you’ll need to install and activate Pretty Links. If you need help, then please see our guide on how to install a WordPress plugin.
Upon activation, go to Pretty Links » Activate. You can then add your license key to the following field: ‘Enter Your Pretty Links Pro License Key.’
After that, click on the ‘Pro’ tab. In the ‘Keywords’ field, type in each word or phrase where you want to automatically insert this affiliate URL.
Simply repeat this process for all your affiliate links.
Every time it adds this affiliate URL, Pretty Links will also add a link to your disclosure notice.
The next step is creating the disclosure notice page that Pretty Links will link to. Simply go to Pages » Add New. You can then type in your affiliate disclaimer and add any categories or tags that you want to use.
When you’re happy with your disclaimer, publish the page to make it live. It’s a good idea to make a note of the page’s URL, as you’ll need it in the next step.
Once you’ve done that, simply go to Pretty Links » Options. Then, click on the ‘Replacements’ tab.
Here, check the ‘Enable Replacements’ box if it isn’t already selected.
After that, check the ‘Link to Disclosures’ box. In the ‘URL’ box, go ahead and enter your affiliate disclosure URL.
By default, Pretty Links will use ‘Affiliate Link Disclosures’ as your link’s text. However, you can change this to anything you want by typing into the ‘Text’ field.
You can also change where Pretty Links adds the affiliate disclaimer link. By default, it shows the URL at the bottom of the post, so it doesn’t distract visitors from the post’s content.
Another option is to add the disclaimer to the top of the post. This is where we include it on WPBeginner.
This lets visitors know the post contains an affiliate link before they start reading, which is a good way to build trust with your audience. However, some people may see the disclaimer and decide not to stay on the page, which can increase your bounce rate.
You can also add the disclaimer to both the top and bottom of each post. This may be a good idea if you write very long posts, but most sites don’t need multiple disclosures per page.
To place the affiliate URL, simply open the ‘Position’ dropdown and choose Bottom, Top, or Top and Bottom.
Once you’ve done that, just scroll to the bottom of the page.
Then, click on the ‘Update’ button.
Now, Pretty Links will add an affiliate disclosure link every time it auto-inserts an affiliate URL to your posts, pages, or custom post types.
Method 2. Add Affiliate Disclosure Using WPCode (More Customizable)
Sometimes you may want to add the affiliate disclosure to different areas of every blog post. For example, you might show the disclosure after you mention each affiliate product for the first time.
In this case, you can create a shortcode that adds your affiliate disclaimer. This gives you complete control over where the disclosure appears, without you having to type the entire text every single time.
The easiest way to create a custom shortcode is using WPCode. This plugin lets you add code snippets to WordPress without editing your theme’s functions.php file.
WPCode also helps you avoid common errors by performing smart code snippet validation.
There are lots of ways to add an affiliate disclosure using WPCode. Besides the shortcode method, we’ll also share an easy way to automatically add the disclaimer to every post, page, or custom post type.
Upon activation, go to Code Snippets » Add Snippet.
This will bring you to the ‘Add Snippet’ page where you can see all the ready-made snippets that you can use on your site.
Since we want to add custom code in WordPress, hover your mouse over ‘Add Your Custom Code (New Snippet).’ Then, click on ‘Use snippet’ when it appears.
To start, enter a title for the custom code snippet.
This could be anything that helps you identify the snippet in the WordPress admin area.
We’re going to add a PHP snippet, so open the ‘Code Type’ dropdown and choose the ‘PHP Snippet’ option.
You can then go ahead and paste the following code into the code box:
function disclosure() {
return "<p class='disclosure'>This site may contain links to affiliate websites, and we receive an affiliate commission for any purchases made by you on the affiliate website using such links.</p>";
}
add_shortcode( 'disclosure', 'disclosure' );
You can use any text as your affiliate disclaimer, simply by editing the code above. For example, you might want to add a link in HTML to your affiliate disclosure page.
Once you’ve done that, scroll to the ‘Insertion’ section and make sure ‘Auto Insert’ is selected.
Then, open the ‘Location’ dropdown and choose ‘Frontend Only’ since we only want to use this code on our site’s frontend, which is what visitors see when they visit your site.
You can also organize your snippets by adding tags.
When you’re happy with how the snippet is set up, scroll to the top of the screen and click on ‘Save Snippet.’
After that, you can make the code snippet live by clicking the ‘Active’ toggle.
Finally, don’t forget to save the change by clicking on ‘Update.’
Now you can add the affiliate disclosure to any page, post, or custom post type using the [disclosure] shortcode. For more details on how to place the shortcode, you can see our guide on how to add a shortcode in WordPress.
How to Automatically Display the Affiliate Disclosure with WPCode
With WPCode, there are lots of different ways to add an affiliate disclosure to your WordPress website, including automatically adding it to every post.
This can save you a lot of time and effort, since you don’t need to add the shortcode manually. However, the disclosure will appear in the same location on every page.
To automatically add the disclaimer, simply create a new custom code snippet by following the same process described above. However, this time open the ‘Code Type’ dropdown and select ‘HTML Snippet.’
You can now add your disclaimer in the code editor, complete with the formatting that you want to use. For example, here we’re adding a simple disclaimer as a new paragraph:
<p>This site may contain links to affiliate websites, and we receive an affiliate commission for any purchases made by you on the affiliate website using such links.</p>
Next, scroll to the ‘Insertion’ section and open the ‘Location’ dropdown.
You can now choose where this disclaimer should appear, such as ‘Insert After Post’ or ‘Insert Before Content.’
You can then go ahead and enable the snippet by following the same process described above. WPCode will now automatically show the disclaimer on every page, post, and custom post type, without you having to add the shortcode manually.
If you’re using a block-based theme like Hestia Pro, then you can add an affiliate disclosure to your theme’s blog post template.
This is a good choice if you want to show the exact same disclosure on every blog post. However, you won’t have the option to change the style or text on individual posts, so it’s not a good choice if you want to show different information on different pages.
To use this method, go to Themes » Editor in the WordPress dashboard.
By default, the full-site editor will show your theme’s home template, so you’ll typically want to select a new template.
If you want to show the affiliate disclosure across your entire website, then we recommend adding it to the footer template part.
However, if you just want to show the disclaimer on your blog posts, then click on Templates on the left-hand side of the screen in the Design section.
The editor will now show all the layouts that make up your WordPress theme.
Simply click go ahead and click on ‘Single.’
WordPress will now show a preview of the template.
To edit this template, go ahead and click on the small pencil icon.
With that done, click on the blue ‘+’ icon in the top left corner.
In the search bar that appears, type in ‘Paragraph’ to find the right block.
You can now drag and drop the block onto the area where you want to show the disclaimer.
Now, click on the block and type in your affiliate disclaimer.
You may also want to change how the disclaimer looks.
To change the font size, background color, and more, simply click to select the paragraph block. Then, select the ‘Block’ tab in the right-hand menu.
You can now change the background color and text color, or make the disclaimer bigger or smaller using the settings in the right-hand menu.
When you’re happy with how the disclaimer looks, click on the ‘Save’ button.
Now, if you visit any blog post on your affiliate website, you’ll see the disclaimer in action.
Do you want to use shortcodes in your WordPress theme?
Normally, you will use shortcodes inside content areas like posts, pages, or sidebar widgets. However, sometimes you may want to add a shortcode inside your WordPress theme.
In this article, we will show you how to easily add any shortcode to your WordPress theme.
Why Use Shortcodes in Your WordPress Themes?
Shortcodes allow you to add all kinds of features to your website, including image galleries, forms, social media feeds, and much more.
WordPress comes with a few built-in shortcodes, but there are also many popular WordPress plugins that add shortcodes to your site.
For example, WPForms has easy-to-use blocks, but it also provides shortcodes so that you can add forms to other areas of your website.
Most of the time, you will add shortcodes inside content areas like posts and pages.
However, sometimes you may want to use a shortcode inside your WordPress theme files.
This allows you to add dynamic elements to areas you can’t edit using the standard WordPress post editor, such as your 404 page. It’s also an easy way to use the same shortcode on multiple pages.
For example, you might add a shortcode to your theme’s Page or Post template.
With that in mind, let’s see how you can use shortcodes in your WordPress theme. Simply use the quick links below to jump straight to the method you want to use.
Method 1: Using the Full-Site Editor (Block Themes Only)
The easiest way to use shortcodes in your WordPress theme is by using the full site editor. This allows you to add a Shortcode block to any part of your website.
However, this method only works with block-based themes like Hestia Pro. If you are not using a block-enabled theme, then you will need to use a different method instead.
To get started, head over to Themes » Editor in the WordPress dashboard.
By default, the full site editor shows your theme’s home template, but you can add shortcodes to any template or template part, such as the header or footer.
To see all the available options, just select either ‘Templates’ or ‘Template Parts’.
You can now click on the template or template part you want to edit.
As an example, we will add a shortcode to the 404 page template, but the steps will be exactly the same no matter which template you select.
WordPress will now show a preview of the template or template part.
To add a shortcode, go ahead and click on the small pencil icon.
With that done, click on the blue ‘+’ icon in the top left corner.
In the search bar, you need to type in ‘Shortcode’.
When the right block appears, drag and drop it onto the theme template.
You can now either paste or type the shortcode that you want to use.
After that, go ahead and click on the ‘Save’ button.
Now, simply visit your WordPress blog to see the shortcode in action.
Method 2: Editing Your WordPress Theme Files (Works With Any WordPress Theme)
You can also add shortcodes to your WordPress theme by editing the theme files. This method is more advanced, but it works with every WordPress theme.
If you are creating a custom theme, then you can add or modify the code in your existing theme files.
When editing your theme files, you can’t add the shortcode in the same format you use with standard content areas. Instead of seeing the shortcode’s output, you will see the shortcode itself on the screen.
This happens because WordPress doesn’t execute shortcodes inside theme template files. Instead, you will need to explicitly tell WordPress to run the shortcode using the do_shortcode function.
If you are adding a shortcode with extra parameters, then the code snippet will also change a little bit.
Imagine you have created a contact form using WPForms. In this case, you will need to use the standard WPForms shortcode plus the form’s ID:
echo do_shortcode("[wpforms id='92']");
Troubleshooting: What to Do When do_shortcode Isn’t Working
Sometimes, you may add a shortcode to a theme file, but the code’s output doesn’t appear on your WordPress website. This usually means the shortcode depends on a WordPress plugin or some other code on your website.
If the do_shortcode function is not working, then make sure the plugin providing the shortcode is installed and activated by going to Plugins » Installed Plugins.
In the following image, WPForms is installed but deactivated, so the echo do_shortcode code won’t work.
You can also check whether a shortcode is available for you to use by adding the shortcode_exists() function to your index.php file.
In the following snippet, we are checking whether the WPForms snippet is available to use on our website:
if ( shortcode_exists( 'wpforms' )) {
echo do_shortcode("[[wpforms id='147']]");
}
If you still don’t see the shortcode output on your website, then try clearing the WordPress cache, as you may be seeing an outdated version of your site.
Method 3: Creating Your Own WordPress Theme (Fully Customizable)
Another option is to create a custom WordPress theme. This is a more advanced method, but it allows you to add as many shortcodes as you want to any area of your WordPress theme. You can also make other changes to create a theme that has exactly the features and design you want.
In the past, you would need to follow complicated WordPress tutorials and write code to build a custom WordPress theme. However, it’s now possible to create a custom theme without writing a single line of code using SeedProd.
SeedProd is the best WordPress page builder and also comes with a theme builder. This allows you to design your own themes using drag and drop.
Are you trying to understand the difference between WordPress widgets vs blocks?
WordPress widgets and blocks are both used to add dynamic content elements to posts, pages, sidebars, and templates. Widgets have been a core part of WordPress for 16 years, while blocks have only been a part of the platform since 2018. They serve similar functions, but they aren’t the same.
In this article, we’ll explain the difference between WordPress widgets and blocks, so you can learn how to use them properly.
Here is a quick overview of the topics we’ll cover in this article.
WordPress widgets are dynamic-content elements that you can add to widget-ready areas like sidebars.
Widgets were introduced in WordPress 2.2 (May 2007). The purpose was to provide users with an easy way to add customizable elements to their website without having to repeatedly insert the same element at the end of blog posts, for instance, or edit their WordPress theme files to create a sidebar and manually code in something like Google AdSense tracking codes.
Users could simply insert content or features using widgets that didn’t have to be part of their overall theme files or blog posts.
Widgets made it much easier for users to create their ideal WordPress blog, letting them easily add banner ads or email sign-up forms.
Gradually, almost all WordPress themes adapted widgets by adding widget-ready areas in their design and layouts. These were most often sidebars and footers.
The WordPress widget editor looked like this until WordPress 5.8 was released in 2021.
What are Blocks in WordPress?
Blocks are the elements that users can add to an area using the WordPress content editor. WordPress switched to this block-based content editor in WordPress 5.0.
You may also see it referred to as the Gutenberg editor, which was its development codename.
Blocks are very similar to widgets because each one handles a single element of the page or post. Unlike widgets, however, blocks were introduced only as part of the post and page editor, which means they could not be easily added to areas like the site footer or sidebar.
A block can be inserted into a post or page for any element, including a paragraph, an image, a gallery, a plugin-specific feature like email signups, or a video embed.
There are also blocks to add design layout elements like covers, patterns, tables, columns, groups, and more.
The Difference Between Widgets vs Blocks in WordPress
Until WordPress 5.8, the difference between widgets and blocks was quite obvious.
Users added widgets to their theme’s widget-ready areas. They were primarily used to display elements that were not post/page content. For instance, recent posts lists, important links, banner ads, forms, and more.
However, the difference between widgets and blocks has become quite blurry now.
Widgets are self-contained elements that can be used in widget-ready areas like sidebars on a WordPress website.
Blocks are also self-contained elements that you can access through the block editor. They can be used in posts and pages, as well as widget-ready areas. You can also use them in templates if your theme has enabled the full site editor.
Widgets were the first to allow developers to output other elements like contact forms, testimonials, social media feeds, and more.
However, the same can be achieved using blocks. Many of the top WordPress plugins now come with blocks that you can add anywhere.
For instance, WPForms comes with a contact form block that you can add anywhere to display a form.
Similarly, All in One SEO comes with blocks for the table of contents, HTML sitemap, breadcrumb navigation, and more.
The Block-Based Widget Editor
WordPress planned to adapt the block editor for editing all areas of your website including the widget-ready areas.
To make this happen, the new block-based widget editor was introduced in WordPress 5.8.
Users were now able to use blocks in widget-ready areas of their themes.
Widgets are still located under the Appearance » Widgets menu.
However, if you are using a block-based theme that doesn’t have any defined widget-ready areas, then you may not see it under there. You will see Appearance » Editor instead.
Many of the legacy WordPress widgets already have blocks that can do the same thing.
Click on the add new block button (+) and you will find a bunch of blocks categorized as Widgets.
These are still blocks, but they are just categorized as widgets so that users can understand that these blocks behave like legacy widgets.
However, if a user still needed to use a legacy widget that doesn’t have an alternative block, then they can do so by using the Legacy Widgets block.
If a WordPress plugin has a block that you can add to the posts and pages, you can now also use the same block in widget-ready areas.
Theme developers can also create custom blocks that users can add to different areas of their websites.
The Future of WordPress Widgets
WordPress is moving forward towards using a more intuitive and unified way to edit the content on a WordPress website.
This means that older widgets will no longer be available going forward. WordPress themes and plugin developers are already adapting and adding support for the block editor in their products.
However, many WordPress themes still use older widgets. Similarly, many WordPress plugins still use shortcodes and legacy widgets.
Upon activation, the plugin will simply replace the block-based widget editor with the older widget page.
Note: Classic Widgets plugin will only be supported until 2024. After then, the plugin will not be updated or maintained this is why we recommend using WPCode to future-proof your customization.
Blocks vs Widgets – Which One is Better?
We recommend users start using the new block-based widgets editor as soon as possible because that’s the direction WordPress development is heading.
It is easy to use, modern, and more flexible than the previous Widgets screen.
If a WordPress plugin or theme on your website doesn’t support block-based widgets, then you can reach out to the developer and ask them to convert their widgets into blocks.
If they don’t have plans to release an update, then you can easily find alternative plugins or themes to replace them.
Do you want to remove the WordPress icon from the browser tab of your website?
Removing the WordPress icon can prove to be extremely beneficial for you as it will allow you to design your own site icon and increase your brand recognition among customers.
In this article, we will show you how to easily remove the WordPress icon from the browser tab.
Why Should You Remove the WordPress Icon from Browser Tab
The WordPress icon on your browser tab can make your website look generic and unprofessional. Most users have many tabs open in their browser which results in your website title being hidden.
With your website title hidden, users have no way to recognize your site immediately. With just the WordPress logo in the tab, your users will be unable to identify your site among many others.
By removing the WordPress icon from the browser tab and adding a favicon (aka your site icon), you can use your own brand and make your site more user-friendly for your visitors.
A favicon is a tiny image that appears next to your website’s title in the browser.
The favicon will help your users immediately recognize your website and switch between different tabs efficiently. More frequent visitors will even build instant recognition for that tiny image on your browser.
How to Remove the WordPress Icon from Browser Tab
The process of removing the WordPress icon and adding a favicon in its place is extremely easy. There are three methods that can be used to remove the WordPress icon from the browser tab.
Today, we’ll be taking a look at all three methods and you can choose the one that feels right for you.
Method 1. Removing the WordPress Icon Without a Plugin
As of WordPress 6.1, the WordPress default theme comes with a full site editor. You can also use this method if you’re using a block theme on your WordPress site to remove the WordPress icon.
At the time of writing this tutorial, the default WordPress 6.1 theme Twenty Twenty-Three doesn’t have a site icon block to change your favicon away from the WordPress logo.
If you navigate to Appearance » Editor from your WordPress admin dashboard, this will open up the full site editor, but you cannot change your favicon from here or remove the WordPress icon from the browser tab.
So you can copy and paste the URL below into your browser to open up the theme customizer.
https://example.com/wp-admin/customize.php
Remember to replace ‘example.com’ with your own site’s domain name.
This URL will take you to the Theme Customizer. Once there, simply click the ‘Site Identity’ tab.
Now on the ‘Site Identity’ page, scroll down to the ‘Site Icon’ section.
Simply click the ‘Select Site Icon’ button which will open up the WordPress media library.
You can now select any image that you want to use as a favicon to replace the WordPress icon on the browser tab.
For more details on how to create a favicon, you can check out our article on how to add a favicon in WordPress. If the image that you’ve chosen to use as a favicon exceeds the recommended size, then WordPress will allow you to crop it.
Once you’re satisfied with your choice simply click the ‘Publish’ button at the top.
Congratulations! You’ve successfully removed the WordPress icon from the browser tab and replaced it with your own.
Remove the WordPress Icon in a Theme without Full-Site Editing
If you’re using any non-FSE theme, then you can directly navigate to the Theme Customizer at Appearance » Customize to remove the WordPress icon from the browser tab.
In sites that don’t support the full-site editor, the WordPress theme customizer allows you to change details about your site such as the favicon, typography, default colors, footer, and more.
Once in the Theme Customizer, click on the ‘Site Identity’ tab. The process is the same as the one we showcased above. You can remove the WordPress icon simply by uploading a site icon of your choice.
Once you’re happy with your choice, simply click on the ‘Publish’ button to save changes.
Method 2. Removing the WordPress Icon Using a Plugin
You can also use a plugin to remove the WordPress icon and replace it with a favicon. For this tutorial, we will be using the Heroic Favicon Generator plugin.
It is a well-known plugin that is used by many to add a favicon to their website.
First, all you have to do is install and activate the Heroic Favicon Generator plugin.
After the plugin has been activated, simply go to Plugins » Installed Plugins and click on ‘Favicon Settings’ option.
This will take you to the ‘Heroic Favicon Generator Settings’ page. Here, simply click on the ‘Select Favicon’ button under the ‘Select Favicon’ option.
This will open up the WordPress media library. Now, you can choose and upload any image that you want to use as a favicon.
After you’ve uploaded your favicon, you can scroll down to the ‘Previews’ section where you will be able to see how the favicon will look on your website.
Once you’re satisfied, simply scroll down and click on the ‘Save Changes’ button.
You have successfully removed the WordPress icon and have added a favicon in its place.
Are you looking to change the font on your WordPress theme to something different?
Your website text font plays an important role in your site’s design and brand identity. It can improve the readability of your content and make your site look modern and professional.
In this article, we’ll show you how to change font in WordPress using 5 different ways, so you can easily change fonts using no-code method, or change WordPress font without using any plugin.
Why Change Fonts on Your WordPress Website?
Fonts are an essential part of your website design and have a huge impact on how your WordPress site will look and feel.
If your website has a difficult font to read, then it will be hard to retain visitors, and they’ll eventually abandon your site.
A font also shows your brand identity. For instance, you can use specific fonts to make your site look more professional, or casual.
WordPress themes come with a default font, font size, and font color for your website. However, you may want to change the default font to something different.
That said, there are several ways of changing fonts in WordPress. We’ll show you several different methods. You can click the links below to jump ahead to any section.
An easy way of changing your site’s font is by going to the WordPress theme customizer. It allows you to change the appearance of your website and shows a real-time preview.
Note: If your customizer menu option is missing, then your theme likely has full site editing enabled and you’ll need to use a different method or switch themes.
For this tutorial, we’ll use the Astra theme. However, the options will change depending on the WordPress theme you use. Depending on your theme, you’ll want to look for ‘font’ or ‘typography’ options in the customizer.
First, you can head over to Appearance » Customize from your WordPress dashboard.
This will launch the WordPress theme customizer.
The Astra theme has a ‘Global’ section with options to change site-wide styles. To change the font on your whole website, you can click the ‘Global’ option from the menu on your left.
On the next screen, you’ll see options like typography, colors, container, and buttons.
Go ahead and click the ‘Typography’ option.
From here, you can choose different fonts under the ‘Presets’ section.
These are default fonts offered by the theme and selecting a preset will change the font on your entire website.
Besides that, you can also change fonts for individual elements on your theme.
For example, you can use a different font for body and headings. There are even options to use separate fonts for each heading level.
To start, simply choose a font from the ‘Font Family’ dropdown menu for any individual element.
Besides that, there are more options to change the font size, weight, select variants, and more.
When you’re done, don’t forget to click the ‘Publish’ button.
You can now visit your website and see the new font. For instance, we changed the body font to Roboto and the heading font to Helvetica on our demo site.
It’s important to note that not all WordPress themes will offer the same features and customizations that Astra is offering. If your theme doesn’t offer that, then continue reading to the next step.
Changing Fonts in WordPress Full Site Editor
If you’re using a block-based WordPress theme like Twenty Twenty-Two, then you can change your site’s font using the full site editor (FSE).
The full site editor allows you to customize your WordPress theme using blocks, just like when editing posts or pages using the WordPress content editor. However, FSE is currently in beta and only a handful of themes support it.
For the sake of this tutorial, we’ll use the Twenty Twenty-Two theme.
To get started, you can head over to Appearance » Editor from the WordPress admin panel.
This will open the full site editor for your WordPress theme.
Next, you can click the Styles icon in the top right corner and then click on the ‘Typography’ option.
After that, you can select elements like text and links to change their typography.
We’ll select Text as the element and then click on the ‘Font Family’ dropdown menu to change its font.
When you’re done, simply click the ‘Save’ button.
You’ve successfully changed the font using the full site editor. You can also add custom fonts to your WordPress site as well and then change them in the full site editor.
Change WordPress Fonts Using a WordPress Plugin
Another way of changing WordPress fonts is by using a WordPress plugin like Easy Google Fonts.
It’s a free WordPress typography plugin that lets you add over 600 Google fonts and different font variants to your website.
First, you’ll need to install and activate the Easy Google Fonts plugin. If you need help, then please see our guide on how to install a WordPress plugin.
Upon activation, you will see the Easy Google Fonts welcome screen in your WordPress dashboard. You can scroll down and click the ‘Go to Settings → Easy Google Fonts’ button.
On the next screen, you will see different plugin settings.
Go ahead and click the ‘Manage with Live Preview’ button at the top.
This will open the WordPress theme customizer, and you be in the ‘Typography’ tab.
Another way of accessing fonts added by the plugin is by going to Appearance » Customize from your WordPress dashboard and then clicking the ‘Typography’ tab.
On the next screen, you’ll see the ‘Default Typography’ option.
Go ahead and click on it.
After that, you can change the font of every element on your website.
For example, let’s change the font of Heading 1. Simply click the arrow next to Heading 1 to expand the options. From here, you can click the ‘Font Family’ dropdown menu and select a font.
You can do the same for other heading levels and paragraphs.
Don’t forget to click the ‘Publish’ button when you’re done.
Change Fonts Using a WordPress Theme Builder
There are many powerful WordPress theme builders that let you create a custom theme without editing code. You can use them to change the font of different elements on your website.
First, you’ll need to install and activate the SeedProd plugin. For more details, please see our guide on how to install a WordPress plugin.
Upon activation, you’ll see the SeedProd welcome screen. Go ahead and enter your license key and click the ‘Verify key’ button. You can easily find the license key in your SeedProd account area.
After that, you can head over to SeedProd » Theme Builder from the WordPress dashboard.
Next, go ahead and click the ‘Themes’ button at the top.
From here, the plugin will show you multiple themes to choose from.
Simply hover over a theme you want to use and then click on it. We’ll use the Starter theme for this tutorial.
SeedProd will now generate different theme templates.
You can edit each template and customize your WordPress theme. There’s even an option to manually add a theme template.
Let’s edit the Homepage theme template and change the fonts of different elements. To start, click the ‘Edit Design’ link under Homepage.
This will launch the SeedProd’s drag and drop theme builder. You can add new elements from the menu on your left and place them anywhere on the template.
To change the font of any theme section, simply select it. For example, we’ll select the text box under the Starter heading.
Next, go to the ‘Advanced’ tab from the menu on your left and click the ‘Edit’ button in front of Typography.
After that, you’ll see multiple options to edit the typography of your selected section.
You can click on the ‘Font Family’ dropdown menu and choose a font for your text. There are also options to select font weight, adjust the font size, line height, letter spacing, alignment, letter case, and more.
You can now repeat this step and change the font of other elements on your theme.
When you’re done, simply click the ‘Save’ button at the top.
To apply the custom theme and fonts, go to SeedProd » Theme Builder and toggle the switch next to the ‘Enable SeedProd Theme’ option to Yes.
Customize Font Appearance in WordPress Content Editor
Using the content editor, you can also change how your fonts appear in specific blog posts and pages.
The downside of this method is that it will only apply the new font to that particular post or page only. You’d have to repeat this step manually for all other posts where you want to apply similar customization.
This can be really handy for post specific customizations, but if you’re looking for a sitewide font change option, then you should consider the other options instead.
With that said, to change the font using WordPress content editor, simply edit a post or add a new one. Once you’re in the WordPress content editor, select the text to change its appearance.
In the settings panel on your right, head to the ‘Typography’ section. Then click the 3 dots in front of Typography and select ‘Appearance’ from the dropdown options.
Once you do that, the Appearance settings will be visible under the Typography section.
Simply click the dropdown menu under Appearance and select a style for your font. For example, you can make the font bold, thin, italic, black, bold italic, extra bold, and more.
Do you want to show a custom header for your WordPress website?
Many WordPress themes come with a built-in header that sits at the top of each page. You may need to customize it to add important links, social icons, site search, or other elements to make a good first impression.
In this article, we’ll show you how to customize your WordPress header and even create a fully custom header for your entire site or specific pages.
What Is the Header in WordPress?
Your website header is the top section of every page on your WordPress website, and probably the first thing your visitors will see.
It often displays your website logo and title, navigation menus, and other important elements that you want users to see first.
For example, here’s our header area on WPBeginner that millions of readers see every month.
By customizing your site’s header, you can give it a unique design and make it more useful for your visitors. You can link to your most popular pages, display social icons or your business phone number, and show call to action buttons for more conversions.
With that being said, let’s take a look at how to easily customize your WordPress header. You can use the following links to jump to the section you want to read.
Customize Header by Using the WordPress Theme Customizer
Many popular WordPress themes let you use the WordPress theme customizer to make changes to the header area of your WordPress layout. This feature is sometimes called a custom header, but not all themes support it.
You should start by navigating to Appearance » Customize in your WordPress admin area.
Note: If you don’t see Appearance » Customize in your WordPress admin menu, but only see Appearance » Editor (Beta), then that means your theme has enabled full-site editing. In that case, you should skip to the next section.
Your theme may add a ‘Header’ section to the customizer, or add header options under the ‘Color’ section, but this varies from theme to theme. Here are a few examples.
Some themes, like Twenty Twenty-One, do not offer header customization options at all. In this case, we recommend you use a drag & drop theme builder plugin like SeedProd that we cover below.
Some free and premium WordPress themes offer even more theme customization options. For example, you may be able to change your header’s font style, layout, colors, and much more. But you are limited to what the theme developer allows you to do.
For example, you can create a custom header using the theme customizer with the Astra theme.
Astra has a dedicated ‘Header Builder’ option in the panel on your left. Here you’ll find different settings to edit the appearance and style of the header. You can build a custom header by adding blocks, just like when editing a blog post or page in the WordPress content editor.
To start, simply hover over an empty area in the header and click the ‘+’ icon to add a header block.
Next, you can select any block you’d like to add to your custom header. For example, you can add widget block, account block, search block, and more.
Plus, the header builder also lets you drag and drop the blocks and place them above or below the header.
You can further customize each block that you add to the header.
For instance, selecting the Site Title & Logo block will give you options to upload a site title and logo, change the logo’s width, display a site tagline, and more.
Besides that, you can also change the background color of the header or add a background image to appear in the header.
When you’re done editing the custom header, simply click the ‘Publish’ button.
Customize Header by Using the WordPress Full Site Editor
WordPress added full-site editing to WordPress in version 5.9. If your theme supports the new feature, then it replaces the theme customizer. However, at this time there are only a few themes that work with the full site editor.
When you use a compatible theme, you can customize your header by navigating to Appearance » Editor. This will launch the full site editor, which is just like the block editor you use to write WordPress posts and pages.
When you click the header, you will notice the name of the template at the top of the page changes to ‘Page Header’.
Now when you click the ‘Settings’ icon on the toolbar, you will see options to customize the header’s layout, color, border, and dimensions.
As an example, we’ll change the header’s background color. First, you need to click on the ‘Color’ section to expand it. After that, you should click on the ‘Background’ option.
A popup will appear that allows you to select a solid color or gradient. There will also be a number of colors that you can select. When you click on a color, the background of your header will be changed immediately.
You can find more customization options by clicking the ‘Styles’ icon at the top right of the page. This will let you change the header’s font, colors, and layout.
Create Custom Header and Page Layouts with SeedProd
If you want to have total control over your headers, footers, and sidebars to give your website a unique design, then we recommend using SeedProd.
SeedProd is the best WordPress theme builder plugin that allows you to easily create a custom WordPress theme without writing any code. This includes creating headers, footers, and everything else needed for an attractive WordPress theme.
You can even create multiple custom header styles for different pages and sections of your website.
Note: You can use the free version of SeedProd to create custom landing pages including custom headers, but you will need the Pro version to create fully custom themes which include sitewide header layouts.
All you need to do is click the ‘Edit Design’ link found under the header.
This will open the header in SeedProd’s drag and drop editor.
From here, you can easily customize your header by adding new blocks.
There are blocks for template tags like a site logo, any of your WordPress widgets, and advanced blocks such as a countdown timer, navigation menu, or social sharing buttons.
The best part is that you can further customize each block using the theme builder. For instance, you can change the size and alignment of your logo or choose which pages to show in the navigational menu. It even allows you to add an image in the header.
With SeedProd, you can also add a complete section to your theme’s header template.
Sections are a group of blocks, and you can use them for different areas on your website. This includes headers, footers, features, testimonials, call to action, and more.
To use a header section, first switch to the ‘Sections’ tab in the Design panel.
After that, choose a header section you’d like to use for your website. SeedProd offers multiple section templates that you can use.
Next, go ahead and customize the header section.
Once you’re happy with your custom header, make sure you click the ‘Save’ button to store your changes.
Now, you’re ready to publish your custom header.
Simply go to SeedProd » Theme Builder page from your WordPress dashboard and click the toggle next to the ‘Enable SeedProd Theme’ option to Yes.
Once you enable the option, SeedProd will replace your default WordPress theme with a new custom theme and header.
You can now visit your website to see the new custom header in action.
Create Different Custom Headers for Each Page
Did you know that using SeedProd, you can create custom headers for different pages?
The theme builder lets you add custom headers for each page on your WordPress website. This way, you can show a customized header for different categories, tags, post types, page types, and more.
To start, you’ll need to go to SeedProd » Theme Builder from your WordPress dashboard and click the ‘Add New Theme Template’ button.
A new popup window will appear where you’ll need to enter the theme template details.
Go ahead and enter a name for your theme template. After that, choose ‘Header’ as the template type from the dropdown menu. You can leave the ‘Priority’ field blank.
Next, you’ll need to enter the display conditions for your custom header. For example, we used the conditions where it will show on all posts and pages that are in the tutorials category.
Don’t forget to click the ‘Save’ button when you’re done.
After that, you can go ahead and edit the custom header using the SeedProd drag and drop theme builder.
When you’ve finished editing the custom header, simply click the ‘Save’ button at the top.
Most websites display the same header on all posts, pages, categories, and archive pages. However, you can display a different header for each WordPress category.
This can be done by adding code to your theme files, but you will have more control by using a theme builder.
We showed you earlier how to customize your header using the SeedProd theme builder plugin. SeedProd also allows you to create multiple custom headers and display them for different categories using conditional logic.
To create a new header, you need to navigate to SeedProd » Theme Builder and click the orange ‘Add New Theme Template’ button. Alternatively, you can duplicate your current header and use it as a starting point.
A popup will be displayed where you can give the theme template a name and select ‘Header’ from the Type drop down menu.
You also need to enter a priority. This is used if more than one header meets the conditions for a certain page, and the header with the largest priority will be displayed. The default header has a priority of 0, so make sure you enter 1 or higher.
After that, you’ll need to set up one or more conditions. This lets SeedProd know when to display a certain header. You simply select the conditions from drop down menus.
On the first two menus, you need to select ‘Include’ and then ‘Has Category’. In the last field, you should type the name of the category where you want the header to be displayed.
You can easily display the same header for multiple categories by clicking the ‘Add Condition’ button and including another category. When you’re finished, make sure you click the ‘Save’ button to save the new header.
Now you can customize the design of each new header using SeedProd’s drag and drop editor as we showed you earlier.
If you’re building a custom theme from scratch using code, then you might be looking to add a WordPress widget to your header to capture the attention of your visitors. Widgets allow you to add content blocks to specific sections of your theme easily, but not every theme includes a header widget area.
We mentioned earlier how simple it is to add widgets to your header using the SeedProd theme builder. But what if you wish to add a widget to a normal WordPress theme’s header?
Some themes, like the Astra theme, let you do this using the WordPress theme customizer. For example, Astra adds an option called ‘Header Builder’ that lets you completely customize the header, including adding widgets.
If your WordPress theme doesn’t currently have a WordPress widget area in the header, then you’ll need to add it manually by adding the following code to your functions.php file, in a site-specific plugin, or by using a code snippets plugin.
This is a more advanced option, since you’ll need to know where to place the code and how to style it using CSS.
This code registers a new sidebar or a widget ready area for your theme.
If you go to Appearance » Widgets, then you will see a new widget area labeled ‘Custom Header Widget Area’. Now, you can add your widgets to this new area.
Finally, you need to add some code to your theme’s header template located in the header.php file of your theme. This will add the widget area you created earlier to your header so that the widgets will be displayed on your website.
You need to copy this code snippet and paste it where you want the widget to display.
Another way you can make your WordPress headers more attractive is by adding random images to the header section.
Showing images that randomly change helps capture your visitors’ attention and make your content more engaging.
To add random header images to your WordPress blog, you can use the theme customizer and upload images to the header section. This option may vary depending on the WordPress theme you’re using.
Next, go ahead and select the ‘Randomize uploaded headers’ option.
If you want more control and flexibility in showing random images in the header section, then you can also use a WordPress plugin.
Finally, if you’re wanting to add custom code to your website’s header section, you can do that easily from your WordPress dashboard. This method is recommended for advanced users and not suitable for beginners because it includes editing code and requires technical knowledge.
You can find your theme’s header files by going to Appearance » Theme File Editor from the WordPress admin panel. In the ‘style.css’ theme files, you can scroll down to the site header section and add or remove code.
Note: We don’t recommend that you directly edit the theme files because the slightest mistake can break your website and mess up the design.
An easier way of adding custom code to edit your site’s header is by using the Insert Headers and Footers plugin.
First, install and activate the Insert Headers and Footers plugin. For more details, please see our guide on how to install a WordPress plugin.
Upon activation, you can go to Settings » Insert Headers and Footers from your WordPress dashboard. Next, enter the custom code in the ‘Scripts in Header’ section.
Do you want to easily embed TikTok videos on your WordPress website?
If you’re already creating successful, viral TikToks then it makes sense to post these videos to your website too. In this way, you can get more views, engagement, and social media followers with very little extra effort.
In this article, we’ll show you how to easily embed TikTok videos in WordPress.
Why Embed TikTok Videos in WordPress?
According to our ultimate list of blogging stats, posts with videos get 83% more traffic than those without video. That said, if you’re already posting TikToks then it makes sense to embed these videos on your WordPress website.
In this way, you can get more visitors, without having to spend a ton of time creating new content. These videos can also help capture the visitor’s attention and keep them on your website for longer, which will increase pageviews and reduce bounce rate in WordPress.
At the same time, these videos will promote your TikTok channel to people who visit your website. This can get you more engagement and followers on TikTok.
With that said, let’s see how you can embed TikTok videos in WordPress. Simply use the quick links below to jump straight to the method you want to use.
Method 1. Using the TikTok Block (Works With Any Theme)
The easiest way to embed TikToks on your WordPress site is by pasting the video’s URL into the page or post editor. WordPress will then detect the video and fetch it for you automatically.
First, you need to visit the TikTok video that you want to embed. Then, copy the video’s URL.
Next, open the WordPress page or post where you want to show the TikTok video. You can then simply paste the URL into the WordPress block editor.
WordPress will automatically detect that you’re embedding a TikTok video, and add a TikTok block with the video already embedded.
By default, WordPress will resize the TikTok video automatically for smaller screens, including smartphones and tablets. It will also preserve the video’s ratio when the browser gets resized.
This is a good user experience, so we recommend leaving the setting enabled. However, sometimes you may want to keep the video at the same size, no matter what. In that case, click to select the TikTok block and then disable the ‘Resize for smaller devices’ toggle.
You can get similar results by adding the TikTok block to a page or post. After that, you can add the TikTok video’s URL at any point.
This is useful if you’re unsure what TikTok video you’re going to embed, or if the video hasn’t been published yet. This is also a good way to plan your layout, particularly if you’re designing a landing page or sales page.
To add a TikTok block, simply click on the ‘+’ icon and then type in ‘TikTok.’
When the right block shows up, click to add it to the page or post.
After that, you can simply paste the TikTok URL into the block and click on ‘Embed.’
Another option is to embed the TikTok video in a widget-ready area such as the sidebar or similar section. This allows you to show the same video across your entire site. For example, if you’re trying to create a viral giveaway in TikTok, then you might embed the video announcing the contest.
To do this, go to Appearance » Widgets in your dashboard. Here, you’ll see all the different areas where you can add widgets in WordPress.
Simply find the area where you want to embed the TikTok video.
Then, click on the ‘+’ icon.
In the popup that appears, type in ‘TikTok.’
When the right block shows up, click to add it to the widget-ready area.
You can now paste the URL of the TikTok video you want to embed.
With that done, click on the ‘Embed’ button.
When you’ve finished, don’t forget to click on ‘Update’ to make the changes live.
You can now visit your WordPress blog or website to see the TikTok video live.
Method 2. Using the Full-Site Editor (Works With Block-Based WordPress Themes)
If you’re using a block theme then you can add a TikTok to any widget-ready area or template using the full-site editor. This allows you to show TikTok videos on pages and posts that you can’t edit using the standard content editor. For example, you might use TikTok videos to improve your 404 page template.
In your WordPress dashboard, go to Themes » Editor.
By default, the full-site editor will show your theme’s home template.
If you want to add the TikTok video to a different area, then click on either ‘Template’ or ‘Template Parts.’
You’ll now see all the templates or template parts that make up your WordPress theme.
Simply find the template where you want to embed a TikTok video and click on it. As an example, we’ll be adding a TikTok to the Archive page template but the steps will be largely the same no matter what template you’re using.
WordPress will now show a preview of the template.
To go ahead and edit the layout, click on the small pencil icon.
With that done, click on the ‘+’ button towards the top left of the screen.
In the search bar that appears, type in ‘TikTok.’
When the right block shows up, drag and drop it onto the layout.
You can now paste the video’s URL into the TikTok block, and click on the ‘Embed’ button.
When you’re happy with how the template looks, click on the ‘Save’ button. Now, simply visit your WordPress website to see the TikTok in action.
Method 3. Using QuadLayers (Embed Your Entire TikTok Feed)
If you just want to add a few TikToks to your WordPress website, then method 1 and method 2 are both great choices. However, sometimes you may want to show all your latest TikToks in a feed that updates automatically.
This is an easy way to keep your website fresh and interesting, while promoting your newest TikTok videos at the very same time.
The best way to embed a TikTok feed in WordPress is by using QuadLayers TikTok Feed. This free plugin allows you to connect WordPress to your TikTok account, and then show all your videos in a gallery or masonry layout.
Just be aware that you can only show TikToks from your own account.
First, you’ll need to install and activate the plugin. If you need help, then please see our guide on how to install a WordPress plugin.
The first step is creating an access token using your TikTok account. In the WordPress dashboard, head over to TikTok Feed » Accounts and click on ‘Add TikTok Account.’
Next, click ‘Login with TikTok.’
You can now type in your TikTok email address and password, and follow the onscreen instructions to connect QuadLayers to your TikTok account.
When you’re done, QuadLayers will take you back to the WordPress dashboard automatically.
Now, go to TikTok Feeds » Feeds and click on the ‘+ Feed’ button.
In the popup that appears, open the ‘Account’ dropdown and select your TikTok account.
You can now choose between Gallery and Masonry layouts for the TikTok feed. Masonry shows the videos in portrait mode, while Gallery displays the videos as square thumbnails.
By default, QuadLayers will show the most recent 12 TikToks posted to your account. To show more or fewer videos, simply type a different number into the ‘Limit’ field.
You can also change how many videos QuadLayers shows in each row, by typing into the ‘Columns’ field.
There are some more settings you can configure, but this is all you need to create an eye-catching TikTok feed.
When you’re happy with your settings, click on ‘Save.’
QuadLayers will now create a shortcode that adds the feed to your website.
Simply go ahead and copy the value in the ‘Shortcode’ column.
Now, just paste this shortcode into any page, page, or widget-ready area. For step-by-step instructions on how to place the shortcode, please see our guide on how to add a shortcode in WordPress.
With that done, simply visit your website to see the TikTok feed in action.
We’ve been working with the Gutenberg block editor for a long time across multiple websites, so we know that it can feel restrictive by default.
WordPress offers a set of essential content blocks like Paragraph, Image, Button, List, and more. However, you can extend these options using plugins that add more blocks to the editor.
In this article, we’ll share some of WordPress’s best Gutenberg block plugins that you can try.
What Is the WordPress Block Editor?
The WordPress block editor is the default content editor that comes with WordPress. It lets you build your posts and pages using a system of blocks.
For a typical blog post, you will have many paragraph blocks, some heading blocks for subheadings, and some image blocks.
There are also several default blocks to add other commonly used web elements such as lists, columns, groups, galleries, and more.
If you’ve been creating WordPress sites for many years, you will likely find the block editor a significant change from the classic editor.
Some users have chosen to disable the block editor and keep the classic editor. However, we recommend using the block editor. It offers many valuable features and is more user-friendly.
The block editor lets you add elements to your posts and pages that aren’t possible in the classic editor.
For instance, you can add tables to your post or add a call-to-action button without writing HTML code.
7 Most Useful Time-Saving Default WordPress Blocks
The block editor already includes built-in blocks for all types of content elements.
These blocks make it accessible to add common elements, such as tables, galleries, buttons, and more. In the older versions of WordPress, you had to install plugins to add these common web elements.
Here are some super helpful default WordPress Gutenberg blocks you can use immediately.
Button Block: This lets you add call-to-action buttons to your WordPress pages and articles.
Media & Text Block: This lets you add images and text side-by-side. Doing this with the old Classic Editor was a confusing task for beginners.
Cover Block: You can add stunning cover images to your posts and pages. See our guide on the difference between cover images vs. featured images.
Table Block: This lets you easily create basic tables in WordPress posts and pages. For advanced tables with search, sorting, and ordering features, we still recommend the free TablePress plugin.
Embed Blocks: The block editor includes many embed blocks for popular websites. You can use them to easily embed tweets, YouTube videos, and more.
Shortcode Block: This lets you easily add shortcodes to your WordPress posts and pages. This means the block editor is fully compatible with plugins that provide a shortcode.
Besides these, there are many other blocks that you can explore and try without using a plugin.
With block editor, you also get access to block patterns. These are pre-configured sets of blocks that allow you to add entire sections to your content, making content creation faster and more efficient.
With that said, let’s take a look at some of the best WordPress blocks offered by WordPress plugins. These plugins will simply add new blocks and allow you to extend the functionality of the default WordPress editor.
Best Gutenberg Blocks Plugins for Your WordPress Site
There are two types of WordPress block plugins available on the market. We will cover both of them:
Single-Purpose Block Plugins
Gutenberg Block Libraries
Single-purpose plugins are mostly popular WordPress plugins. Many of them have been in the market for a long time. They specialize in one specific feature and usually provide a powerful block to add content in WordPress.
For example, WPForms is a popular WordPress form plugin for making powerful forms in WordPress. It offers a WordPress block to add contact forms, surveys, order forms, payment forms, and more in your posts and pages.
On the other hand, there are block collection plugins that combine many different content elements in a single plugin.
For example, Genesis Pro gives you 16 additional premium blocks. These include a pricing table block, testimonial block, profile box block, and more.
Single Purpose Block Plugins vs. Block Library Plugins
Now that you know the options, you might wonder if one is better. Here are some essential points to consider.
Single-purpose block plugins add only one feature, but they offer the most comprehensive set of options and integrations. They’re often the best solution for what you’re trying to do.
Block library plugins include a collection of different blocks for different purposes. However, these blocks are not as fine-tuned as the single feature blocks. While they offer a lot of blocks, they may not be as robust.
Another disadvantage of using block suites is that they can add unnecessary clutter to your block list.
With that said, let’s look at the best WordPress Gutenberg block plugins.
WPForms is the most user-friendly WordPress form plugin on the market. It allows you to easily create simple contact forms and more powerful forms like interactive polls, surveys, order forms, and more on your WordPress site.
WPForms offers a block for adding WordPress forms to your posts and pages.
With WPForms, you can create many forms, including survey, contact, email sign-up, and login forms.
You can accept online payments through your forms via Stripe and PayPal, with no additional transaction fees. Even the free version of WPForms allows you to collect Stripe payments, and it only charges a 3% transaction fee.
Why we recommend WPForms: Forms make any website more engaging, and WPForms makes it very easy to add them anywhere on your posts and pages using a block instead of using shortcodes or writing code. In addition, it is a powerful form builder that allows you to create all sorts of forms for your website, including credit card payment forms.
Pros
Easy-to-use form builder with drag-and-drop interface
Dozens of templates to quickly create forms in WordPress
Allows you to accept payments online easily.
Cons
You need a premium version for more features.
Advanced users may want to use custom CSS to style forms.
Author Profile Block – Easily add an author profile box to posts or pages.
Pricing Block – Build beautiful pricing tables in WordPress.
Share Icons Block – Add social share buttons to your posts and pages.
Testimonial Block – Include customer testimonials to help drive sales.
Genesis Blocks also has a pro version, Genesis Pro. This gives you new blocks, 26 pre-built full-page layouts, 56 pre-built sections, and much more. If you want to create a beautiful and effective website quickly, it’s a great solution.
Genesis Blocks is owned by WP Engine, one of the leading managed WordPress hosting companies. They offer premium StudioPress themes that integrate seamlessly with the Genesis Blocks plugin.
Genesis Pro subscription will also give you access to all premium StudioPress themes.
Pros
13 additional blocks for the default WordPress editor
Pre-built layouts to create different types of content
56+ pre-built sections to use anywhere in your posts and pages
Cons
Shows Genesis Blocks above default blocks in the add block panel
Some users may find it difficult to distinguish between default patterns and the plugin’s advanced layouts.
It also comes with a collection of custom blocks that you can add to your website. These blocks are purpose-built to give your posts and pages an SEO boost.
You will get access to the following custom blocks:
AIOSEO Table of Contents – Lets you easily add an SEO-friendly table of contents to your articles.
AIOSEO Breadcrumbs – Add breadcrumb navigation with the right schema markup manually without writing code or editing the theme.
Establish E-E-A-T – Helps you comply with Google’s E-E-A-T ranking signals with Author Bio, Author Name, and Reviewer Name blocks.
Local SEO blocks: Add local SEO blocks to show business info, opening hours, and location map.
AIOSEO – FAQ – Add an FAQ section in your articles with the right schema markup to boost search rankings.
All in One SEO further extends your writing experience by adding a powerful headline analyzer, SEO analysis, and AI-powered SEO title and description generator.
Why we recommend All in One SEO: It provides essential blocks for local SEO, Author Bio, Table of Contents, and FAQs, which helps you improve your articles for search rankings. Additionally, it has in-editor writing tools, powerful schema markup support, and comprehensive SEO features. All these features make it highly useful for any WordPress website.
Pros
The most comprehensive SEO toolkit for WordPress
Custom blocks that give you an SEO boost
Additional tools in block editor to improve your content creation process from an SEO perspective
Cons
You will need the paid plan to unlock its true potential
Smash Balloon is the best social feeds plugin for WordPress. It makes adding social media posts to your site incredibly easy. For instance, you can use it to create a custom Instagram photo feed.
Smash Balloon gives you a block for adding each social media feed. For example, you can simply drag and drop the Facebook block into a post or page to add your Facebook feed. You don’t need to enter any shortcodes.
Each plugin is 100% mobile responsive and looks great out of the box. It automatically matches your WordPress theme’s fonts and styles.
Why we recommend Smash Balloon: The default social media blocks in WordPress are not very helpful. You cannot even embed Instagram and Facebook posts in WordPress properly. However, for many websites, social media can be an important source of traffic or revenue. Smash Balloon helps you bring your social media to your WordPress website.
Pros
Offers easy-to-add blocks for your social media feeds
Combine multiple social feeds
Choose from different layouts and styles
Cons
The all-access plan is a bit expensive but gives you access to all pro plugins for unlimited websites.
OptinMonster is the best lead generation tool for WordPress. You can use it to create many campaigns, including popups, slide-ins, spin-to-win coupon wheels, light boxes, and inline campaigns.
The inline campaigns can be added to your posts and pages in just a few clicks using the OptinMonster block.
You can use inline campaigns to quickly and easily embed an eye-catching email signup form on your page.
Additionally, you could use OptinMonster’s content locking feature to lock the content below the inline campaign.
Why we recommend OptinMonster: The default WordPress blocks are quite limited when it comes to the marketing needs of a website. OptinMonster helps users change that by easily embedding lead generation, special offers, and other personalized campaigns in their posts and pages. See our full OptinMonster review to learn more.
Pros
Helps you convert website visitors into customers
Comes with several campaign types and dozens of templates
Powerful display rules allow you to show personalized messages to your users
Cons
You’ll need a paid plan to unlock its full potential
WP Call Button is a single-purpose block plugin that helps you easily add a click-to-call button on your WordPress site.
Aside from adding clickable phone numbers on your contact page, WP Call Button also has a smart floating call button. This lets you add a highly visible click-to-call button on all pages of your website for mobile users.
This helps you get more phone calls and close more sales for your business. It also works with any professional business phone service that you may be using.
The WP Call Button smartphone buttons have built-in click tracking with Google Analytics, so you can easily see which pages on your site are performing the best.
The phone button block has many customization options, so you can easily customize the call button to match your website design.
Why we recommend WP Call Button: There is no default block to easily add a phone number with a call to action button. Users can manually create one, but what if they need to change the phone number later? WP Call Button block helps fix that issue by providing an easy way to generate phone leads from a website.
Pros
Allows you to easily add a phone number to your website
Create effective call to action buttons and generate phone leads
Spectra, formerly known as the Ultimate Addon for Gutenberg, is the most widely used Gutenberg blocks library plugin.
Created by the people behind the popular Astra theme, this plugin is actively installed on over 600,000 websites.
It includes over 30 Gutenberg blocks, including the following:
Info Box Block – Add an info box with an image, heading, and description.
Multi Buttons Block – It lets you add multiple buttons within a single block.
Team Block – This allows you to create a team section with photos.
Price List Block – This lets you easily create a price list like a restaurant menu.
Testimonial Block – Useful to add testimonials on your website.
An advantage of using this plugin is that it comes with built-in support for the Astra theme and all its starter sites and Template Kits. This means you can import a starter site and use the block editor to create beautiful layouts.
Why we recommend Spectra: It offers a comprehensive set of blocks, patterns, and templates to make the website creation process easier and quicker for beginners. Each block has extensive customization options that let users control design aspects without dealing with code.
Pros
Comes with 30+ blocks for the block editor
Template kits allow you to easily insert entire sections and quickly build websites
Offers handy customization options for each custom block
Cons
Adds an action bar to the editor (which you can hide from settings)
Pricing: Starting at $49 per year or $199 for a lifetime license. A free version is also available.
The default Gallery block in WordPress is quite basic and does not allow you to share the same image galleries outside the editor.
Envira Gallery will enable you to keep your Galleries separate and add them to any post or page.
The plugin is fully compatible with the block editor and has a native block to instantly embed galleries.
Envira Gallery includes advanced features like watermark protection and image proofing. It also has seamless integration with WooCommerce to let you sell your photos.
Why we recommend Envira Gallery: Out of the box, the WordPress Gallery block is quite limited. Envira Gallery allows users to make the visual elements of their website pop out with multiple styles and visual effects. Additionally, the plugin makes it easier to showcase photos without impacting performance. To learn more, see our detailed Envira Gallery review.
Pros
Creates beautiful image galleries for your website
Kadence Blocks is another great WordPress block collection plugin. It comes with some of the most commonly used blocks and helps you add more functionality to your content editor.
The plugin is available in both free and premium versions. The free version has 23 custom blocks, including the following:
Row Layout Block – Insert content blocks in one or multiple columns in a row.
Tabs Block – Lets you create horizontal or vertical tabs and customize them.
Accordion Block – Create beautiful accordions within your content.
Icon List Block – Lets you create attractive lists with custom icons instead of default bullets.
The plugin allows you to deactivate the blocks that you will not use. Doing so keeps your editor clean and lightweight.
It also includes a Design Library, which comes with a collection of block patterns and full-page layouts that you can add to any post or page.
If you like these blocks and want more from Kadence Themes, you can buy their pro plugin or membership plan.
Why we recommend Kadence Blocks: It offers an impressive selection of custom blocks that allow users to extend the functionality of the block editor. The collection includes all the common design elements used in WordPress layouts, making it quite helpful during site creation.
Pros
Extensive set of blocks for commonly used design elements
Ready to use patterns and page layouts for building websites quickly
Works with most popular WordPress themes
Cons
Paid plans are a little expensive.
Pricing: Free, with paid upgrade starting at $149.
Created by the team behind ThemeIsle, a popular WordPress theme company, Otter includes blocks you’ll need to go beyond your theme’s layout options.
There are more than 23 WordPress blocks included in this plugin. Here are some of the useful blocks:
Section Block – Allows you to build layouts using columns like in page builder plugins.
Google Maps Block – This lets you embed Google Maps on your website.
About Author Block – Allows you to show an author bio box on your website.
Sharing Icons Block – This lets you add social sharing icons to your WordPress articles easily.
In addition to the Gutenberg blocks, the plugin also includes block patterns and layouts to help you create stunning pages quickly.
There is also an AI block that connects to OpenAI and can be used to generate content and layouts.
Why we recommend Otter Blocks: It includes a decent set of custom blocks missing from the default WordPress editors. These blocks make it easier to create custom content layouts and highly engaging websites with no design skills.
Pros
An excellent collection of blocks with commonly used design elements
Easy to use and less intrusive than some other plugins on this list
Beautiful patterns library with useful sections to quickly insert into your posts and pages
Cons
Patterns library and block options are not as extensive as some other options on this list
Pricing: Free with a paid version starting at $49.
Notification Box Block – This allows you to add a simple notification box in your articles.
Why we recommend Ultimate Blocks: It offers a decent collection of custom blocks that are helpful in writing engaging content or making custom layouts. See our complete Ultimate Blocks review for more details.
Pros
A decent collection of custom blocks
Easy to use and offers a clutter-free experience
Offers a review block with schema markup support
Cons
Some blocks are locked and available with pro version
Pricing: Free paid version starting at $49 per year.
The plugin helps you to create professional web pages easily and quickly.
Here are some of the advanced Gutenberg blocks.
Columns Manager Block – Predefined responsive columns to let you add multi-column content in WordPress.
Map Block – This lets you embed Google Maps in your posts and pages.
Counter Block – Allows you to showcase numbers like total sales in an attractive manner.
Tabs Block – This lets you add content in tabs easily.
Advanced List Block – Create visually attractive lists with custom list icons and styles.
Several common forms blocks – Including contact forms, newsletter forms, and login / registration forms.
The plugin also gives you advanced block control options to activate blocks as per user roles.
The Advanced Gutenberg plugin is maintained by PublishPress, the folks behind several popular WordPress plugins for editors and publishers.
Why we recommend Gutenberg Blocks by PublishPress: The custom blocks included in the plugin include some unique blocks unavailable in other collections. The plugin’s developers specialize in creating WordPress tools for publishers.
Pros
Excellent set of additional blocks
Clutter-free user interface that doesn’t hijack the default editor
Fast with a minimal performance impact
Cons
Login forms showed up even when a user was already logged in.
Stackable is a free WordPress block library plugin with beautiful custom blocks and a design library for WordPress sites.
It includes more than 43 easy-to-use blocks for Gutenberg.
Here are some of the excellent WordPress blocks offered by this plugin.
Container Block – Allows you to combine different blocks in a single row.
Feature Grid Block – This lets you showcase your product features or portfolio in stylish grid layouts.
Team Members Block – This lets you showcase your team members with their positions, duties, and specialties.
Video Popup Block – This lets you add full-screen video popups for YouTube and Vimeo videos.
Stackable also offers impressive effects and background options. You can use image and video backgrounds, fixed images, gradient background effects, and more.
Why we recommend Stackable: The plugin offers beautifully designed blocks with styling options to easily customize them. It also has a larger collection of blocks than some other plugins on this list.
Pros
Large collection of custom blocks for your WordPress website
Extensive customization options for individual blocks
Dozens of block designs, UI kits, and wireframes to instantly add to your website
The plugin lets you customize your blocks with ease. You can change fonts, set the margin and padding, pick colors, and more.
In addition, some of the blocks offer advanced features like image filters and animation effects.
Why we recommend CoBlocks: If you are looking for a decent collection of custom blocks without compromising how the default editor looks, then this might be the plugin for you. It is easy to use and blends in with the default blocks.
Pros
A decent collection of useful custom blocks
Animation and image filter effects may come in handy for some elements
Blends in the block editor without altering the default UI
Cons
A smaller set of blocks than some other plugins on the list
Advanced Editor Tools used to be called TinyMCE Advanced. It’s a popular plugin that enhanced the old classic editor with more formatting options.
Now, it also supports the newer Gutenberg block editor.
Advanced Editor Tools offers additional formatting and styling options in default blocks. For example, you will see new formatting buttons in the toolbars with the ability to choose fonts. You can also adjust which buttons you want to see in the toolbar.
Why we recommend Advanced Editor Tools: Many folks migrating from the older editor still had content that they could edit in the classic editor block. For those people, this plugin offers an option to switch to the block editor while still using the classic editor inside it.
Pros
A better alternative to the classic editor
Extends classic editor block editor with more formatting options
Easy to use inside the block editor
Cons
Lacks styling options that you would get with custom blocks
Pricing: Free
Some Honorable Mentions
Besides the ones we mentioned above, there are many Gutenberg blocks plugins on the market. Here are some honorable mentions you can use as alternatives to the above-listed plugins:
Among the block library plugins, Genesis Blocks is the best option, with Spectra being the close second.
We hope this article helped you find the best Gutenberg blocks for your WordPress site. You may also want to see our handpicked list of the best Gutenberg-friendly WordPress themes and our comparison of the best WordPress membership plugins to create & sell online courses.
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.
