In the BricksLabs Facebook group a user asks:
Could you make a new tutorial about how to make a “CPT?” for Bricks template sections and other elements?
Journey:
We want to add re-usable element to our customers, what is can edit simply. And we just put the generated shortcode into the page. So, when they editing and save this “template” it just update on page.
In Bricks > Temapltes working great, but we dont want to recommend to our customer, because there are all of other very important templates (archive, header, footer and other templates)
So it would be great separate a different menu from bricks > templates route.
This Pro tutorial provides the code for adding a new “Section Templates” admin menu item which when clicked shows the list of Bricks templates filtered to show only the templates of Section type on a new admin menu page.
Bricks → Templates:
After implementing the tutorial:
Add the following in child theme‘s functions.php (w/o the opening PHP tag) or a code snippets plugin:
<?php
// Add Section Templates as a top-level menu item
function bl_add_section_templates_menu(): void {
add_menu_page (
esc_html__( 'Section Templates', 'bricks' ), // Page title
esc_html__( 'Section Templates', 'bricks' ), // Menu title
'edit_posts', // Capability required to see this menu item
'edit.php?post_type=' . BRICKS_DB_TEMPLATE_SLUG . '&template_type=section', // Menu slug (URL). BRICKS_DB_TEMPLATE_SLUG = bricks_template
null, // Function to output the content for this page
'dashicons-layout', // Icon URL
4 // Position (5 is the position for Posts)
);
}
add_action( 'admin_menu', 'bl_add_section_templates_menu', 11 ); // Priority 11 to ensure it runs after the default menu items are added
// Filter query to show only Section templates
function bl_filter_section_templates( WP_Query $query ): void {
// Only run in admin and for the main query
if ( ! is_admin() || ! $query->is_main_query() ) {
return;
}
// Check if we're on the Section Templates page
if (
isset( $_GET['post_type'] ) &&
$_GET['post_type'] === BRICKS_DB_TEMPLATE_SLUG &&
isset( $_GET['template_type'] ) &&
$_GET['template_type'] === 'section'
) {
// Set a meta query to only show section templates
$query->set( 'meta_query', [
[
'key' => BRICKS_DB_TEMPLATE_TYPE, // _bricks_template_type
'value' => 'section',
],
]);
}
}
add_action( 'pre_get_posts', 'bl_filter_section_templates' );
// Hide template type dropdown and Filter button on Section Templates page
function bl_hide_template_type_filter(): void {
global $pagenow, $typenow;
// $pagenow: Contains the filename of the current PHP page (e.g., 'edit.php', 'post.php')
// $typenow: Contains the post type of the current admin page (e.g., 'post', 'page', 'bricks_template')
// Check if we're on the Section Templates page
if ( $pagenow === 'edit.php' && $typenow === BRICKS_DB_TEMPLATE_SLUG && isset( $_GET['template_type'] ) && $_GET['template_type'] === 'section' ) {
// Output CSS to hide the template type dropdown and filter button
echo '<style>
select#template_type,
#post-query-submit {
display: none;
}
</style>';
}
}
add_action( 'admin_head', 'bl_hide_template_type_filter' );
// Modify admin title for Section Templates page
function bl_modify_section_templates_title( $admin_title, $title ) {
global $pagenow, $typenow;
// Check if we're on the Section Templates page
if ( $pagenow === 'edit.php' &&
$typenow === BRICKS_DB_TEMPLATE_SLUG &&
isset( $_GET['template_type'] ) &&
$_GET['template_type'] === 'section' ) {
// Replace the original title with "My Section Templates"
$admin_title = str_replace( $title, esc_html__( 'My Section Templates', 'bricks' ), $admin_title );
}
return $admin_title;
}
add_filter( 'admin_title', 'bl_modify_section_templates_title', 10, 2 );
// Modify heading for Section Templates page
function bl_modify_section_templates_heading() {
global $pagenow, $typenow;
// Check if we're on the Section Templates page
if ( $pagenow === 'edit.php' &&
$typenow === BRICKS_DB_TEMPLATE_SLUG &&
isset($_GET['template_type']) &&
$_GET['template_type'] === 'section' ) {
// Output JavaScript to change the heading text
?>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
const heading = document.querySelector('h1.wp-heading-inline');
if (heading) {
heading.textContent = '<?php echo esc_js(__('My Section Templates', 'bricks')); ?>';
}
});
</script>
<?php
}
}
add_action('admin_head', 'bl_modify_section_templates_heading');
// Add custom styles and scripts for Section Templates menu
function bl_section_templates_menu_style(): void {
global $pagenow, $typenow;
// Check if we're on the Section Templates page
if ( $pagenow === 'edit.php' &&
$typenow === BRICKS_DB_TEMPLATE_SLUG &&
isset( $_GET['template_type'] ) &&
$_GET['template_type'] === 'section'
) {
// Output CSS to style the Section Templates menu item and adjust Bricks menu
echo '<style>
/* Make Section Templates menu item appear active */
#toplevel_page_edit-post_type-bricks_template-template_type-section > a {
color: #fff;
background-color: #2271b1;
}
#toplevel_page_edit-post_type-bricks_template-template_type-section > a .wp-menu-image:before {
color: #fff;
}
/* Remove bold from Templates submenu item under Bricks */
#toplevel_page_bricks .wp-submenu .current {
font-weight: normal;
}
</style>';
// Output JavaScript to adjust menu classes
echo '<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
// Remove classes that keep Bricks menu open
const bricksMenu = document.querySelector("#toplevel_page_bricks");
if (bricksMenu) {
bricksMenu.classList.remove("wp-has-current-submenu", "wp-menu-open", "wp-has-submenu");
bricksMenu.classList.add("wp-not-current-submenu");
var bricksLink = bricksMenu.querySelector("a.wp-has-submenu");
if (bricksLink) {
bricksLink.classList.remove("wp-has-current-submenu", "wp-menu-open");
bricksLink.classList.add("wp-not-current-submenu");
}
}
// Remove "current" class from Bricks submenu items
const bricksSubmenu = document.querySelector("#toplevel_page_bricks .wp-submenu");
if (bricksSubmenu) {
const currentItems = bricksSubmenu.querySelectorAll(".current");
currentItems.forEach(function(item) {
item.classList.remove("current");
});
}
// Add "current" class to Section Templates menu item
const sectionTemplatesMenuItem = document.querySelector("#toplevel_page_edit-post_type-bricks_template-template_type-section");
if (sectionTemplatesMenuItem) {
sectionTemplatesMenuItem.classList.add("current");
sectionTemplatesMenuItem.classList.add("wp-has-current-submenu");
sectionTemplatesMenuItem.classList.remove("wp-not-current-submenu");
const sectionTemplatesLink = sectionTemplatesMenuItem.querySelector("a");
if (sectionTemplatesLink) {
sectionTemplatesLink.classList.add("wp-has-current-submenu");
sectionTemplatesLink.classList.remove("wp-not-current-submenu");
}
}
});
</script>';
}
}
add_action( 'admin_head', 'bl_section_templates_menu_style' );