One place for hosting & domains

      Decoding

      Decoding WordPress: Creating a Multilingual Website


      As a website owner, accessibility should be one of your highest priorities. That’s because if a portion of your visitors can’t read your content, you’re likely missing out on an interested audience. By not making your site multilingual, your reach will be limited to visitors who are able to read your language.

      Fortunately, WordPress makes it easy to add multilingual features to your website. To do this, you can install a multilingual plugin or use translation software to add material in other languages. This way, you can offer multilingual content to users all over the world.

      In this post, we’ll explain what a multilingual website is and why you should consider creating one. Then, we’ll discuss how you can add multilingual features to your website. Let’s get started!

      An Introduction to Multilingual WordPress Websites

      Essentially, a multilingual website provides the same content in more than one language. This means, no matter how the original article is written, users can be redirected to their native language:

      Multilingual website

      Rather than only using a single language, you can add multilingual features to your website. Whether you use a multilingual plugin, Google Translate, or manual translations, you can start sharing your content worldwide.

      Multilingual Features in WordPress 6.0

      WordPress 6.0 brought many updated features, including extended Full Site Editing and site-wide blocks. However, the core software doesn’t come with multilingual functionality. Although WordPress itself doesn’t yet support out-of-the-box bilingual or multilingual features, many plugins enable you to easily translate your posts and pages.

      Fortunately, WordPress is consistently working on new features. Here is the development roadmap for WordPress’ multi-year Gutenberg Project:

      1. Easier Editing: Development of the Block Editor
      2. Customization: Full Site Editing, Block Patterns, Block Directory, and Block-based themes
      3. Collaboration: Multi-author collaboration
      4. Multi-lingual: Implementation of multilingual features

      Currently, we are in phase two of the Gutenberg Project. Therefore, if you want to build a multilingual website with just core WordPress software, you’ll have to wait for a while, as there is no current timetable on when the project will reach phase four.

      In the next few years, we should also see other Content Management Systems (CMS) become multilingual-ready. If you use a headless CMS, the future will likely bring support for multilingual content.

      Benefits of Creating a Multilingual Website

      No matter the type of content you produce, you can benefit from creating a multilingual website. Whether you run a business website or a small blog, translating your content can be an effective way to grow your audience.

      By translating your website, you can significantly increase your organic traffic. Although English is the most common language on the internet, it only makes up 25.9% of online users. That means, if you don’t translate your English content into another language, you could fail to reach a larger, global audience.

      Besides, creating a multilingual website can improve your Search Engine Optimization (SEO). If you’re trying to gain traction with English keywords, you may have noticed that these have a lot of competition. In other languages, the same keywords can be far less saturated.

      For example, the keyword ‘meal delivery’ has a high amount of searches and competition. With an expensive top-of-page bid, you may not want to use it:

      English keyword results

      However, using ‘entrega de comida’ can improve your results. By simply translating your keyword into Spanish, you can run a cost-effective ad campaign without competing with other websites:

      Spanish keyword results

      Additionally, offering content in a visitor’s native language can provide a better User Experience (UX). Instead of having to rely on Google Translate, users can immediately understand your website and find the information they’re looking for.

      This can also make your website more credible and trustworthy. When you can remove a communication barrier, users from all over the world may be more likely to trust what you’re saying.

      Types of Multilingual Plugins

      Since WordPress isn’t multilingual-ready out of the box, one effective option is to install a multilingual plugin. With these plugins, you can start publishing content in other languages. However, some multilingual plugins can offer more in-depth translations than others. Let’s look at a few different types.

      Comprehensive Multilingual Plugins

      The best multilingual plugins will enable you to translate every part of your website, from your written content to your themes and plugins. When you want to make your entire website multilingual, these plugins can be effective tools.

      One of the most popular multilingual plugins is TranslatePress. After installation, you can use its front-end editor to translate everything you can see on your website:

      TranslatePress plugin

      Additionally, by integrating TranslatePress with Google Translate or DeepL, you can set up automatic translation for all of your content. Please note that relying on a service that leverages machine translations will not work as well as having someone who can natively understand the language you are translating your content to.

      Fortunately, you can fix any mistakes that machine translations may make manually and see a live preview of these changes during the editing process.

      Polylang is another powerful multilingual plugin that enables you to translate your posts, pages, media, categories, and tags. You can even create translations any custom post types, widgets, navigation menus, and URLs:

      Polylang plugin

      Plus, Polylang can improve your multilingual SEO. By setting up HTML hreflang tags, SEO-friendly URLs, and open graph tags, Polylang can help you to start showing up in global search results.

      Both of these plugins are free to download. However, if you want to access advanced features and add-ons, you’ll likely need to purchase the premium versions.

      Automated Translation Plugins

      Alternatively, some multilingual plugins connect to automated translation services. This type of plugin can provide translations for certain parts of your website, but won’t be nearly as comprehensive.

      For example, Translate WordPress with GTranslate can make your website multilingual using Google Translate. With this plugin, you can add different languages in a widget, allowing users to easily switch to their native language:

      GTranslate plugin

      The free version of GTranslate includes statistical machine translations. With a premium version, you can access Google neural translations, which can be much more accurate. Also, the core software does not support manual revisions.

      If you’re a software developer, you may benefit from using Loco Translate. Unlike the other options on this list, Loco Translate enables you to update the language files in your theme or plugins:

      Loco Translate plugin

      Using the built-in translation editor, you can modify WordPress translation files directly in your admin dashboard. This will contain integrated automatic translation services to help you design a multilingual-ready theme or plugin.

      Get Content Delivered Straight to Your Inbox

      Subscribe to our blog and receive great content just like this delivered straight to your inbox.

      How to Create a Multilingual Website with WordPress (7 Methods)

      Translation can be the key to driving global traffic to your website. To help you get started, we’ve compiled a few different ways you can make your content multilingual.

      1. Choose a Multilingual Ready Theme

      Often, picking a theme can be an important first step in improving your website’s appearance and functionality. When you’re trying to make multilingual content, you can consider installing a translation-ready theme.

      In a translation-ready WordPress theme, the software will support translations into many languages. To achieve this, developers usually concentrate on a variety of factors including:

      • Internationalization (i18n): Theme development that focuses on easy translation.
      • Localization: The process of translating from the original language into a new language.
      • Right to Left (RTL) text: Supports languages that read from right to left, including Arabic, Aramaic, and Hebrew.

      It’s important to keep in mind that a translation-ready theme won’t automatically translate your content. It simply provides a solid infrastructure for your translated content.

      To find a multilingual theme, you can apply a filter in the WordPress Theme Directory. Here, click on Feature Filter and select the Translation Ready option:

      Translation Ready filter

      This will exclude any WordPress themes without multilingual support. After browsing these results, you can install and activate a translation-ready theme:

      Translation-ready WordPress themes

      One of the most powerful translation-ready themes is Divi. It integrates with many multilingual plugins and supports full translation of its front-end interface:

      Divi theme

      Plus, Divi’s localization covers everything from form fields to descriptions. Moreover, after you enable a right-to-left language, this theme will automatically turn on RTL mode.

      If you’re looking for a more affordable option, consider the Neve theme. Although it has a more minimalist design, it can adapt to almost any new language that you might need it to:

      Neve theme

      With Neve, every element of your theme can be translated, no matter which multilingual plugin you use. Like Divi, Neve is fully capable of using RTL text, so you’ll never have to worry about translations affecting your web design.

      2. Add a Language Switcher

      Once you find a translation-ready theme and a multilingual plugin, you can start translating your online content. To do this, you can create a language switcher. This is a dropdown menu or button that visitors can use to select a translated version of a page:

      Language switcher

      A language switcher can enable each visitor to your site to select their preferred language. This provides a quick, convenient way to translate your website without leaving the page.

      With TranslatePress, you can add a language switcher to your site in just a few steps. First, install and activate the plugin:

      Install TranslatePress

      Then, go to Settings > TranslatePress > General. In the All Languages section, there will be a default language set for your website. Here, select some alternate languages:

      Select languages

      Next, scroll down to the Language Switcher settings. With TranslatePress, you can display your language switcher with shortcodes, as a menu item, or with a floating language selection menu:

      Language Switcher settings

      For any option, you can customize the appearance of the language switcher. Using the dropdown menu, you can choose to display the language names, flags, or both:

      Language switcher display

      When you’re finished, save your changes. One way to add this feature to a page is with its shortcode. On any page or post, simply add a shortcode block:

      Language switcher shortcode

      To display the language switcher, paste this shortcode: ‘[language-switcher]’. On the front end you’ll be able to see your list of available languages:

      Front-end language switcher

      Now any visitor can easily read your website in their preferred language simply by selecting it!

      3. Enable Automatic Translation

      Another simple way to create a multilingual website is to set up automatic translation. This will translate every word of your content from one language into another. Although this may provide some awkward phrasing, it can be a quick and easy way to translate your website.

      If you decide this option is right for you, you can use the TranslatePress plugin. It provides automatic translation using either Google Translate v2 or DeepL. However, the free version will only support Google Translate.

      After you activate the plugin, navigate to Settings > TranslatePress and make sure to set your desired languages. Then, click on the Automatic Translation tab:

      Enable Automatic Translation

      At the top of the page, select Yes next to Enable Automatic Translation. Then, choose the translation engine you want to use.

      To continue setting up either Google Translate or DeepL, you’ll need to use an API key. For Google Translate, sign into your Google Cloud Console and create a project. Next, go to APIs & Services:

      APIs & Services

      At the top of the page, click on Enable APIs and Services. Search for the Cloud Translation API and enable it:

      Cloud Translation API

      Find the Credentials page and select Create Credentials. Then, click on API key:

      API key

      This will generate an API key for Google Translate:

      API key

      Now you can go back to your WordPress dashboard and paste your API key into the Automatic Translation settings. If it’s working properly, you should see a green checkmark:

      Paste API key

      When you select the Translate Site button at the top of your dashboard, this will open the visual translation editor. Here, you can select the new language and you’ll see the automatic translation on the right:

      TranslatePress editor

      If you notice anything wrong with your translation, you can also make manual edits. This can ensure that native speakers understand your content.

      4. Edit Your Site’s Translations

      If you enable automatic translation, the result might not be perfect. Since it translates on a word-by-word basis, it can sound strange to native speakers. To solve this problem, you can manually edit your translations.

      In the visual translation editor, you can click on the pen icon to view text in multiple languages. It will show the original content, as well as the new translation:

      Manual translation

      If you speak the translated language, you can change any awkward wording using the text box on the left. To help you even further, TranslatePress can provide translation suggestions:

      Translation suggestions

      By clicking on these suggestions, you can automatically update the translation. Then, click on Save translation to implement this in the front-end editor.

      Now, when visitors switch your website into the secondary language, they’ll be able to see your new changes:

      Live translation

      These edits can improve the quality of your translations. This can help make your content more relatable and understandable, rather than sounding like a stiff, automatic translation.

      5. Change Your URLs

      Along with translating your web pages, you may want to modify your URLs for your translated content. Using the Polylang plugin, you can change the language code in your links to align with the new translation.

      First, be sure to install and activate Polylang. Using the setup wizard, select the languages you want to add to your website:

      Select Polylang languages

      Continue through the setup process and return to the dashboard. Then, go to Languages > Settings and find URL modifications:

      URL modifications

      Open this section and enable Hide URL language information for default language. If you have English as your default language, this will remove the ‘/en/’ from your URL:

      Hide URL language

      This will change all your links to a structure like this:

      English URL: https://dreamhost.com/about-us/

      Spanish URL: https://dreamhost.com/es/sobre-nosotros

      Once you’re finished, save your changes.

      6. Add Multilingual Content

      If you don’t want to install a new plugin, there are other simple ways to include translations on your website. For instance, you can feature two different translations on the same post. Then, you can create an anchor link so readers can easily jump to the translated content.

      To do this, you’ll need to create a new post. You can start by writing the content in your native language:

      New English post

      Next, you’ll need to open a translator like Google Translate. After you choose which language to translate to, you can paste your content:

      Google Translate

      Then, copy your translations and paste them beneath the original text. Be sure to translate all the elements on the page:

      Translated post

      Once you’re finished, click on the heading for the translated section. Open its Advanced settings and find the HTML anchor:

      HTML anchor

      Here, create a unique identifier and copy it. Next, at the top of the post, add the name of the second language:

      translation

      Click on the link button to add an internal jump. For the link text, include ‘#’ followed by your HTML anchor:

      Add translation link

      Now visitors can see that there is a translated version of that new post! Anyone who reads that language can click on the link, which will take them to the translation.

      Alternatively, you can include the translation as a completely new post. In this case, the link will redirect them to another page rather than a single page jump.

      If you decide to do this, you may want to create a new category for that language. This way, native speakers can find those posts all in one place.

      7. Create a WordPress Multisite

      Instead of creating multiple versions of your posts, you can create a WordPress multisite. Essentially, this can host different translated versions of your website on a single WordPress installation.

      However, this involves customizing your database by editing site files. Since this can harm your data, be sure to backup your website beforehand.

      Then, open your wp-config.php file. Right before the ‘/* That’s all stop editing! Happy blogging. */.’ line, add this code:

      /* Multisite */

      define( 'WP_ALLOW_MULTISITE', true );

      Now you can go to your WordPress dashboard. Find Tools > Network Setup:

      Create network

      You’ll need to choose between subdomains and subdirectories. Here’s how your URLs will look with each option:

      • Subdomain: site1.example.com
      • Subdirectory: example.com/site1

      Then, review your Network Details and click on Install.

      To enable the network, you’ll need to add some information to your wp-config.php and .htaccess files. After you paste the given code, log back into your dashboard:

      Enable network

      You should now see new icons for managing your network. When you click on My Sites, you’ll be able to create a new translated website:

      Network sites

      With this method, you can add new child sites for virtually any language!

      Go Global with a Multilingual WordPress Site

      Ultimately, having a multilingual site can improve your SEO and boost your organic traffic. When you provide well-translated content, you can expand your audience to multiple countries. Furthermore, since English keywords have a high level of competition, this may be the best time to go multilingual.

      To do this, you can simply install a multilingual plugin. With TranslatePress, you can enable automatic translation, add a language switcher, and manually edit translations. Alternatively, you can use a service like Google Translate to create multilingual content.

      If you decide to build a translated version of your website, you’ll want to make sure it’s fast and secure. With a DreamPress hosting plan, you can create a high-performing WordPress website that isn’t a hassle to manage!

      Do More with DreamPress

      DreamPress Plus and Pro users get access to Jetpack Professional (and 200+ premium themes) at no added cost!

      Managed WordPress Hosting - DreamPress



      Source link

      Decoding WordPress: Block Patterns


      When WordPress released WordPress 5.5, “Eckstine,” on August 11, 2020, many of the refinements focused on three major areas: speed, search, and security. The release also offered new features for the Gutenberg Block Editor, and perhaps none were more exciting and creatively promising than block patterns.

      In this blog post, we’ll look at what block patterns are (and refresh your memory of block basics), their benefits, and how they’ve evolved — particularly as it relates to the releases of WordPress 5.9, which introduced Full Site Editing, and WordPress 6.0, which introduced the Block Editor among other features. We’ll also show you how you can start building and using custom block patterns now.

      Even if you’re not a pro WordPress developer and you’re just starting to learn how to work with WordPress, creating and using block patterns is well within your reach!

      Let’s roll!

      What Is a WordPress Block Pattern?

      A WordPress block pattern is a pre-made, ready-to-use layout made of WordPress blocks in a certain layout or design. This grouping of WordPress blocks gives users more design flexibility and allows them to create complex yet attractive and professional layouts by only clicking a few buttons.

      WordPress Block Patterns hero section

      Once a block pattern has been selected (see above), it gets inserted into WordPress site pages and posts. It can then be edited and modified, which includes the ability to easily customize individual components within the block pattern such as color options, images, media, and other content. All the blocks work just like regular Gutenberg blocks.

      A block pattern can be reused countless times on your site, much like a template, eliminating the need to manually create page layouts one block at a time. You can even insert multiple copies of a single pattern onto a post or page, increasing the volume and diversity of your design options as you build your site.

      The Basics of WordPress Blocks

      Now we know what WordPress block patterns are, but what are the WordPress blocks that they’re made of?

      Blocks have been a fundamental aspect of WordPress since late 2018. Version 5.0 of WordPress replaced the classic editor with a new WordPress block editor called Gutenberg.

      A block is a specific element that you can add to your site. For instance, there are blocks for images, headings, lists, paragraphs, and more. This system provides users with a simple and intuitive way to create a unique website.

      WordPress Quote Block

      Each block comes with a set of customization options, such as alignment, color, and size. Additionally, blocks can be moved around via a drag-and-drop editor, facilitating a simpler page-building process.

      Block Patterns: What’s in Them For You?

      As we mentioned earlier, a WordPress block pattern — which resembles a quilt layout — can be modified by customizing its individual blocks, and it can be reused like a template.

      WordPress Block Patterns hero section

      Let’s look now at the key benefits that come with using block patterns on your site.

      • Create your own block patterns. Creating your own custom block patterns allows you to give anyone who works on your site control over content without sacrificing control over layout and design.
      • Use pre-made patterns created by professional designers. Block patterns created by professional designers can also be modified and used. This brings a wider variety of options when creating a post or page.
      • Save patterns that you use often. When you create or select block patterns and save them, you enable a consistent design and presentation on your site.
      • Save time. Using pre-made block patterns created by either yourself or other designers when developing your WordPress site, you save time and increase productivity.
      • Flexibility and customizability. Prebuilt block patterns aren’t “chiseled in stone.” Their look can be modified and tailored to your specific design and functionality needs. Find a block pattern in the pattern directory that appeals to you and change it however your creativity guides you.
      • Avoiding frustration through theme-independence. One of many benefits of custom-built block patterns is that they’re not bound to any one particular theme. If you change your WordPress site’s theme at a later time, your patterns won’t change as a result.
      • Flexible page and post layouts. Designing your WordPress site using blocks and block patterns means that your site’s content will be properly optimized when you view it on different devices like smartphones or tablets.

      WordPress Block Pattern Library

      A New Chip Off the Old Blocks: Evolution of Block Patterns

      Ever since their introduction in the August 11, 2020, release of WordPress 5.5 “Eckstine,” block patterns have evolved through subsequent releases to become even more user-friendly and functional.

      In WordPress 5.9, ready-to-go block patterns could be copied and pasted directly into the Full Site Editor.

      Over the long term, this also means that the nature of block themes may change. They’ll likely become broader, more feature-focused, and visually non-specific (providing more of a “blank slate” to work with).

      In WordPress 6.0, block patterns were improved even further in several ways.

      • Block patterns were easier to find in template editing because the quick inserter would only display block patterns when they were accessed at the top level of a template. This would be the case, for example, when a block you intend to add is a direct descendant of the document.
      • Theme developers could add recommended patterns to the theme.json.
      • Implicit pattern registration meant that themes could implicitly register patterns by categorizing them as PHP files under a new /patterns directory at the root of the theme.

      The Building Blocks of Patterns: Creating Custom Block Patterns

      So far, we’ve learned what WordPress block patterns — and blocks — are, why they can be useful to you, and how they’ve evolved over time. But how do you create and use custom block patterns so that your site fully embodies your aesthetic preferences, the functionality, and the purposes that you’re pursuing?

      Here’s how to create block patterns in Gutenberg in five easy steps!

      Step 1: Create a Draft Post in Gutenberg

      To build a custom block pattern, start by creating a draft post or page in your WordPress dashboard. A draft is recommended because it won’t have any existing or new content like text, images, and other content cluttering it, and it’ll be easier for you to work with in designing the block pattern.

      In this step, you’ll add blocks for paragraphs and text, columns, images and galleries, video and audio media, separators, and other content.

      Once you’ve added your blocks, you can now style them with color palettes, fonts, and more.

      Step 2: Select and Copy Blocks

      Once your blocks are created and styled how you want them to appear, you need to get their source code. Fear not! Getting the code is easier than it seems!

      Here’s how. Manually select all of the blocks that you want in your block patterns. To do so, click the first block, press and hold the ALT key on your keyboard, then click the last block you want to appear in the pattern.

      Lastly, click the “More Options” button (three vertical dots) at the top of your editor. Then click “Copy.” This step copies all of the source code from every one of your selected blocks.

      WordPress copy Block

      Step 3: Format Block Pattern for Your Theme’s functions.php File

      Once you’ve copied your blocks’ source code in the previous step, you’ll need to format (encode) your chosen theme’s functions.php file with it. This is a very important step that’s done in a JSON Encoder. This causes the HTML output to be escaped and allows it to work with the Block Pattern API.

      Access the Encoder and paste your HTML code into the “Enter the String” box, then click the Escape button.

      Next, copy the Result String code that populates in the second box.

      FreeFormatter.com

      Step 4: Register Your Custom Block Pattern

      Now you’ll register your block pattern with the WordPress platform. With the Block Pattern API, you have two choices where your custom block pattern can be registered:

      • Custom plug-in: Allows you to use the pattern even if you change your theme later.
      • Your theme’s functions.php file: This option may also be recommended if you’re building numerous block patterns and don’t want a lot of additional plugins installed. Do note that using functions.php will tie your block pattern to the theme you’re using and may cause issues should you decide to switch themes in the future.

      To register your Gutenberg block pattern in your chosen theme’s functions.php file, go to your WordPress dashboard, click on Tools → Theme File Editor, and paste the Result String HTML source code that you got in Step 3. Click “Update File.” Then, you can go to “Theme Functions” and find the theme PHP file.

      Editing the WordPress functions.php file

      Step 5: Insert Your New Custom WordPress Block Pattern

      Finally, on the Gutenberg page, search for a new pattern. Look for “Uncategorized” by clicking on the “Pattern” tab. Your new Gutenberg block pattern will be stored successfully.

      The last step is to click on the new WordPress block pattern and insert it into your Gutenberg editor.

      Using Custom WordPress Block Patterns

      Now it’s time to get creative by using your custom WordPress block patterns in the design of your site! And it’s super-easy.

      When you’re ready to apply your custom block pattern from the Pattern Directory, click it once, and it’s then inserted into your page at the location of your cursor on the page.

      Once you’ve inserted your pattern, you can change the content at will. To do this, click on any block to add or edit content, including text and images, within that block.

      Something to keep in mind about images: images provided within block patterns and page layouts created by other designers are typically referenced from external sources and aren’t added to your site’s media library, so it’s possible for them to change or be removed at a future point. If you’re using a block pattern that contains images you like, this can be disconcerting when they suddenly change or disappear.

      Therefore, it’s advisable to always use your own images, photos, and graphics. If you’re a graphic designer and/or photographer, you can use content you’ve created. You can also source content in WordPress from a library of over 40,000 copyright-free — and free to use — photos that are provided by Pexels.

      Still Not Convinced?

      Even though we have total confidence in your ability to develop your WordPress site and to build and use your own custom block patterns, we get that you still might not be convinced that you can do it on your own.

      If you’re lacking that confidence and feel like you need help, we’re here to save your day. Our DreamPress managed WordPress hosting service offers hassle-free, high-performance WordPress. It includes unrivaled DreamHost features like: extreme speed with built-in caching; powerful tools like email, staging, and backups; free WordPress migration; and 24/7 expert WordPress support.

      You can choose from DreamPress, DreamPress Plus, and DreamPress Pro. To get started, simply click the link below.

      Do More with DreamPress

      DreamPress Plus and Pro users get access to Jetpack Professional (and 200+ premium themes) at no added cost!

      Managed WordPress Hosting - DreamPress



      Source link

      Decoding WordPress: New Site Blocks in 5.9


      WordPress has always been a user-friendly platform that is flexible and easy to learn. However, those without coding skills may struggle to perform certain customization tasks.

      Fortunately, Version 5.9 introduced Full-Site Editing, which brings together both new and existing features to provide centralized control of your entire site. One of the most significant changes is the addition of new site level blocks.

      In this post, we’ll discuss everything you need to know about site blocks in WordPress. We’ll also look at some examples and show you how to use them. Let’s get started!

      An Introduction to WordPress Blocks

      Blocks have been a fundamental aspect of WordPress since late 2018. Version 5.0 of WordPress replaced the classic editor with a new WordPress block editor called Gutenberg.

      A block is a specific element that you can add to your site. For instance, there are blocks for images, headings, lists, paragraphs, and more. This system provides users with a simple and intuitive way to create a unique website.

      Each block comes with a set of customization options, such as alignment, color, and size. Additionally, blocks can be moved around on via a drag-and-drop editor, facilitating a simpler page-building process.

      Common WordPress Blocks

      Gutenberg introduced blocks for various purposes. There may be some blocks that you will never touch. However, there are others you’ll probably use every time you create a post. Let’s take a look at some of the most common options in the new block editor.

      The Heading Block

      The Heading block provides several choices for configuring and styling headings:

      WordPress Heading Block

      This block can help you organize your content more efficiently. For instance, you can select the heading level H2 for main sections, and H3-H6 for subsections. Additionally, you can add a hyperlink to the heading.

      The Paragraph Block

      Paragraphs are the most frequently-used block in the Gutenberg editor:

      WordPress Paragraph Block

      This element enables users to write text and customize the typography. Usually, headings are used to group relevant paragraphs together and split up the page’s content.

      The Image Block

      Image blocks enable you to upload photos or artwork to your site:

      WordPress Image Block

      You can then use the settings to resize and crop your images. You can also add captions and alt text.

      The Video Block

      You can also add videos to your post. There are different options for displaying videos:

      WordPress Video Block

      For instance, you can upload them to your site’s Media Library, or embed them from YouTube and other video-sharing platforms. You can also add text tracks such as subtitles, captions, chapters, and descriptions to the block.

      The List Block

      The List block enables you to insert bulleted or numbered lists into your page:

      WordPress List Block

      This block comes with styling options such as bold and italics, as well as more intricate rich-text controls. Additionally, you can add hyperlinks to list items.

      Skip the line and get tips right in your inbox

      Click below to sign up for more how-to’s and tutorials just like this one, delivered to your inbox.

      marketing tips

      New Site Blocks in WordPress 5.9

      Now that Full-Site Editing is here, individual blocks can also be used for editing your site’s theme. You can use the new editor to customize all aspects of your site:

      WordPress Full Site Editing - edit template

      This feature has replaced the Customizer. However, it only supports block-based themes, such as Twenty Twenty-Two. If you’re using a ‘standard’ theme, you’ll still have access to the Customizer (and the Gutenberg block editor), but you won’t be able to use the Full-Site Editor.

      The Full-Site Editor comes with templates for different pages, such as your archive or home page. Additionally, you can customize more areas of your site, such as your header and footer. There is also a new Global Styles feature, which enables you to define site-wide settings for your blocks.

      In addition, the Full-Site Editor has introduced a range of ‘theme blocks’. Often nicknamed ‘site blocks’, these new additions enable you to use and edit global elements such as the site logo and tagline, navigation, and post lists.

      The Benefits of Using Theme Blocks

      The new theme blocks were introduced to make the web design process in WordPress simpler and more streamlined. Previously, the WordPress theme editor had limited customization options, and users who wanted unique designs often needed to use custom code.

      Theme blocks remove the need for coding (and third-party page builder plugins) in most cases. Each block has a variety of styling and display options, offering users the flexibility to create almost any layout and design. Whether you’re a WordPress beginner or an experienced web developer, the process of creating custom sites is now faster and easier.

      Let’s take a look at some notable site blocks that have been added with WordPress 5.9. This is just a brief introduction – we’ll delve more deeply into each of these Gutenberg blocks shortly.

      Navigation

      This feature enables you to add your site’s navigation menu to a page:

      WordPress Navigation Block

      You can customize both the design and structure of your menu. For instance, you can add submenu items, change the color and alignment, and more.

      Query Loop

      A query loop is a block that displays a set of posts based on specific conditions and parameters:

      WordPress Query Loop Block

      This is a great way to showcase posts on a particular topic. You can filter content by post categories, tags, authors, and keywords. The block also comes with different styling options for the post feed.

      Template Part

      Template parts are used to organize the structure of a site. They’re essentially collections or containers of other content blocks:

      WordPress Template Part Block

      They can only be used when editing templates, so you’ll find this block in the Full-Site Editor. Each template part has a user-generated name. When adding a block, you can choose an existing template or create a new one.

      How to Use Common WordPress Site Blocks (6 New Theme Blocks)

      Now, let’s take a detailed look at a few common theme blocks. For each of the new blocks, we’ll discuss its purpose and the steps for using it.

      1. Navigation

      Navigation blocks are used for editing your site’s menus. When you add this block to your page, you are given three options: select an existing menu, add all of the site’s pages, or start with an empty menu:

      WordPress Navigation Block

      You can include additional menu items as well as indented items, which appear as subpages. Moreover, you can change the links and names of each item using the “anchor” icon in the toolbar. The toolbar also enables you to change the alignment and other layout settings.

      2. Login/out

      The login/out block provides a simple way to add a login and logout button to your website:

      WordPress Login/Out Block

      It automatically displays the correct link depending on the status of the user. You also have the option to display the login/out button as a switch.

      3. Template Part 

      This element can be thought of as a group of blocks. The template part helps you organize the structure of your page. These blocks can only be used when editing templates, and they’re an excellent way to manage global areas such as headers and footers:

      WordPress Header Block

      Template parts can be added in the site editor. Upon selecting the block, you’ll be asked if you want to add an existing template or create a new one.

      If you opt for the latter, you’ll be prompted to enter a name for the template. Then, you can go ahead and add in blocks to create the desired layout.

      4. Site Title

      As the name suggests, this block is used to display the title of your site:

      WordPress Site Title Block

      By default, the title links to the home page, but this can be turned off with a toggle switch in the settings. There’s also a range of styling options, including text and background colors, font size, line height, letter spacing, and other typography settings.

      5. Post Excerpt

      Post excerpts give readers a sneak peek into a post, and can help them decide whether or not they wish to read the entire article:

      WordPress Post Excerpt Block

      Most of the time, this block will be a child element of a query loop. It displays either the first 55 words of a post, or the set excerpt for that post. You can also add a “read more” link. This will take the user directly to the full post.

      6. Query Loop

      Query loops can be used to display a set of posts based on specific conditions and parameters. For example, you may use this block to show all posts in a particular category or by a specific author:

      WordPress Query Loop Block

      Query loops are made up of multiple blocks, including post titles, dates, excerpts, and featured images. You have the option to start blank and add nested blocks manually, or start with a premade layout and edit from there.

      You can then alter the width, alignment, arrangement, and colors. You can also change the number of posts that the query loop displays.

      Conclusion

      In the past, customizing WordPress sites may have been challenging for some users. However, with the release of new site blocks in version 5.9, the process has become a lot easier.

      Thanks to the Full-Site Editing feature, you can now make changes to your entire site from a unified interface. You can also customize individual elements such as the site title and tagline, navigation menu, and template parts like headers and footers.

      If you’re looking for a fast, reliable, and affordable place to host your WordPress site, we’ve got you covered. Check out our DreamHost WordPress Hosting plans!

      Power Your Website with DreamHost

      We make sure your website is fast, secure and always up so your visitors trust you. Plans start at $1.99/mo.

      shared hosting



      Source link