Posted on

How to Point a Domain to WPMU DEV Hosting

Pointing domains… nameservers… figuring out DNS… it can all feel daunting! Fortunately, WPMU DEV makes it easy, whether you’re working with a domain purchased from us or from another provider. We break it all down in this article.

Keep reading to learn how to easily connect your domain to our hosting service.

Here are the topics we’ll be covering:

Connecting Your Domain To WPMU DEV Hosting

With our new domain service recently rolled out, you can directly purchase domains and register them through WPMU DEV – in which case we automatically do the DNS hookup (i.e., the pointing part) for you.

If you purchased your domain through another DNS provider and are hosting with us, the tutorial below will show you exactly what you need to do and explain why this is also a great choice.

Prepping for a Change in Domain Nameservers

Nameservers are often referred to as the phone book of the internet, sending you to the correct domain when you type in a web address.

There are two primary components to making your website accessible to the public:

  1. Your domain name (purchased from a registrar)
  2. Nameservers (provided through a host)

The first must point to the second to connect the two.

The registrar you purchased your domain from also has its own nameservers (if it offers hosting), however if you want them managed elsewhere you must change the DNS records.

Doing it all from a single location is ideal, as it cuts out the middle agent and puts the same quality that powers your sites behind your DNS.

DNS propagation is the term for your site’s nameservers and other records (e.g., A, AAAA, CNAME, MX, etc) updating across the web. This process can take anywhere from a few minutes to a couple days to finalize.

If your site was already live, it might become briefly inaccessible to visitors during the nameserver change. You could create a temporary page with info regarding the approximate downtime, then publish it just prior to the server change. (Remember to change it back once the process is complete).

It’s also helpful to handle nameserver changes during a period when traffic volume is typically on the low end.

Importing Your Domain Records to WPMU DEV

Alright, we’re ready to start our edits. The first thing we’re going to do is navigate to The Hub on WPMU DEV.

Click on Domains from the top menu bar, then Connected Domains from the submenu, then the Connect Existing Domain button.

connected domains - populated and unpopulated (wpmudev)
Connecting domains in WPMU DEV’s The Hub.

The Add New Domain modal will pop up. Here you will enter your domain name in the text field – making sure to include the extension (e.g. .com, .net, .xyz) – then click the blue button.

add domain (step 1)
Step 1 of 2 in WPMU DEV’s Add New Domain modal.

The Hub DNS Manager will run a scan for common DNS records, then automatically import and list them for your verification.

setup dns (step 2)
Verifying the scanned records to import into a WPMU DEV DNS configuration.

Here you’ll see the summary of record information, which will include:

  • Type – A, CNAME, MX, TXT
  • Hostname – @ for root; www for www. subdomain
  • Value – if record is an alias, directs, or returns
  • TTL (seconds) – Time To Live is how long the DNS query caches before expiring and needing a new one. (The lower this number, the better/faster.)

You can remove any records, if you want to exclude them from being imported, by clicking on the Trashcan icon.

You can also manually add any records that are missing. See Add or Edit DNS Records for details.

If you’re in any doubt as to whether records should be added or deleted, just reach out to support (any time, day or night) and they’ll happily walk you through it.

Once you’re satisfied with the populated DNS records, click the blue button once more.

After the ellipsis bounce, the page will load with the imported information specific to your domain.

WPMU DEV nameservers are listed towards the top of this page, where you’ll see there are three of them.

wpmudev nameservers
WPMU DEV’s trio of nameservers, ready to copy/paste into your domain registry records.

Keep your Hub page open, as we’ll be copying & pasting the nameservers in the next step. (Or, do what I do, and just copy the first one, then replace the “1” with “2” then “3” as you paste each, since these ordinal numbers are the only difference.)

Putting WPMU DEV Nameservers in Your Domain Registry Records

Now that we’ve imported your domain details into WPMU DEV, the next step is to overwrite the nameserver records of your registrars with ours.

There are a lot of registrars, so how your domain details are kept and displayed will vary, but they should all have the same key elements. We cover more than a dozen of the most popular ones here.

In the case of registrars that serve as hosts, what they permit when it comes to allowable changes in nameservers can vary. For example, pointing nameservers to another host is not permissible for a Wix-purchased domain. However, you can transfer your domain away from them (although it involves a different process).

Assuming your domain registrar allows for pointing nameservers away from them, or that you’ve taken any necessary prior steps in preparation, login to their website and locate the records for your domain.

namecheap nameservers (orig)
Changing nameservers through the Registrar; in this case, Namecheap.

Popping back over to the Hub, copy that first nameserver, then head back to your domain registrar details page, pasting it in the appropriate text field. Do this for all three nameservers, then save your input.

