CSS to align the height of the sidebar area with the main content in the WordPress theme Cocoon

Hello everyone. This article is about CSS in WordPress. Note that this page is an English translation of a Japanese page. (The original Japanese has been slightly rewritten to make it easier to translate into English.)

In some WordPress themes, on a PC (wide screen), the page is displayed in a two-column layout. Depending on the theme’s CSS, the height of the sidebar is only as high as needed to display the widget. For example, in the case of Cocoon, a theme made in Japan, the page is displayed as such.

This time we thought of a way to make the height of Cocoon’s sidebar the same as the height of the main column. That can be achieved using CSS. As an application of this, we came up with the following two ideas.

• How to make the last widget in the sidebar appear beside the bottom of the main column.
• How to make the second widget in the sidebar appear near the vertical center.

We tried this time with Cocoon. It is expected that similar things can be done with other themes.

Development Environment

We confirmed the display in the following environment.

WordPress

• WordPress 5.8.2
• Cocoon version: 2.3.7.1
• Cocoon Child version: 1.1.3

web browser

• Microsoft Edge
  version 95.0.1020.44 (official build) (64 bit)

We installed XAMPP for Windows 8.0.9 on our personal laptop and ran it offline. The browser console outputted a jQuery loading error. Hence, we added the following to the functions.php of our child theme

• function wp_enqueue_script_jquery_js() {}

If the above code is written, jQuery is not loaded and the above error does not occur.

Widget settings

We placed three widgets "Custom HTML" in the sidebar. We set up each of them with the following contents. (However, the content is in Japanese.)

• <p>項目１の本文</p>
• <p>項目２の本文</p>
• <p>項目３の本文</p>

As a result of examining the sidebar of the html output from the theme Cocoon, the markup was roughly structured as follows.（Some attribute id and attribute class are omitted.）

<div class="sidebar">
  <aside class="widget">
 <div class="custom-html-widget">
   <p>項目１の本文</p>
 </div>
  </aside>
  <aside class="widget">
 <div class="custom-html-widget">
   <p>項目２の本文</p>
 </div>
  </aside>
  <aside class="widget">
 <div class="custom-html-widget">
   <p>項目３の本文</p>
 </div>
  </aside>
</div>

Initially, the height of the sidebar area is variable depending on the widgets placed in it. We added the following CSS to the style.css of the child theme to make things easier to see.

/* Settings for easy viewing */
.main {
  border: 4px solid black;
  width: 400px;
}

.sidebar {
  border: 4px solid black;
  width: 600px;
}

.widget {
  border: 4px solid black;
  background-color: #aaa;
  padding: 16px;
}

.custom-html-widget {
  border: 4px solid black;
  background-color: cornflowerblue;
  padding: 16px;
}

.custom-html-widget p {
  font-weight: bold;
}

.footer {
  border: 4px solid black;
}

"main" is the class name set in the class attribute of the main column tag. The border is displayed and the width is set to 400px. The main column is set to a smaller width so that the sidebar can be easily seen.

"sidebar" is the class name set in the class attribute of the sidebar tag. The borders are displayed and the width is set to 600px to make it easier to see the sidebar.

The rest of the settings are to make the widget and footer more visible.

After adding the CSS above, the screen is displayed as shown in the image above. In the case of the Coccon theme, the height of the sidebar is only as high as necessary to accommodate the widgets placed in it.

Make the height even

To make the height of the sidebar match the height of the main column, we added the following statement to style.css above.

/* Override the parent theme's CSS */
.no-scrollable-sidebar .sidebar {
  height: auto;
}

After adding the CSS above, the screen is displayed as shown in the image above. Looking at the border of the sidebar, we can see that the height of the sidebar area is now the same as the main column.

In the CSS above, the height of the sidebar (class name no-scrollable-sidebar and sidebar) is set to "auto". In the parent theme’s style.css, the height is set to "100%" in the following places.

.no-scrollable-sidebar .sidebar {
  height: 100%;
}

The main column and sidebar are displayed in a two-column layout using a mechanism called flexbox. In that case, the height does not seem to be aligned with the percentage specification.

After overriding "auto" in the child theme as shown above, the height of the sidebar is now the same as the main column, as shown in the figure. (The sidebar area extends to the bottom.)

Application 1: Show the last widget at the bottom

As an application, we thought of a way to display the last widget in the sidebar at the bottom.

Adjust the last widget

By adjusting the last widget in the sidebar with CSS, it is possible to make the widget appear at the bottom.

We used a pseudo-class to specify the element. We added the following statement to the child theme’s style.css

/* flexbox */
.sidebar {
  display:flex;
  flex-flow: column;
}

/* last */
.sidebar .widget:last-child {
  margin-top: auto;
}

As you can see in the sidebar in the image above, the last widget was displayed at the bottom. The margin above the widget grew.

You can use “:last-child” to specify the last element. It specifies the last element of child elements.

Adjust the second-to-last widget

We also thought of a different approach.

We adjust the height of the second-to-last element with the "flex-grow" property. As a result, the last widget will be displayed at the bottom of the sidebar area. We used a pseudo-class to specify the second-to-last widget. The last part of the child theme’s style.css is the following instead of the previous statement.

/* flexbox */
.sidebar {
  display:flex;
  flex-flow: column;
}

/* The second-to-last widget */
.sidebar .widget:nth-last-child(2) {
  flex-grow: 1;
}

The height of the second-to-last widget grew, just like the sidebar in the image above.

In the above CSS, "flex-grow" is used. This is a property for specifying the ratio of distributing the remainder of the area of aligned elements.

The pseudo-class "nth-last-child(n)" can specify the n-th element from the last. In the above CSS, the second widget is specified. We set the property "flex-grow" of the element to the value "1". The initial value of this property is "0". Therefore, the remainder is distributed to the area of the second widget. (The exact calculation method is omitted here.)

By extending the area of the second widget vertically, the last widget is now displayed at the bottom. For example, if you want to place a sticky element in the area of the second widget, this method will help.

Application 2: Display the second widget near the vertical center

As another application, we thought of a way to display the second widget near the center of the vertical axis. Here is the CSS

/* flexbox */
.sidebar {
  display:flex;
  flex-flow: column;
}

/* The second-to-last widget */
.sidebar .widget:nth-last-child(2) {
  margin-top: auto;
  margin-bottom: auto;
}

The second widget is now displayed near the center of the vertical axis, as shown in the image above.

In the CSS above, the top and bottom margins of the second widget are set to "auto".
Now the top and bottom margins of the target widget are automatically extended, and the widget is displayed near the center.

Note that we used three widgets in this case, but this method is not directly related to the number of widgets. A similar adjustment can be made for a single widget.

That’s all. I hope this is helpful to you.