{"id":21546,"date":"2021-03-15T17:00:44","date_gmt":"2021-03-15T16:00:44","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=21546"},"modified":"2021-03-12T17:02:35","modified_gmt":"2021-03-12T16:02:35","slug":"wordpress-post-edit-screen","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/wordpress-post-edit-screen\/","title":{"rendered":"How to Rearrange Your WordPress Post Edit Screen"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]When it comes to creating content, WordPress is known as one of the most flexible and user-friendly CMS platforms around. In fact, this is part of the reason why so many big-name companies use WordPress to power their websites<\/a>.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Now, as for the content editing system of WordPress itself, there are several available editors, two of which are particularly widely used \u2013 the older version of the WordPress editor known as Classic (which is now available as a plugin with the same name<\/a>) and the new, block-based editor called Gutenberg<\/a>. And while the opinions about which of the two editors is better still remain divided within the WordPress community, that\u2019s not going to be the topic of this article. Rather, this time around, we will talk about how you can adjust the post edit screen of both WordPress editors according to your preferences<\/strong>.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]If you rearrange and\/or hide different areas and options within your WordPress editor that you\u2019re not using very often, you can create a cleaner environment and one that feels less clogged up and distraction-free. This way, you will be able to fully focus on doing the one thing both of these editors have been developed for in the first place \u2013 the content creation itself.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]So, stick around as we guide you through all the different ways to rearrange your WordPress post edit screen \u2013 both in the Gutenberg and Classic editor.<\/strong>[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Rearranging the Post Edit Screen in Gutenberg<\/h2>\n

[\/vc_column_text][vc_column_text]According to many, the introduction of the Gutenberg editor has taken the experience of creating content in WordPress to a whole new level. The editing process has become cleaner, more modern, and more efficient than ever before. That being said, once you get more familiarized with Gutenberg\u2019s interface, you will probably notice you can still do without certain areas and sections. Of course, which ones you want to remove will depend entirely on your own preferences. Here are all the different things you can do to adjust the appearance of the Gutenberg editor to your liking.
\n[\/vc_column_text][vc_empty_space height=”72px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Hiding Specific Meta Boxes<\/h3>\n

[\/vc_column_text][vc_column_text]This is what the default post editing screen in Gutenberg looks like:
\n[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Gutenberg <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Now, once you pay attention to the right-hand side of your screen, you will notice two types of settings \u2013 Document<\/em> and Block<\/em> settings<\/strong>. The former are the general settings related to your page or post, while the latter settings are specific to the block you\u2019re working on within the editor.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Document <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]You will also be able to spot the three dots that open a menu when clicked on.
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Dots <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Once you select Options<\/em> (located at the bottom of the menu), you will be able to check (and uncheck) different meta boxes that also appear on the right side of the screen, such as Permalink, Categories, Discussion, Excerpt, etc.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Options <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]If you\u2019re not using some of these options often and wish to have a cleaner working space in your editor, then we recommend that you hide them.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]For example, this is what the Document options screen will look like without the Excerpt, Categories, and Tags panels:
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Document <\/div>\n<\/div>[vc_empty_space height=”82px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Moving the Block Toolbar to the Top<\/h3>\n

[\/vc_column_text][vc_column_text]Now, there is also the possibility to rearrange the location of the block toolbar that is usually displayed above the block you\u2019re working on.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]To place the toolbar at the top, you can click on the three dots to open the menu and mark the \u201cTop Toolbar<\/em>\u201d option.<\/strong>[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Toolbar\" <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]By doing this, you will be able to always access the toolbar options of your blocks in the same place (at the top), which can make the whole editing process easier as you move between different blocks.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]And this is the result:[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Toolbar <\/div>\n<\/div>[vc_empty_space height=”82px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Removing the Right Panel<\/h3>\n

[\/vc_column_text][vc_column_text]For less distractions while producing content, you can also clean out your editing area completely and remove the panel on the right side of the screen. To do this, simply click on the gear icon once, and the panel will disappear.<\/strong>[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Editor <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Of course, you can always click on the same gear icon again to make the panel reappear.
\n[\/vc_column_text][vc_empty_space height=”72px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Using the Fullscreen Mode<\/h3>\n

[\/vc_column_text][vc_column_text]If you want to work without even less distraction, you can always hide the admin toolbar and sidebar. To do this, simply click on the three dots and mark the Fullscreen mode<\/em><\/strong>. This will make both your toolbar and sidebar disappear.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Editor <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]And unmarking this option will make them appear again:
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Normal <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]We should note that WordPress will remember the option you selected, so next time, the editor will appear just how you left it.
\n[\/vc_column_text][vc_empty_space height=”72px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Using the Spotlight Mode<\/h3>\n

[\/vc_column_text][vc_column_text]The Spotlight mode is particularly useful as it emphasizes the block you\u2019re currently editing by reducing the opacity of others<\/strong>, which can help you focus better on the task at hand and locate the block you\u2019re working on faster. This option is activated in Gutenberg by default, so if you want to use it, there\u2019s no need to change anything.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Spotlight <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]If you wish to deactivate this option, you can click on the three-dotted menu and simply unmark the Spotlight<\/em> mode.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Unmark <\/div>\n<\/div>[vc_empty_space height=”82px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Collapsing the Meta Boxes in the Document Panel<\/h3>\n

[\/vc_column_text][vc_column_text]We\u2019ve already mentioned the ability to hide certain meta boxes in the Document Panel earlier. But if you prefer to only temporarily hide them instead of removing them from the panel completely, you can simply collapse one, more, or all of the boxes by clicking the upward arrow on each specific box.<\/strong>[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Editor <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]This can make the look of your document appear much cleaner and smoother overall.
\n[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Rearranging the Post Edit Screen in the Classic Editor<\/h2>\n

[\/vc_column_text][vc_column_text]In case you are one of the users that prefer using the good old Classic editor over Gutenberg, you\u2019ll be happy to hear there are plenty of ways to reorder or hide different sections in this editor as well. We are going to list them one by one.
\n[\/vc_column_text][vc_empty_space height=”72px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Minimizing the Meta Boxes<\/h3>\n

[\/vc_column_text][vc_column_text]The Classic editor also comes with the section on the right side of the screen that contains various meta boxes. This includes the Publish box, Categories, Tags, Featured Image, and so on.
\n[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Classic <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]To collapse these boxes, click on the upward arrow on the box in question<\/strong> \u2013 just like you would in the Gutenberg editor.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Classic <\/div>\n<\/div>[vc_empty_space height=”60px”]
\n
\n \"Arrows <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]When you want to show the options within the meta boxes again, simply hit the downward arrow.
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Category <\/div>\n<\/div>[vc_empty_space height=”82px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Rearranging the Meta Boxes<\/h3>\n

[\/vc_column_text][vc_column_text]If you want, you can even drag and drop these boxes to change their individual position from within the editor and rearrange them in a way that best fits your needs<\/strong>. For example, you can move your Tags box closer to the top, place the Categories box on the bottom, etc.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Editor <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]There are also certain boxes you will see placed directly below the post editor. You can also click on any one of these boxes and drag them to the right-hand side of the screen, and vice versa \u2013 you can drag the boxes located on right to the bottom of the editing screen.
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Editor <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Alternatively, you can move each box up or down and make it switch places with another box by using up or down arrows:<\/strong>[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Editor <\/div>\n<\/div>[vc_empty_space height=”82px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Hiding the Meta Boxes<\/h3>\n

[\/vc_column_text][vc_column_text]You can also hide specific meta boxes completely by accessing the Screen Options<\/em> panel located in the top right corner<\/strong>. Then, simply uncheck the boxes you wish to hide<\/strong>.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Screen <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Also, you can mark the boxes you want to be shown, or simply leave them be if they\u2019re already selected.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Here you will also be able to choose a single column or double column layout. This will influence the way your meta boxes appear in the editor. One column means all meta boxes will be placed below the editor, while the two columns option displays some boxes below, and the others on the right side of the editing screen (this is the default setting).
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Screen <\/div>\n<\/div>[vc_empty_space height=”78px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Activating the Distraction-Free Writing Mode<\/h2>\n

[\/vc_column_text][vc_column_text]Just like in Gutenberg, you can activate the fullscreen mode in the Classic editor as well. This option instantly removes all the meta boxes and the admin sidebar while blurring the admin toolbar above<\/strong>. To do this, simply click the fullscreen icon located in the editor or press the ALT+Shift+W key combination on your keyboard.<\/strong>[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Editor <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]In case you don\u2019t see this option in your editor, you can activate it in the above-mentioned Screen Options<\/em> by checking the option called \u201cEnable full-height editor and distraction-free functionality.\u201d<\/strong>[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Enable <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]You should note that the instant you hover over the sidebar or the meta boxes, you will automatically exit this mode.
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Editor <\/div>\n<\/div>[vc_empty_space height=”78px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Wrapping Up<\/h2>\n

[\/vc_column_text][vc_column_text]WordPress is a highly flexible and user-friendly platform that allows you to make your content creation experience as smooth as possible. No matter if you\u2019re using the new Gutenberg editor or if you still prefer the Classic one, you will find plenty of options at your disposal that will allow you to create a clean, distraction-free environment. You can hide different boxes you don\u2019t need during the process, use the fullscreen mode that hides the admin sidebar, and much more. And the best thing about it is that you can always switch the look of your editing screen back to its original state at any given moment.
\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"

Stick around as we show you all the different ways to rearrange your WordPress post edit screen using two WordPress editors \u2013 Gutenberg and the Classic editor.<\/p>\n","protected":false},"author":2,"featured_media":21658,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[80,14,72,4,13],"class_list":["post-21546","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-classic","tag-core","tag-gutenberg","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/21546","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=21546"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/21546\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/21658"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=21546"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=21546"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=21546"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}