Depending on your registrar, you’ll probably get a confirmation message with time estimates on how long it will take the DNS hosting server to update.

It’s rare, but on the outside chance your domain registrar requires identifying our nameservers by IP address, you can find them here.

Double-Checking Your Changes

As with any significant edit, verifying everything is working as it should is an important last step.

Some registrars will send you an email notifying you that the propagation is complete. With others, you might need to revisit the site and continue checking.

Either way, we can verify things through The Hub. Let’s head there, and navigate to Domains > Connected Domains.

For the domain name in question, if you see the green check marked Propagated correctly under Nameservers Status – you’re good to go. If it says Pending, click on the vertical ellipsis icon to the right, and select Manage DNS from the dropdown.

onnected domains manage dns (wpmudev)
Managing DNS through WPMU DEV’s The Hub is effortless.

If everything was done properly and the process has completed, you’ll see a row of green highlighted text, confirming Your nameservers are propagated correctly. If that message isn’t displayed, click on the Check nameservers button.

check dns - nameservers propagating correctly (wpmudev)
Success! Nameservers have been propagated to WPMU DEV.

You’re all set! Your nameservers are successfully pointing to WPMU DEV as your acting DNS provider.

If you don’t get a confirmation or see an error message, check out our detailed documentation, or reach out to our always-on-call support team.

As an additional option, you can use this DNS propagation checker to verify the current IP address and DNS record information for your domain name(s).

The Benefits of Pointing Domains to WPMU DEV Nameservers

Nameservers are essential in directing internet traffic as they locate and translate hostnames into IP addresses.

If you host your own or your client sites with WPMU DEV, pointing your domains to our nameservers has definite advantages.

For starters, subpar nameservers will experience difficulties more often, and your visitors could get “DNS server not responding” messages. Quality nameservers, like ours, can limit or avoid that altogether.

Additionally, pointing your domains to our nameservers allows you to keep the settings with your current email client as is, eliminating the hassle of making a bunch of changes in that regard. (Just make sure existing MX records are imported during the DNS record setup.)

Finally, with the ability to purchase domains now directly through WPMU DEV, managing client sites becomes even more centralized, as your hosting provider and domain provider will be one in the same.

This gives you all of your domains in one place/one dashboard, with auto renewal, free protection, and a built-in grace period; priced incredibly low for Agency members.

Not a member yet? Give us a go, and see how much our hosting has to offer. If you’re not thrilled, we’ll refund you 100%; simply cancel within 30 days. Chances are good you’ll find our value and service are unmatched.

Posted on

How To Create an Effective Agile Software Development Plan?

No project is complete until it’s been thoroughly planned and executed in Agile style. If you’re new to agile software development, or simply want to improve your team’s agility skills, this guide is for you.

In this article, we’ll outline the basics of agile planning, discuss how agile teams interact with other departments, and agile team management, and provide tips on creating an effective agile software development plan.

Posted on

Protection Against Accidental Deletion of Kubernetes PVs and Namespaces

Accidental Kubernetes PVC delete or namespace delete can cause the Persistent Volume to get deleted. Such volumes lose their data, and the stateful applications lose their state. By using Persistent Volume TrashCan, users can get a grace period to undo such unintended delete operations.

This talk will showcase how to overcome one of the admin’s pain points involving accidental deletions of PVCs by using advanced storage management solutions in Kubernetes.

Posted on

How to Remove the Sidebar in WordPress

Do you want to remove the sidebar from your WordPress site?

The sidebar is a widget-ready area in your WordPress theme where you can show information that isn’t part of the main page content. However, sidebars can be distracting and take up valuable space.

In this article, we will show you how to easily remove the sidebar in WordPress.

How to remove the sidebar in WordPress

Why Remove the Sidebar in WordPress?

Most free and paid WordPress themes come with multiple sidebars or widget-ready areas.

You can use sidebars to show a list of your recent posts, adverts, email list signup forms, or any other content that isn’t part of the main page or post.

At WPBeginner, we use a sidebar to promote our social media pages and display our most popular posts.

An example of a WordPress sidebar

You can easily add items to a theme’s sidebar using WordPress widgets.

In most WordPress themes, the sidebar looks different depending on whether the visitor is seeing your site on a desktop or mobile device. Since smartphones and tablets have smaller screens, WordPress typically moves the sidebars to the bottom of the screen.

Depending on how your site is set up, this may look strange. Visitors will also need to scroll to the very bottom of the screen to see the sidebar content, which may affect the user experience and your conversion rates.

