How to Justify Text in WordPress

Justifying text is a practice familiar to anyone writing essays, e-books, traditionally published books, or those with a literary-oriented website, WordPress or not. However, there’s a reason this is not standard practice, mainly because it can ruin visibility on mobile devices. That’s one of the reasons users of this Content Management System (CMS) noticed the “Justify Text” button missing since WordPress 4.7. Even worse, they did it intentionally and it’s likely never coming back. Luckily, you can still learn how to justify text in WordPress in other ways.

1. Justify text in WordPress via keyboard shortcuts

We’re starting with by far the easiest method that only requires pressing three keys in combination. Here’s how justifying text in WordPress using keyboard shortcuts works:

1. Start editing your post in WordPress.
   Note. This should work even if you use page builder plugins. Well, unless they bound the key combination to another function or explicitly disabled the option. They may also have a Justify Text option of their own.
2. Highlight the text you want to align. If you need to align the entire text, press Ctrl (Control) + A (Windows and Linux) or Command + A (Mac).
3. Press Ctrl (Control) + Alt+ J on your keyboard on Linux and Windows and Cmd (Command) + Option + J for Macintosh.
   Note. You may also try pressing Shift + Alt + J on all platforms if the combination above doesn’t work.
4. The section or the whole text will now be justified.

2. Editing HTML to change text alignment

We know the phrase “editing source code” sounds intimidating. Luckily, in this case, it only involves minor editing of HTML in WordPress. This should only be used if a page is relatively simple and you only want one or a few paragraphs justified, not all. You can also use a neat trick to make things extremely easy. Here’s what to do:

1. Begin editing your post in any WordPress Editor.
   Optional. Highlight the section of the text or a block. Align it left, center, or right from the hover menu in Block Editor or the top menu toolbar in Classic Editor.
2. Start editing HTML as we demonstrated in method 1 of the HTML editing guide above.
3. Now, depending on which steps you took, do one of the following:

1. I didn’t use the optional step

We respect your decision. Find your bit of text, which we’ll assume is a paragraph, since justifying headlines can sometimes look unsightly. Do this:

1. Find the opening and closing tags for a paragraph: <p> and </p>.
2. Add style=”text-align: justify;” to the opening tag so it looks like:
   <p style="text-align: justify;"> Some text </p>
3. Click on Edit visually or Visual as we demonstrated to determine if it worked.
   Note. If there are multiple, make sure to distance “style” from other attributes with a space, such as <p style ="..." class="...">.

2. I followed the optional step

Great, you’ve saved yourself time and eliminated risk. Press Ctrl (Control) + F (Windows, Linux) or Cmd (Command) + F (Mac) to open a search bar. Now:

1. Search for “text-align;”
2. Find “text-align: left;” (if you set left alignment, could be right or center) and confirm that what follows is the text in your paragraph.
3. Delete left (or right/center) and replace it with justify. We have already shown the result.
4. Switch to Visual Mode to preview changes and ascertain whether it worked.

3. Editing CSS to change text alignment to justify

The method above was our attempt to avoid scaring off beginners familiar with HTML but not CSS. If you have rudimentary knowledge or can follow a few quick instructions, this technique is even faster. This is especially true for the first option, as you can justify any block thereafter with two words. Here are two ways to justify your text using CSS in WordPress:

1. Using Additional CSS

Go back to the main page of your WordPress Admin Section. Now:

1. Expand the left sidebar.
2. Click on Appearance, then Customize.
3. Scroll down in the Live Customizer and click on Additional CSS.
4. Now, add this string of code:

justify-text {

text-align: justify;

}

5. Save changes by clicking on Publish.
6. Open your article in Gutenberg Editor.
7. Click the block that contains the text you intend to justify.
8. In the sidebar on the right-hand side, switch from Document to Block.
   Tip. Click the gears icon to make it appear.
9. Click on Advanced to expand the section.
10. Paste this into the text field below Additional CSS Class:
    justify-text
11. Click the Update or Preview buttons to see the result.

2. Defining a CSS class on the spot

You can bypass going to Advanced CSS, but you’ll have to remember a tad longer string of code. Also, this can make all paragraphs from that point forward justified by default. Therefore, it’s convenient for website owners who dabble in book publishing, writing memoirs/fan fiction/e-books, and more. Here’s the gist of it:

1. Follow steps 6 through 10.
2. Instead of “justify-text”, paste the following string of code before saving changes and previewing the post:

p.justify {
    text-align: justify;
}

You can also try:

.type-post

p {text-align: justify;

}

4. Justify text using a WordPress plugin

As usual, installing a WordPress plugin can bridge some gaps and offer temporary or permanent solutions. The same is true here, as you can:

Add a Justify Text button back to Classic Editor

Ever since the button was eradicated in WordPress 4.7, some users wanted it back. While WordPress developers among them created a solution quickly, it was at a time when Gutenberg wasn’t even released. Thus, these primarily work for Classic Editor and are outdated. That doesn’t necessarily mean they don’t function. Although we aren’t affiliated, this is the only one frequently updated. Plus, it is compatible with Classic blocks in Gutenberg Editor.

An option to Justify Text will be back in the toolbar. If you don’t use TinyMCE (now called Advanced Editor Tools), consider these two:

• Re-add text underline and justify by Brice Capobianco
• Who Stole the Text Justify Button ?! by Jean-Baptiste Audras, WordPress projects manager @ Whodunit

Implementing a Justify button to Block Editor

If you switched to Block Editor, which we assume most of you did, there’s a quick solution in the form of:

Again, no affiliation. After you activate it, do the following:

1. Start to edit a post, then click on a block.
2. Click the down arrow in the floating menu bar or the top toolbar.
3. Select Justify.
4. Text within that block will now be justified without editing CSS or HTML.