EDITS.WS

Tag: full site editor

  • What’s Coming in WordPress 6.4 (Features and Screenshots)

    WordPress 6.4 beta was released recently. We have been closely monitoring the development and testing it out.

    It will be the third major release of 2023 and will ship with significant new features, bug fixes, and performance improvements.

    In this article, we’ll show you what’s coming in WordPress 6.4 with details and screenshots.

    What's coming in WordPress 6.4

    Here is a quick overview of changes coming in WordPress 6.4:

    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.

    Twenty Twenty-Four preview

    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.

    Twenty Twenty-Four Styles

    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.

    Twenty Twenty-Four patterns

    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.

    Launch Font Library

    Clicking on the Fonts icon on the panel will bring up the Font Library.

    From here, you can upload fonts directly from your computer.

    Upload fonts 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.

    Install Google fonts

    Enlarge Images with Lightbox Popup

    Want to open your WordPress images in a lightbox popup?

    WordPress 6.4 will allow users to enable lightbox popups for images in their posts and pages.

    Expand on Click

    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.

    Image lightbox preview

    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.

    Command palette design update

    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 actions in 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.

    Disable auto-inserted blocks

    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.

    Setting background image for the Group block

    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.

    Consistent toolbar

    The Outline / List View Revamped

    The List view shows you a quick outline of your page or post layout in site/block editor.

    List view in WordPress 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.

    Rename a group block

    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.

    Image previews in List View

    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.

    Creating new pattern in WordPress 6.4

    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.

    Patterns organized in categories

    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.

    Open in new tab - WordPress 6.3

    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.

    Open in new tab in WordPress 6.4

    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.

    The post What’s Coming in WordPress 6.4 (Features and Screenshots) first appeared on WPBeginner.

  • What’s the Difference Between Padding and Margin in WordPress?

    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.

    Difference between padding and margin 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.

    Padding preview

    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.

    Margin preview

    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.
    Padding can create a buffer around a block. 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.

    Choose the page where you want to add padding from the left column

    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.

    Click the Edit icon for 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.

    Choose the padding option from the Dimensions section

    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.

    Padding in full site editor

    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.

    Padding for different corners

    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.

    Choose page for margin from the left column

    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.

    Click the Edit icon for 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.

    Add margin in the full site editor

    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.

    Use margin slider

    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.

    Add patterns to your layouts

    You can also use the FSE to add a header, navigation menu, or custom CSS to your website.

    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.

    Choose a background color from the Color Picker

    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.

    For more details, you can see our tutorial on how to easily create a custom WordPress theme.

    Edit theme template

    We hope this article helped you learn the difference between padding and margin in WordPress. You may also be interested in our beginner’s guide on how to change block height and width in WordPress and our top picks for the best Gutenberg blocks plugins for WordPress.

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

    The post What’s the Difference Between Padding and Margin in WordPress? first appeared on WPBeginner.

  • How to Add Affiliate Disclosure for Each Blog Post Automatically

    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.

    How to add affiliate disclosure for each blog post automatically

    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.

    The WPBeginner affiliate disclaimer page

    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.

    An example affiliate disclaimer on a blog

    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 is one of the best affiliate marketing plugins that can automate all your affiliate activities, including adding a disclosure.

    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.

    An affiliate disclaimer, created using Pretty Links

    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.’

    Activating the Pretty Links WordPress plugin

    You can find this information under your account on the Pretty Links website. After typing in this information, click on the ‘Activate’ button.

    With that done, you’ll need to go to Pretty Links » Add New and then add the first link you want to manage using the Pretty Links plugin.

    For detailed step-by-step instructions, please see our guide on how to cloak affiliate links on your WordPress site.

    How to cloak an affiliate link in WordPress with Pretty Links

    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.

    Adding keywords to the Pretty Links affiliate linking plugin

    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.

    An example affiliate disclaimer

    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.

    Pretty Links' auto-linking and replacement settings

    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.

    Pretty Links Disclosure Notice

    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.

    WPBeginner Disclosure Notice

    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.

    Changing where an affiliate disclaimer appears on your WordPress website

    Once you’ve done that, just scroll to the bottom of the page.

    Then, click on the ‘Update’ button.

    Saving your Pretty Links settings

    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.

    A custom shortcode created with WPCode

    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.

    The first thing you need to do is install and activate the free WPCode plugin on your website. For more details, see our step-by-step guide on how to install a WordPress plugin.

    Upon activation, go to Code Snippets » Add Snippet.

    Adding a custom code snippet to WordPress

    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.

    Adding custom snippets to WordPress

    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.

    Adding a title to a WPCode custom code snippet

    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.

    Auto-inserting custom code snippets in WordPress

    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.’

    Saving your WPCode 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.’

    Updating a custom code snippet in WordPress

    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.’

    Adding an HTML snippet to WordPress

    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.’

    Automatically inserting an affiliate disclaimer

    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.

    Method 3. Add Affiliate Disclosure Using Full-Site Editor (Block-Enabled Themes Only)

    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.

    Opening the WordPress full-site editor (FSE)

    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.

    Adding an affiliate disclosure using the full-site editor (FSE)

    The editor will now show all the layouts that make up your WordPress theme.

    Simply click go ahead and click on ‘Single.’

    Adding an affiliate disclaimer to a WordPress blog post template

    WordPress will now show a preview of the template.

    To edit this template, go ahead and click on the small pencil icon.

    Editing a blog post template in a block-enabled WordPress theme

    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. 

    Adding a Paragraph block to a full-site template

    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. 

    Adding text to a WordPress blog template

    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.

    Styling affiliate disclaimers using the WordPress FSE block-based editor

    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.

    An example of an affiliate disclaimer, created using the FSE

    Now, if you visit any blog post on your affiliate website, you’ll see the disclaimer in action. 

    We hope this article helped you learn how to add affiliate disclosures for each blog post automatically. You can also go through our guide on the best giveaway and contest plugins and how to create an email newsletter the RIGHT way.

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

    The post How to Add Affiliate Disclosure for Each Blog Post Automatically first appeared on WPBeginner.

  • How to Embed TikTok Videos in WordPress (3 Easy Methods)

    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.

    How to 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.

    An example of a TikTok video, embedded in a 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.

    Adding a TikTok video to a page or post using the WordPress block editor

    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.

    Embedding TikTok videos on a WordPress blog or website

    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.

    Resizing a TikTok video on mobile devices including smartphones and tablets

    If you do disable this setting, then it’s a good idea to test the mobile version of your WordPress site from the desktop, to check you’re happy with the visitor experience.

    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.’

    Adding the WordPress TikTok block to a page or post

    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.’

    The TikTok WordPress block

    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.

    Adding widgets to a sidebar or similar section

    Simply find the area where you want to embed the TikTok video.

    Then, click on the ‘+’ icon.

    Adding a block to a widget-ready area in your WordPress theme

    In the popup that appears, type in ‘TikTok.’

    When the right block shows up, click to add it to the widget-ready area.

    Embedding TikToks in a WordPress website or blog

    You can now paste the URL of the TikTok video you want to embed.

    With that done, click on the ‘Embed’ button.

    How to embed TikTok videos in WordPress

    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.

    Making a TikTok video live on your website

    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.

    Opening the WordPress full-size editor (FSE)

    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.’

    Editing template parts using the full-size editor (FSE)

    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.

    Customizing the archive template using the WordPress block-based FSE editor

    WordPress will now show a preview of the template.

    To go ahead and edit the layout, click on the small pencil icon.

    Editing a block-based template using the full-site editor (FSE)

    With that done, click on the ‘+’ button towards the top left of the screen.

    In the search bar that appears, type in ‘TikTok.’

    Adding a TikTok block to a WordPress site template

    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.

    Adding a TikTok video to any part of your website or blog

    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.

    An example of an embedded TikTok feed, on a WordPress website

    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.’

    Connecting TikTok to your WordPress website or blog

    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.

    How to connect your TikTok social media account to WordPress

    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.

    Adding a TikTok feed to your WordPress website or blog

    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.

    Connecting a social media account to your WordPress website

    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.

    Showing TikTok videos in an organized layout

    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.’

    Creating a live TikTok feed for your website or blog

    QuadLayers will now create a shortcode that adds the feed to your website.

    Simply go ahead and copy the value in the ‘Shortcode’ column.

    Adding a TikTok feed to your website using shortcode

    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.

    An example of a TikTok feed, embedded on a WordPress website

    We hope this article helped you learn how to embed TikTok videos in WordPress. You may also want to check out our guide on how to embed a Facebook video in WordPress, or see our expert pick of the best social media plugins.

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

    The post How to Embed TikTok Videos in WordPress (3 Easy Methods) first appeared on WPBeginner.

  • How to Use Shortcodes in Your WordPress Themes

    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.

    How to use shortcodes in your WordPress themes

    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.

    An example of a WordPress shortcode, provided by WPForms

    Most of the time, you will add shortcodes inside content areas like posts and pages.

    To learn more, please see our complete guide on how to add a shortcode in WordPress.

    Adding a shortcode block to a WordPress page or post

    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.

    Opening the WordPress full-site editor

    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’.

    Adding a shortcode to a WordPress template

    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.

    Adding a shortcode to a WordPress theme using a full-site editor (FSE)

    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.

    Editing a WordPress theme's 404 template using the full-site editor (FSE)

    With that done, click on the blue ‘+’ icon in the top left corner.

    In the search bar, you need to type in ‘Shortcode’.

    Adding a shortcode block to a WordPress theme

    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.

    Adding Shortcode blocks to a WordPress theme

    After that, go ahead and click on the ‘Save’ button.

    Now, simply visit your WordPress blog to see the shortcode in action.

    An example of a shortcode, on a 404 page template

    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 haven’t added code to your site before, then check out our step-by-step guide on how to copy and paste code in WordPress.

    You can modify the individual theme files directly, but this makes it difficult to update your WordPress theme without losing customization. For this reason, we recommend overriding the theme files by creating a child 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.

    For more information, please see our guide on how to easily add custom code.

    Here’s an example of the code you will add to your WordPress theme files:

    echo do_shortcode('[gallery]');
    

    Simply replace ‘gallery’ with the shortcode you want to use.

    If you are not sure where to add the shortcode, then please see our beginner’s guide to the WordPress template hierarchy.

    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.

    How to instal and activate a WordPress plugin

    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.

    SeedProd's advanced theme builder feature

    For step-by-step instructions, please see our guide on how to create a custom WordPress theme (without any code).

    After creating a theme, you can add shortcodes to any part of your WordPress website by going to SeedProd » Theme Builder.

    Custom WordPress theme templates

    Here, find the template where you want to use a shortcode.

    Then, just hover your mouse over that template and click on ‘Edit Design’ when it appears.

    Creating a custom theme using SeedProd

    This will open the template in SeedProd’s drag and drop page builder.

    In the left-hand menu, scroll to the ‘Advanced’ section. Here, find the Shortcode block and drag it onto your layout.

    Adding a Shortcode block to a theme using SeedProd

    In the live preview, simply click to select the Shortcode block.

    You can now add your shortcode into the ‘Shortcode’ box.

    Adding a contact form to a WordPress theme using shortcode

    By default, SeedProd doesn’t show the shortcode output in the live preview.

    To see your shortcode in action, click on the ‘Show Shortcode Option’ toggle.

    Previewing the shortcode output in SeedProd

    After that, you may want to add some styling to the shortcode output by selecting the ‘Advanced’ tab.

    Here, you can change the spacing, add custom CSS, and even add CSS animation effects.

    Styling shortcode output using the SeedProd theme builder

    When you are happy with how the page looks, just click the ‘Save’ button.

    After that, select ‘Publish’ to make the shortcode live.

    Publishing a custom WordPress theme using SeedProd

    You can now visit your website to see the custom shortcode in action.

    We hope this tutorial helped you learn how to use shortcodes in your WordPress themes. You may also want to check out our guide on how to create a landing page in WordPress and our expert picks for the best social media plugins for WordPress.

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

    The post How to Use Shortcodes in Your WordPress Themes first appeared on WPBeginner.

  • WordPress Widgets vs Blocks – What’s the Difference? (Explained)

    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.

    Understanding the difference between WordPress widgets and blocks

    Here is a quick overview of the topics we’ll cover in this article.

    What are WordPress Widgets?

    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.

    Old widgets screen

    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.

    Block editor in WordPress

    There are also blocks to add design layout elements like covers, patterns, tables, columns, groups, and more.

    To learn more, see our complete WordPress block editor tutorial which shows how to use the default editor to create beautiful content layouts.

    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.

    Plugin blocks

    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.

    Block widget editor

    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.

    Site editor with no widgets screen

    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.

    Widget blocks

    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.

    Legacy widget 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.

    If you still need to use the old widgets, then you can disable block widgets in WordPress.

    The simple way would be to do it by using the free WPCode plugin which allows you to customize WordPress without adding dozens of plugins.

    It has a pre-made snippets that you can use to disable block widgets.

    Select the Disable Widget Blocks snippet from the WPCode library

    Alternatively, you can also use Classic Widgets plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

    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.

    We hope this article helped you understand the difference between WordPress widgets vs blocks. You may also want to see our pick of the best block plugins for WordPress or see our guide on the difference between the block editor vs page builders.

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

    The post WordPress Widgets vs Blocks – What’s the Difference? (Explained) first appeared on WPBeginner.