For more information, please see our guide on how to view the mobile version of WordPress sites from desktop.

Even on a desktop, there’s a chance that the sidebar may clash with your design or distract from the most important content, such as the page’s call to action.

With that being said, let’s see how you can remove the sidebar in WordPress. We’ll show you how to delete the sidebar from your entire site, and how to hide the sidebar on a specific page or post only.

Video Tutorial

If you don’t like the video or need more instructions, then continue reading. If you prefer to jump straight to a particular method, then you can use the links below.

Method 1. Removing Sidebars Using Your WordPress Theme Settings

Many of the best WordPress themes come with built-in settings to remove sidebars. Depending on your theme, you can remove them site-wide, or simply remove them from individual posts or pages.

The easiest way to check whether your theme has these settings is to launch the theme customizer. In your WordPress dashboard, go to Appearance » Customize.

Launching the WordPress Customizer

In the left-hand menu, look for a ‘Sidebar’ or similar setting.

In the following image, you can see the options for the popular Astra WordPress theme.

The theme settings for the Astra theme

If you do see a ‘Sidebar’ option, then click on it and then look for any settings that will remove the sidebar.

This might be a dropdown menu, thumbnails showing the different sidebar layouts, or some other setting.

Removing the sidebar using the WordPress Customizer

If your theme doesn’t have a ‘Sidebar’ option, then you may be able to remove the sidebar by selecting the ‘Page’ or similar section.

As you can see in the following image, Astra also has a ‘Page’ setting.

Changing the page layout in the WordPress customizer

Inside this setting, you’ll see different layouts including several that remove the sidebar such as ‘No sidebar’ and ‘Full Width / Stretched.’

Simply click on the different thumbnails to apply these layouts to your site.

Deleting the sidebar using the WordPress Customizer

No matter how you remove the sidebar, don’t forget to click on ‘Publish.’

Some WordPress themes also have settings that allow you to remove the sidebar from individual posts and pages. This can be useful when designing custom pages, such as a landing page.

To see whether your theme comes with these settings, simply edit any page or post where you want to hide the sidebar. In the right-hand menu, select either ‘Post’ or ‘Page’ and then look for a ‘Post Settings’ or ‘Page Settings’ option.

The page settings for the Hestia theme

If your theme has this section, then click to expand. You can now look for any settings that allow you to remove the sidebar.

In the following image, you can see the post settings for the popular ThemeIsle Hestia theme.

The Post Settings section

Keep in mind that some WordPress themes may not allow you to easily remove the sidebar using the customizer or page editor. If this is the case, then carry on reading and we’ll show you other ways to remove the sidebar in WordPress.

Method 2. Removing the Sidebar Using the Full Site Editor

If you’re using a block theme, then you can remove the sidebar using Full Site Editing (FSE) and the block editor.

This method is a quick and easy way to remove the sidebar across your entire site, although it won’t work with all themes.

To launch the editor, go to Appearance » Editor.

How to launch the FSE

You can now click to select the sidebar.

In the small toolbar that appears, click on the dotted icon.

Customize the sidebar using the full site editor

You can now delete the sidebar by clicking on the ‘Remove Column’ or similar setting.

Once you’ve done that, you can go ahead and click on the ‘Save’ button.

Removing the sidebar using the full site editor

Now, if you visit the front end of your WordPress website, you’ll see that the toolbar has disappeared.

Method 3. Removing the WordPress Sidebar Using Code

This method allows you to simply remove sidebars from every page and post on your WordPress site.

You will need to edit your theme files, so it’s not the most beginner-friendly option. However, this method should work for most WordPress themes, including themes that don’t have a built-in way to hide the sidebar.

Keep in mind that if you edit your WordPress theme files directly, then those changes will disappear when you update the theme.

With that being said, we recommend creating a child theme as this allows you to update your WordPress theme without losing customization.

First, you need to connect to your WordPress site using an FTP client such as FileZilla, or you can use the file manager of your WordPress hosting cPanel. Or if you’re a SiteGround user, your Site Tools dashboard.

If this is your first time using FTP, then you can see our complete guide on how to connect to your site using FTP. 

Once you’re connected, go to /wp-content/themes/ and open the folder for your current WordPress theme.

The FileZilla FTP client

WordPress themes are made up of different templates, so you will need to edit all the templates that include a sidebar. To work out what files you need to edit, see our guide to WordPress template hierarchy.

For example, you may need to edit index.php, page.php, single.php, archive.php, home.php, and so on.

To edit a file, open it in a text editor such as Notepad. Then, find the line that looks like this:

<pre class="wp-block-syntaxhighlighter-code">
<?php get_sidebar(); ?>
</pre>

