Looking to speed up your content creation workflow in WordPress? Learn how to add a convenient “Add New” button right in your Gutenberg editor’s header. This smart addition lets you create new posts or pages without leaving your current editor screen.
What Does This Feature Do?
This enhancement adds a new button to your Gutenberg editor header that:
- Creates new posts/pages with a single click
- Matches your post type automatically (Posts, Pages, Custom Post Types)
- Warns you about unsaved changes before switching
- Integrates seamlessly with the WordPress interface
- Saves time in your content creation workflow
(see the screenshot below)
How It Benefits Content Creators?
Faster Content Creation:
- No more navigating through menus
- Quick access to new post creation
- Seamless workflow integration
- Works even with Gutenberg full screen mode
Smart Features:
- Automatically detects your post type
- Shows relevant labels (Add New Post/Page/CPT)
- Prevents accidental content loss with unsaved changes warning
Professional Integration:
- Matches WordPress UI design
- Responsive and mobile-friendly
- Works with all post types
Option 1: Installation Using WPCode plugin (Recommended Method)
WPCode offers the safest and most user-friendly way to add this feature. Here’s how:
Install WPCode:
- Go to Plugins → Add New
- Search for “WPCode”
- Install and activate the free plugin
Add the Code Snippet:
- Navigate to Code Snippets → Add Snippet
- Click “Add New Snippet”
- Choose “PHP Snippets” as the code type
- Name your snippet (e.g., “Gutenberg Add New Button”)
- Please copy and paste our provided code
- Set “Location” to “Admin only”
/* Add "Add new" button on the Gutenberg header */
if (!defined('ABSPATH')) {
exit;
}
/* Main function to add the new page button @return void */
function add_gutenberg_new_page_button() {
// Get current screen
$screen = get_current_screen();
if (!$screen || !$screen->is_block_editor()) {
return;
}
// Get and sanitize post type
$post_type = sanitize_key($screen->post_type);
// Check if post type exists and is valid
if (!post_type_exists($post_type)) {
return;
}
// Get post type object for proper labeling
$post_type_obj = get_post_type_object($post_type);
$type_label = $post_type_obj ? $post_type_obj->labels->singular_name : ucfirst($post_type);
// Register script with all necessary dependencies
wp_register_script(
'new-page-button',
'',
array(
'wp-blocks',
'wp-element',
'wp-editor',
'wp-components',
'wp-plugins'
),
'1.0.0'
);
// Localize script with escaped data
wp_localize_script('new-page-button', 'newPageButtonData', array(
'postType' => $post_type,
'newUrl' => esc_url(admin_url("post-new.php?post_type={$post_type}")),
'buttonText' => sprintf(
/* translators: %s: Post type label */
esc_html__('Add New %s', 'your-text-domain'),
esc_html($type_label)
)
));
wp_add_inline_script('new-page-button', '
window.addEventListener("load", function() {
const { createElement } = wp.element;
const { Button } = wp.components;
function NewPageButton() {
return createElement(
"div",
{
className: "new-page-button-wrapper",
style: {
display: "inline-block",
marginLeft: "8px"
}
},
createElement(
Button,
{
icon: "plus",
isPrimary: true,
onClick: () => {
// Check if there are unsaved changes
const isDirty = wp.data.select("core/editor").isEditedPostDirty();
if (isDirty && !window.confirm("You have unsaved changes. Do you want to leave anyway?")) {
return;
}
window.location.href = newPageButtonData.newUrl;
},
className: "new-page-button",
style: {
height: "36px",
position: "relative"
}
},
newPageButtonData.buttonText
)
);
}
function insertButton() {
const toolbar = document.querySelector(".edit-post-header-toolbar");
if (!toolbar || document.querySelector(".new-page-button-container")) {
return;
}
const container = document.createElement("div");
container.className = "new-page-button-container";
// Insert after the first toolbar item
toolbar.insertBefore(container, toolbar.children[1]);
wp.element.render(
createElement(NewPageButton),
container
);
}
// Initial insertion
insertButton();
// Watch for toolbar changes with debouncing
let debounceTimeout;
const observer = new MutationObserver(function() {
clearTimeout(debounceTimeout);
debounceTimeout = setTimeout(() => {
if (!document.querySelector(".new-page-button-container")) {
insertButton();
}
}, 100);
});
// Start observing with error handling
try {
const observerTarget = document.querySelector(".interface-interface-skeleton__header") || document.body;
observer.observe(observerTarget, {
subtree: true,
childList: true
});
} catch (error) {
console.error("Error setting up observer:", error);
}
// Cleanup on page unload
window.addEventListener("unload", function() {
observer.disconnect();
clearTimeout(debounceTimeout);
});
});
');
wp_enqueue_script('new-page-button');
// Add custom CSS
wp_add_inline_style('wp-edit-post', '
.new-page-button-container {
display: inline-block;
}
.new-page-button-wrapper {
position: relative;
}
.new-page-button.components-button.is-primary {
display: inline-flex !important;
align-items: center !important;
padding-left: 8px !important;
}
.new-page-button.components-button.is-primary svg {
margin-top: 2px;
margin-right: 4px;
}
');
}
/* Initialize the new page button functionality @return void */
function initialize_new_page_button() {
if (is_admin()) {
add_action('enqueue_block_editor_assets', 'add_gutenberg_new_page_button');
}
}
add_action('init', 'initialize_new_page_button');Activate the Feature:
- Toggle the snippet to “Active”
- Click “Save Snippet”
- Refresh your editor page
Option 2: Using the functions.php of Your Child Theme
⚠️ Warning: This method requires more technical knowledge and can break your site if not done carefully!
If you’re comfortable editing theme files, you can add the code directly to your child theme’s functions.php file.
Steps:
1. Access Your Child Theme’s functions.php:
- Use FTP or the WordPress Theme Editor (Appearance > Theme Editor).
2. Add the Custom Code:. Paste the same code provided above at the end of the functions.php file.
3. Save the Changes.
Note: Editing the functions.php file can break your site if not done correctly. Always back up your site before making chan
Why Choose WPCode Over Child Theme Method?
Enhanced Safety:
- Built-in error detection
- Easy activation/deactivation
- No direct file editing required
Better Management:
- Centralized code management
- Easy updates and modifications
- No FTP access needed
Reliability:
- Works across theme updates
- Survives WordPress updates
- Easy to backup and restore
How to Use the New Button
After installation:
- Open any post or page in the Gutenberg editor
- Look for the new “Add New” button in the top toolbar
- Click it to create a new post/page
- Save your current work if prompted about unsaved changes
Customization Options
Want to modify the button? Here are some common adjustments:
- Change Button Position:
.new-page-button-container {
margin-left: 20px; /* Adjust spacing */
}- Modify Button Style:
.new-page-button.components-button.is-primary {
background: #your-color-here;
padding: 0 12px;
}- Adjust Icon Spacing:
.new-page-button.components-button.is-primary svg {
margin-right: 6px;
}Troubleshooting Guide
If the button doesn’t appear:
- Clear your browser cache
- Ensure WordPress is updated
- Verify WPCode is properly activated
- Check if your theme supports Gutenberg
- Temporarily disable other plugins to check for conflicts
Conclusion
Adding a quick “Add New” button to your Gutenberg editor is a simple yet powerful way to streamline your content creation process. Using WPCode for implementation ensures the most reliable and maintainable solution.