If your theme has multiple sidebars, then the code will look slightly different and there may be multiple pieces of sidebar code. Typically, this code will have a sidebar name inside the function, for example:

<pre class="wp-block-syntaxhighlighter-code">
<?php get_sidebar('footer-widget-area'); ?>
</pre>

You can simply delete the line for the sidebar that you want to remove.

Now, save and upload the file back to your WordPress hosting account. Simply repeat the process described above for all the template files that include a sidebar.

When you’re finished, you can visit your WordPress blog to see the change in action.

You may notice that although the sidebars are gone, your content area is still the same width, which leaves the sidebar area empty.

An empty space where the sidebar should be

This happens when the theme has a defined width for the content area. After removing the sidebar, you need to adjust the width of the content area by adding custom CSS to your WordPress theme.

To do this, go to Theme » Customize. In the left-hand menu, click on Additional CSS.

Adding CSS with the WordPress customizer

You can now go ahead and paste the following code into the little code editor:

<pre class="wp-block-syntaxhighlighter-code">
.content-area {
    width: 100%;
    margin: 0px;
    border: 0px;
    padding: 0px;
}

.content-area .site {
margin:0px;
}
</pre>

Don’t forget to click on the ‘Publish’ button. Now, if you visit your site you’ll see that the content area now takes up 100% of the available space.

Method 4. Removing Sidebars From Individual Pages in WordPress

You may only want to remove the sidebar on certain pages while showing the sidebar on other areas of your site. For example, many websites don’t show the sidebar on their sales pages, as this can distract from the page’s call to action.

If you just want to remove the sidebar from a specific page, then we recommend using a page builder plugin like SeedProd.

SeedProd lets you design any kind of page using a simple drag-and-drop editor. This makes it easy to add and remove the sidebar from any page.

In the SeedProd editor, simply click to select the sidebar you want to remove. Then, go ahead and click on the trash can icon.

Removing a sidebar using SeedProd

If you want to remove the sidebar from your entire site, then you can also use SeedProd to easily create a custom theme that doesn’t have any sidebars.

Method 5. Removing Sidebars from a Static Page in WordPress

Some WordPress themes come with multiple templates, including full-width page templates that don’t show the sidebar on either side of the content. You can use these templates to remove the sidebar from any page.

To see whether your theme has a full-width template, simply open any page. In the right-hand menu, select the ‘Page’ tab and look for a ‘Template’ section.

Changing the WordPress page template

If you find this section, then click on it to see all the options available.

You can now open the dropdown menu and look for a full-width template.

How to remove the sidebar with a full width template

If your theme doesn’t have a full-width template, then you can create one manually.

Open a plain text editor like Notepad and paste the following code in a blank file:

<pre class="wp-block-syntaxhighlighter-code">
<?php
/*
*
Template Name: Full-Width
*/
get_header(); ?>
</pre>

You can now save this file with the name full-width.php.

After that, connect to your site using an FTP client or the file manager supplied by your WordPress hosting provider.

Then, go to /wp-content/themes/ and open the folder for your current theme. Inside this folder, find the page.php file and open it in any text editor.

The FileZilla FTP client

Now, copy everything that appears after the <?php get_header(); ?> line and paste it into your full-width.php file.

Once you’ve done that, find and delete the line that looks like this: 

<pre class="wp-block-syntaxhighlighter-code">
<?php get_sidebar(); ?>
</pre>

You can now save your changes and upload the full-width.php file to your theme folder.

You can now use this template with any page. Simply open the ‘Template’ dropdown in the right-hand menu and select your full-width template.

A full-width template

Note: If you have a page open in the content editor while creating the full-width.php file, you will have to refresh the editor for the new template to appear in the dropdown menu.

For more details, see our guide on how to create a full width page template in WordPress.

Method 6. Remove the Sidebar from a Single Post in WordPress

Just like pages, WordPress also comes with built-in support for post templates.

If you want to remove the sidebar from certain single posts, then you can create a custom single-post template. It is similar to creating a full-width page template.

First, you’ll need to create a new template file using a text editor like Notepad. Once you’ve done that, you can copy and paste the following code in that file:

<pre class="wp-block-syntaxhighlighter-code">
<?php
/*
 * Template Name: Featured Article
 * Template Post Type: post, page, product
 */

 get_header();  ?>
</pre>

This code creates a new template called ‘Featured Article’ and makes it available for any page or post, plus any product post types in your online store.

In your custom single post template, you simply need to remove the sidebar part of the code. For more information, you can follow the steps outlined in our guide on how to create custom single post templates in WordPress.

When you’re done, save this file as full-width.php.

Next, you need to upload the file to your current WordPress theme folder using an FTP client or file manager.

Once you’ve done that, you can apply this template to any post. In the right-hand menu, simply click to expand the ‘Templates’ section and then select the full-width template.

How to create a full-width template in WordPress

We hope this article helped you learn how to easily remove the sidebar in your WordPress theme. You may also want to see our step-by-step guide on how to boost WordPress speed and performance, and our comparison of the best email marketing services to grow your traffic & sales.

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 Remove the Sidebar in WordPress first appeared on WPBeginner.

Posted on

Apache Ranger and AWS EMR Automated Installation and Integration Series (1): Solutions Overview

System security usually includes two core topics: authentication and authorization. One solves the problem of “Who is s/he?” and the other solves the problem of “Does s/he have permission to perform an operation?” In the big data area, Apache Ranger is one of the most popular choices for authorization, it supports all mainstream big data components, including HDFS, Hive, HBase, and so on. As Amazon EMR rolls out native ranger (plugins) features, users can manage the authorization of EMRFS(S3), Spark, Hive, and Trino all together. For authentication, an organization usually has its own centralized authentication infrastructure, i.e., Windows AD or OpenLDAP; however, for most big data components, Kerberos is only supported authentication mechanism, so users usually need to integrate Windows AD/OpenLDAP and Kerberos together to unify authentication.

We will focus on how to implement automated installation and integration for Amazon EMR and Apache Ranger. This series is composed of four articles. Each article will introduce a completed solution against different technology stacks.

Posted on

React.JS: The Best Technology for Application Development

React.js is one of the most emerging front-end JavaScript technologies. Developers favor React.js as it ensures scalability, speed, and simplicity. It not only designs elegant user interfaces but also helps to create complex applications. 

React framework, design elastic and compound web applications with reusable user interface components. This library was designed in 2012 by Jordan Walke, a Facebook application engineer. Most JavaScript frameworks are not searched engine optimized, but this library is quite different in that context.

Posted on

What Is Agile Methodology In Software Development?

Agile enables teams to provide consumers more quickly and without as many problems through an iterative project management and software development approach.

An agile team produces work in manageable, small-scale increments rather than staking everything on a "big bang" launch. In addition, teams have a built-in mechanism for fast adjusting to change since requirements, plans, and results are regularly evaluated.

Posted on

392: Project Management Refresh

Dee and Chris chat about our latest take on Project Management (PM), a somewhat tricky topic for us with such a small team where literally everyone is an individual contributor (IC) with a lot on their shoulders aside from PM.

We’re attempting a project of large scale, so part of what has helped us so far is scoping the project into phases releases. That way work that we know is in a later release can be put off until we’re literally working on that release. Without at least that prioritization, things would take much longer. The releases are also chunked into sub-projects with a no-too-little and not-too-big quality, and within those projects is where the kan-baning happens. If we can keep the whole team on one project (or at least a group of 2-3), it limits the context switching which also helps speed and productivity.

We use Notion for most of this work, and it’s been nice to keep literally all of it (all the way up through all the phases) in one big database, then we scope the views down to phases and projects and cards. Each card we make sure has a very actionable tone to it and includes everything one might need to finish the task, including decisions, previous conversations, relevant other tickets, etc. Each card has things you might expect like who is working on it, the current status, whether it’s blocked or not, and several other useful bits of metadata. It also contains time estimates, so we can, at a glance, see how far we’ve come and what’s left on any given project. We know things like time estimates can change quite a bit, but everyone is well aware of that and isn’t beholden to the numbers. It just gives us some idea of what is going on other than feeling like we’re entirely driving blind. Each week we take a look at the progress together as a team.

Time Jumps

  • 00:21 API follow up
  • 02:10 The topic: Project Management
  • 04:05 Why we need to manage our project(s)
  • 05:06 What did we do with Notion?
  • 11:03 Beta means database is safe
  • 11:55 How do we organize around projects?
  • 15:54 Sponsor: Split
  • 16:41 Alpha vs beta vs final
  • 22:43 What are the fields inside Notion we’re using?
  • 32:21 Connecting to GitHub as well

Sponsor: Split

This podcast is powered by Split. The Feature Management & Experimentation Platform that reimagines software delivery. By attaching insightful data to feature flags, Split frees you to quickly deploy, measure, and learn the impact of every feature you release. So you can safely deliver features up to 50 times faster and exhale. What a Release.

Start raising feature flags (and lowering stress). Visit Split.io/CodePen for a free trial.

The post 392: Project Management Refresh appeared first on CodePen Blog.

Posted on

Web Resource Caching: Client-Side

The subject of Web resource caching is as old as the World Wide Web itself. However, I'd like to offer an as-exhaustive-as-possible catalogue of how one can improve performance by caching. Web resource caching can happen in two different places: client-side - on the browser and server-side. This post is dedicated to the former; the next post will focus on the latter.

Caching 101

The idea behind caching is simple: if a resource is time- or resource-consuming to compute, do it once and store the result. When somebody requests the resource afterwards, return the stored result instead of computing it a second time. It looks simple - and it is, but the devil is in the detail, as they say.

Posted on

New Changes to DZone Website

Hello DZone Contributors!

We have an exciting update to share with you all about some changes to our website. As the scope of content on DZone has continued to grow and expand over the years, we realized that the navigation to and from our Zones has become a bit crowded and difficult to navigate, so we’ve spent the past several months rebuilding and redefining what this will look like.

Posted on

Using The New Constrained Layout In WordPress Block Themes

One of the main goals of the WordPress Site Editor (and, yes, that is now the “official” name) is to move basic block styling from CSS to structured JSON. JSON files are machine-readable, which makes it consumable by the JavaScript-based Site Editor for configuring a theme’s global styles directly in WordPress.

It’s not all the way there yet! If we look at the Twenty Twenty-Two (TT2) default theme, there were two main unresolved issues: styling interactions (like :hover, :active, :focus), and the margins and padding of layout containers. You can see how those were temporarily fixed in the TT2 style.css file rather than making it into the theme.json file.

WordPress 6.1 fixed those issues and what I want to do is look specifically at the latter. Now that we have JSON-ified styles for the margins and padding of layout containers, that opens us up to more flexible and robust ways to define spacing in our theme layouts.

What kind of spacing are we talking about?

First off, we already have root-level padding which is a fancy way of describing padding on the <body> element. That’s nice because it ensures consistent spacing on an element that is shared on all pages and posts.

But there’s more to it because now we have a way for blocks to bypass that padding and align themselves full-width. That’s thanks to padding-aware alignments which is a new opt-in feature in theme.json. So, even if you have root-level padding, you can still allow, say, an image (or some other block) to break out and go full-width.

That gets us to another thing we get: constrained layouts. The idea here is that any blocks nested in the layout respect the layout’s content width — which is a global setting — and do not flow outside of it. We can override that behavior on a block-by-block basis with alignments, but we’ll get to that.

Let’s start with…

Root-level padding

Again, this isn’t new. We’ve had the ability to set padding on the <body> element in theme.json since the experimental Gutenberg plugin introduced it in version 11.7. We set it on the styles.spacing object, where we have margin and padding objects to define the top, right, bottom, and left spacing on the body:

{
  "version": 2,
  "styles": {
    "spacing": {
      "margin": {
        "top": "60px",
        "right": "30px",
        "bottom": "60px",
        "left": "30px"
      },
      "padding": {
        "top": "30px",
        "right": "30px",
        "bottom": "30px",
        "left": "30px"
      }
    }
  }
}

This is a global setting. So, if we were to crack open DevTools and inspect the <body> element, we would see these CSS styles:

body {
  margin-top: 60px;
  margin-right: 30px;
  margin-bottom: 60px;
  margin-left: 30px;
  padding-top: 30px;
  padding-right: 30px;
  padding-bottom: 30px;
  padding-left: 30px;
}

Cool. But herein lies the issue of how in the world we can allow some blocks to break out of that spacing to fill the full screen, edge-to-edge. That’s why the spacing is there, right? It helps prevent that from happening!

But there are indeed plenty of cases where you might want to break out of that spacing on a one-off instance when working in the Block Editor. Say we plop an Image block on a page and we want it to go full-width while the rest of the content respects the root-level padding?

Enter…

Padding-aware alignments

While attempting to create the first default WordPress theme that defines all styles in the theme.json file, lead designer Kjell Reigstad illustrates the challenging aspects of breaking out of root-level padding in this GitHub issue.

Root-level padding prevents blocks from taking up the full viewport width (left). But with padding-aware alignments, some blocks can “opt-out” of that spacing and take up the full viewport width (right). (Image credit: Kjell Reigstad)

New features in WordPress 6.1 were created to address this issue. Let’s dig into those next.

useRootPaddingAwareAlignments

A new useRootPaddingAwareAlignments property was created to address the problem. It was actually first introduced in the Gutenberg plugin v13.8. The original pull request is a nice primer on how it works.

{
  "version": 2,
  "settings": {
    "appearanceTools": true,
    "useRootPaddingAwareAlignments": true,
    // etc.
  },

Right off the bat, notice that this is a feature we have to opt into. The property is set to false by default and we have to explicitly set it to true in order to enable it. Also notice that we have appearanceTools set to true as well. That opts us into UI controls in the Site Editor for styling borders, link colors, typography, and, yes, spacing which includes margin and padding.

Setting appearanceTools set to true automatically opts blocks into margin and padding without having to set either settings.spacing.padding or setting.spacing.margin to true.

When we do enable useRootPaddingAwareAlignments, we are provided with custom properties with root padding values that are set on the <body> element on the front end. Interestingly, it also applies the padding to the .editor-styles-wrapper class so the spacing is displayed when working in the back-end Block Editor. Pretty cool!

I was able to confirm those CSS custom properties in DevTools while digging around.

Enabling useRootPaddingAwareAlignments also applies left and right padding to any block that supports the “content” width and “wide” width values in the Global Styles image above. We can also define those values in theme.json:

{
  "version": 2,
  "settings": {
    "layout": {
      "contentSize": "640px",
      "wideSize": "1000px"
    }
  }
}

If the Global Styles settings are different than what is defined in theme.json, then the Global Styles take precedence. You can learn all about managing block theme styles in my last article.

  • contentSize is the default width for blocks.
  • wideSize provides a “wide” layout option and establishes a wider column for blocks to stretch out.

So, that last code example will give us the following CSS:

/* The default content container */
.wp-container-[id] > * {
  max-width: 640px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* The wider content container */
.wp-container-[id] > .alignwide {
  max-width: 1000px;
}

[id] indicates a unique number automatically generated by WordPress.

But guess what else we get? Full alignment as well!

.wp-container-[id] .alignfull {
  max-width: none;
}

See that? By enabling useRootPaddingAwareAlignments and defining contentSize and wideSize, we also get a full alignment CSS class for a total of three container configurations for controlling the width of blocks that are added to pages and posts.

This applies to the following layout-specific blocks: Columns, Group, Post Content, and Query Loop.

Block layout controls

Let’s say we add any of those aforementioned layout-specific blocks to a page. When we select the block, the block settings UI offers us new layout settings based on the settings.layout values we defined in theme.json (or the Global Styles UI).

We’re dealing with very specific blocks here — ones that can have other blocks nested inside. So, these Layout settings are really about controlling the width and alignment of those nested blocks. The “Inner blocks use content width” setting is enabled by default. If we toggle it off, then we have no max-width on the container and the blocks inside it go edge-to-edge.

If we leave the toggle on, then nested blocks will adhere to either the contentWidth or wideWidth values (more on that in a bit). Or we can use the numeric inputs to define custom contentWidth and wideWidth values in this one-off instance. That’s great flexibility!

Wide blocks

The settings we just looked are set on the parent block. Once we’ve nested a block inside and select it, we have additional options in that block to use the contentWidth, wideWidth, or go full-width.

This Image block is set to respect the contentWidth setting, labeled “None” in the contextual menu, but can also be set to wideWidth (labeled “Wide width”) or “Full width”.

Notice how WordPress multiplies the root-level padding CSS custom properties by -1 to create negative margins when selecting the “Full width” option.

The .alignfull class sets negative margins on a nested block to ensure it takes up the full viewport width without conflicting with the root-level padding settings.

Using a constrained layout

We just covered the new spacing and alignments we get with WordPress 6.1. Those are specific to blocks and any nested blocks within blocks. But WordPress 6.1 also introduces new layout features for even more flexibility and consistency in a theme’s templates.

Case in point: WordPress has completely restructured its Flex and Flow layout types and gave us a constrained layout type that makes it easier to align block layouts in themes using the content width settings in the Site Editor’s Global Styles UI.

Flex, Flow, and Constrained layouts

The difference between these three layout types is the styles that they output. Isabel Brison has an excellent write-up that nicely outlines the differences, but let’s paraphrase them here for reference:

  • Flow layout: Adds vertical spacing between nested blocks in the margin-block direction. Those nested blocks can also be aligned to the left, right, or center.
  • Constrained layout: Same exact deal as a Flow layout, but with width constraints on nested blocks that are based on the contentWidth and wideWidth settings (either in theme.json or Global Styles).
  • Flex layout: This was unchanged in WordPress 6.1. It uses CSS Flexbox to create a layout that flows horizontally (in a row) by default, but can flow vertically as well so blocks stack one on top of another. Spacing is applied using the CSS gap property.

This new slate of layout types creates semantic class names for each layout:

Semantic layout classLayout typeSupported blocks
.is-layout-flowFlow layoutColumns, Group, Post Content, and Query Loop.
.is-layout-constrainedConstrained layoutColumns, Group, Post Content, and Query Loop.
.is-layout-flexFlex layoutColumns, Buttons, Social Icons

Justin Tadlock has an extensive write-up on the different layout types and semantic classes, including use cases and examples.

Updating your theme to support constrained layouts

If you’re already using a block theme of your own making, you’re going to want to update it to support constrained layouts. All it takes is swapping out a couple of things in theme.json:

{
  "version": 2,
  "settings": {
    "layout": {
      "type": "constrained", // replaces `"inherit": true`
      "type": "default", // replaces `"inherit": false`
    }
  }
}

These are recently released block themes that have enabled spacing settings with useRootPaddingAwareAlignments and have an updated theme.json file that defines a constrained layout:

ThemeRoot-level paddingConstrained layout features
TT3Source codeSource code, Templates
ProWPSource codeSource code, Templates
TriangulateSource codeSource code, Templates
OaknutSource codeSource code, Templates
LoudnessSource codeSource code, Templates
PixlSource codeSource code, Templates
Block CanvasSource codeSource code, Templates
RainfallSource codeSource code, Templates

Disabling layout styles

The base layout styles are default features that ship in WordPress 6.1 Core. In other words, they’re enabled right out of the box. But we can disable them if we need to with this little snippet in functions.php:

// Remove layout styles.
add_theme_support( 'disable-layout-styles' );

Big warning here: disabling support for the default layout types also removes all of the base styling for those layouts. That means you’ll need to roll your own styles for spacing, alignments, and anything else needed to display content in different template and block contexts.

Wrapping up

As a great fan of full-width images, the new contained WordPress 6.1 layout and padding aware alignment features are two of my most favorites yet. Taken together with other tools including, better margin and padding control, fluid typography, and updated List and Quote blocks, among others, is solid proof that WordPress is moving towards a better content creation experience.

Now, we have to wait and look at how the imagination and creativity of ordinary designers and content creators use these incredible tools and take it to a new level.

Because of the site editor development iterations in progress, we should always anticipate a difficult path ahead. However, as an optimist, I am eager to see what will happen in the upcoming version of WordPress 6.2. Some of the thing, that I am keeping a close eye on are things like features being considered for inclusion, support for sticky positioning, new layout class names for inner block wrappers, updated footer alignment options, and adding constrained and flow layout options to Cover blocks.

This GitHub issues #44720 lists the layout related discussions slated for WordPress 6.2.

Additional resources

I consulted and referenced a lot of sources while digging into all of this. Here’s a big ol’ list of things I found helpful and think you might enjoy as well.

Tutorials

WordPress posts

GitHub pull requests and issues

Using The New Constrained Layout In WordPress Block Themes originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Posted on

DevOps and Open Source — Why Does This Duo Work so Well?

Open Source is DevOps heaven. The world of Open Source and DevOps cultivate each other to create a virtuous circle of innovation, collaboration, and sharing.

Imagine a world where everything would be free and accessible, the result of collaboration and the goodwill of human brains to perpetually innovate together selflessly. This dream is called Open Source.

Posted on

Quality Management – Whose Responsibility Is It Anyway?

In 1924, W. A. Shewhart of Bell Telephone Laboratories developed a statistical chart to control product variables. This chart is the beginning of statistical quality control as we know it.

After the second world war, engineers W. Edwards Deming and Joseph M. Juran, who worked as consultants in the Japanese manufacturing industry, created the concept of Total Quality, in which quality extends beyond the manufacturing process to all organizational processes and instills the values of quality in every worker called – Total Quality Management (TQM)

Posted on

What Is Loosely Coupled Architecture?

A loosely coupled architecture is a software application development model wherein multiple components are connected with one another but are not heavily dependent on each other. Together, these components create a general network or system, despite each service being an independent entity created to perform a single task.

The primary purpose of a loosely coupled architecture is to create a system that doesn’t fail due to the failure of a single component. Service-oriented architectures (SOAs) normally comprise a loosely coupled architecture.

Posted on

How To Build an NFT Minting dApp on Flow

If you’ve followed along with the Flow series so far, you already know that the Flow Blockchain excels in handling digital assets, such as NFTs. It was built from the ground up as a better alternative to Ethereum’s network congestion and high fee issues.

In addition, the Cadence smart contract language is a first-of-its-kind resource-oriented programming language that makes creating and managing digital assets easy and efficient. Although Solidity is excellent at facilitating Web3 through smart contracts, there are drawbacks. Cadence improves upon Solidity’s flaws by providing the ability to upgrade smart contracts and features that reduce the risk of human error, among other improvements.