Contents
Examples
Install a fresh child and copy each example to functions.php, see what it does in the frontend and learn by changing the classes.
Body
/**
* Change body class
*/
function change_body_class() {
return "text-wrap bg-success text-danger";
}
add_filter('bootscore/class/body', 'change_body_class', 10, 2);
Header
Logo size
Exists already in bootscore-child in inc/logo.php.
/**
* Change logo size
*/
add_filter('bootscore/logo/width', function () {
return '120';
});
add_filter('bootscore/logo/height', function () {
return '40';
});
Change paths to logos
/**
* Change path to logos
*/
function change_logo_path($logo, $color) {
if ($color === 'theme-dark') {
return get_stylesheet_directory_uri() . '/path/to/dark-logo.png';
}
return get_stylesheet_directory_uri() . '/path/to/default-logo.png';
}
add_filter('bootscore/logo', 'change_logo_path', 10, 2);
Position and bg
/**
* Header position and bg
*/
function header_bg_class() {
return "position-relative bg-body shadow-sm";
}
add_filter('bootscore/class/header', 'header_bg_class', 10, 2);
/**
* Header search collapse position and bg
*/
function header_collapse_bg_class() {
return "bg-body shadow-sm position-absolute start-0 end-0";
}
add_filter('bootscore/class/header/collapse', 'header_collapse_bg_class', 10, 2);
Breakpoints
Change navbar expand to md:
/**
* Header navbar breakpoint
*/
function header_navbar_breakpoint_class() {
return "navbar-expand-md";
}
add_filter('bootscore/class/header/navbar/breakpoint', 'header_navbar_breakpoint_class', 10, 2);
/**
* Header navbar toggler breakpoint
*/
function header_navbar_toggler_breakpoint_class() {
return "d-md-none";
}
add_filter('bootscore/class/header/navbar/toggler/breakpoint', 'header_navbar_toggler_breakpoint_class', 10, 2);
Navbar always collapsed:
/**
* Header navbar breakpoint
*/
function header_navbar_breakpoint_class() {
return "";
}
add_filter('bootscore/class/header/navbar/breakpoint', 'header_navbar_breakpoint_class', 10, 2);
/*
* Header navbar toggler breakpoint
*/
function header_navbar_toggler_breakpoint_class() {
return "";
}
add_filter('bootscore/class/header/navbar/toggler/breakpoint', 'header_navbar_toggler_breakpoint_class', 10, 2);
Buttons
Change all header button classes at once:
/**
* Change all header buttons
*/
function header_button_class() {
return "btn btn-light";
}
add_filter('bootscore/class/header/button', 'header_button_class', 10, 2);
Change a single button class only. For example the navbar-toggler:
/**
* Change single header button
*/
function header_button_class($string, $location) {
if ($location == 'nav-toggler') {
return "btn btn-light";
}
return $string;
}
add_filter('bootscore/class/header/button', 'header_button_class', 10, 2);
Or select multiple buttons. For example account-toggler and mini-cart-toggler:
/**
* Change selected header buttons
*/
function header_button_class($string, $location) {
if ($location == 'account-toggler' || $location == 'cart-toggler') {
return "btn btn-light";
}
return $string;
}
add_filter('bootscore/class/header/button', 'header_button_class', 10, 2);
Navbar offcanvas title
/**
* Change navbar offcanvas title
*/
function change_navbar_offcanvas_title($title) {
return 'My Menu';
}
add_filter('bootscore/offcanvas/navbar/title', 'change_navbar_offcanvas_title');
Add a mobile logo, center the logo and move menu to left
/**
* Header hook a mobile logo
*/
function hook_before_navbar_brand() {
?>
<a class="position-absolute top-50 start-50 translate-middle d-sm-none" href="<?= esc_url(home_url()); ?>">
<img src="<?= esc_url(get_stylesheet_directory_uri()); ?>/assets/img/logo/logo-sm.svg" alt="<?php bloginfo('name'); ?> Logo" class="d-td-none">
<img src="<?= esc_url(get_stylesheet_directory_uri()); ?>/assets/img/logo/logo-sm-theme-dark.svg" alt="<?php bloginfo('name'); ?> Logo" class="d-tl-none">
</a>
<?php
}
add_action( 'bootscore_before_navbar_brand', 'hook_before_navbar_brand' );
/**
* Header navbar-brand
*/
function header_navbar_brand_class() {
return "position-absolute top-50 start-50 translate-middle d-none d-sm-block";
}
add_filter('bootscore/class/header/navbar-brand', 'header_navbar_brand_class', 10, 2);
/**
* Header menu position
*/
function header_navbar_menu_class() {
return "ms-start";
}
add_filter('bootscore/class/header/navbar-nav', 'header_navbar_menu_class', 10, 2);
/**
* Header actions
*/
function header_actions_class() {
return "d-flex align-items-center flex-grow-1 justify-content-lg-end";
}
add_filter('bootscore/class/header-actions', 'header_actions_class', 10, 2);
/**
* Move nav-toggler to first
*/
function header_nav_toggler_button_spacer_class($string, $location) {
if ($location == 'nav-toggler') {
return "order-first me-auto";
}
return $string;
}
add_filter('bootscore/class/header/action/spacer', 'header_nav_toggler_button_spacer_class', 10, 2);
/**
* Change header menu offcanvas direction
*/
function header_menu_offcanvas_directions($string, $location) {
if ($location == 'menu') {
return "start";
}
return $string;
}
add_filter('bootscore/class/header/offcanvas/direction', 'header_menu_offcanvas_directions', 10, 2);
Search collapse breakpoint (if WooCommerce is not installed)
/**
* Change search collapse breakpoint if WooCommerce is not installed
* Leave breakpoint empty to keep search always collapsed
*/
function change_search_collapse_breakpoint() {
return 'xxl';
}
add_filter('bootscore/class/header/search/breakpoint', 'change_search_collapse_breakpoint');
Loop
Enable Grid Layout
/**
* Enable grid layout only on archive, search, and index pages
*/
add_filter('bootscore/loop/layout', function($layout, $context) {
// Apply only to archive, search, and index templates
if (in_array($context, ['archive', 'search', 'index'])) {
return 'grid'; // Override default 'horizontal'
}
return $layout; // Keep original for other contexts
}, 10, 2);
Customize Grid Layout
/**
* Customize grid columns
*/
add_filter('bootscore/class/loop/grid/col', function($classes, $context) {
// Apply only to specific templates
if (in_array($context, ['archive', 'search', 'index'])) {
return 'row row-cols-2 row-cols-md-2 row-cols-lg-2 row-cols-xl-3 g-3 mb-3';
}
// Keep default for others (like shortcodes)
return $classes;
}, 10, 2);
Enable Card Overlay Layout
/**
* Enable overlay layout only on archive, search, and index pages
*/
add_filter('bootscore/loop/layout', function($layout, $context) {
// Apply only to archive, search, and index templates
if (in_array($context, ['archive', 'search', 'index'])) {
return 'overlay'; // Override default 'horizontal'
}
return $layout; // Keep original for other contexts
}, 10, 2);
Customize Card Overlay Layout
/**
* Customize overlay grid columns
*/
add_filter('bootscore/class/loop/horizontal/col', function($classes, $context) {
// Apply only to specific templates
if (in_array($context, ['archive', 'search', 'index'])) {
return 'row row-cols-1 row-cols-md-2 g-3 mb-3';
}
// Keep default for others (like shortcodes)
return $classes;
}, 10, 2);
/**
* Hide category badge on archive, search, and index pages
*/
add_filter('bootscore/loop/category', function($show, $context) {
// Check the template context
$template_context = $GLOBALS['bootscore_template_context'] ?? '';
if (in_array($template_context, ['archive', 'search', 'index'])) {
return false; // Hide meta on these templates
}
return $show; // Keep original for others
}, 10, 2);
/**
* Hide meta on archive, search, and index pages
*/
add_filter('bootscore/loop/meta', function($show, $context) {
// Check the template context
$template_context = $GLOBALS['bootscore_template_context'] ?? '';
if (in_array($template_context, ['archive', 'search', 'index'])) {
return false; // Hide meta on these templates
}
return $show; // Keep original for others
}, 10, 2);
/**
* Hide read-more on archive, search, and index pages
*/
add_filter('bootscore/loop/read-more', function($show, $context) {
// Check the template context
$template_context = $GLOBALS['bootscore_template_context'] ?? '';
if (in_array($template_context, ['archive', 'search', 'index'])) {
return false; // Hide meta on these templates
}
return $show; // Keep original for others
}, 10, 2);
/**
* Hide tags badge on archive, search, and index pages
*/
add_filter('bootscore/loop/tags', function($show, $context) {
// Check the template context
$template_context = $GLOBALS['bootscore_template_context'] ?? '';
if (in_array($template_context, ['archive', 'search', 'index'])) {
return false; // Hide meta on these templates
}
return $show; // Keep original for others
}, 10, 2);
Disable category and sticky post badge
// Hide loop meta wrapper on archive, search, and index pages
add_filter('bootscore/loop/meta-wrapper', function($show, $context) {
// Check the template context
$template_context = $GLOBALS['bootscore_template_context'] ?? '';
if (in_array($template_context, ['archive', 'search', 'index'])) {
return false; // Hide meta on these templates
}
return $show; // Keep original for others
}, 10, 2);
Enable Custom Layout and create custom loop
/**
* Enable custom layout only on archive, search, and index pages
*/
add_filter('bootscore/loop/layout', function($layout, $context) {
// Apply only to archive, search, and index templates
if (in_array($context, ['archive', 'search', 'index'])) {
return 'custom'; // Override default 'horizontal'
}
return $layout; // Keep original for other contexts
}, 10, 2);
/**
* Draw freely a custom loop items grid
* Only runs on archive, search, and index templates
*/
// Before loop, open row
add_action('bootscore_before_loop', function($context) {
if (in_array($context, ['archive', 'search', 'index'])) {
echo '<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4 mb-4">';
}
});
// Before loop item, open col - check global template context
add_action('bootscore_before_loop_item', function($context) {
$template_context = $GLOBALS['bootscore_template_context'] ?? '';
if (in_array($template_context, ['archive', 'search', 'index'])) {
echo '<div class="col">';
}
});
// Custom loop item
add_action('bootscore_custom_loop_item', function($context) {
$template_context = $GLOBALS['bootscore_template_context'] ?? '';
if (in_array($template_context, ['archive', 'search', 'index'])) {
?>
<article class="card shadow h-100 rounded-5">
<?php if ( has_post_thumbnail() ) : ?>
<a class="pt-2 px-2" href="<?php the_permalink(); ?>" aria-hidden="true" tabindex="-1">
<?php the_post_thumbnail('medium', array(
'class' => 'card-img',
'style' => 'border-radius: calc(var(--bs-border-radius-xxl) - 0.5rem);' // border-radius-xxl - inner-padding p-2
)); ?>
</a>
<?php endif; ?>
<div class="card-body p-4 d-flex flex-column">
<?php the_title('<h2 class="h5">', '</h2>'); ?>
<p class="card-text small fw-lighter">
<?= esc_html(wp_strip_all_tags(get_the_excerpt())); ?>
</p>
<p class="card-text mt-auto">
<a class="btn btn-dark btn-sm rounded-pill shadow px-3 d-block" href="<?php the_permalink(); ?>">
Learn more <i class="fa-solid fa-arrow-right"></i>
</a>
</p>
</div>
</article>
<?php
}
});
// After loop item, close col - check global template context
add_action('bootscore_after_loop_item', function($context) {
$template_context = $GLOBALS['bootscore_template_context'] ?? '';
if (in_array($template_context, ['archive', 'search', 'index'])) {
echo '</div>';
}
});
// After loop, close row
add_action('bootscore_after_loop', function($context) {
if (in_array($context, ['archive', 'search', 'index'])) {
echo '</div>';
}
});
Hide ‘Category:’ in archives but keep ‘Tag:/Month:/Author:’
/**
* Hide 'Category:' in archives but keep 'Tag:/Month:/Author:'
*
* add_filter( 'get_the_archive_title_prefix', '__return_empty_string' ); // Removes all
*/
add_filter( 'get_the_archive_title_prefix', function( $prefix ) {
if ( is_category() ) {
return '';
}
return $prefix; // Keep the default prefix for other archives like Tag and Month
});
Show author Gravatar image if archive is author
/**
* Open a <div> in the 'bootscore_after_title' action on author archive pages
*/
function open_div_author_archive($location) {
if (is_author() && $location === 'archive') {
echo '<div class="d-flex mb-3">';
}
}
// Hook the function into 'bootscore_after_title'
add_action('bootscore_after_title', 'open_div_author_archive');
/**
* Add a function to display the author's Gravatar with a custom class in the 'bootscore_after_title' hook on author archive pages
*/
function my_author_gravatar_archive($location) {
// Check if we're on an author archive and if the location parameter matches 'archive'
if (is_author() && $location === 'archive') {
$author_id = get_queried_object_id(); // Get the author ID
echo '<div class="flex-shrink-0 me-3">';
echo get_avatar($author_id, 80, '', '', array('class' => 'img-thumbnail rounded-circle')); // Display Gravatar with a custom class
echo '</div>';
}
}
// Hook the function into 'bootscore_after_title'
add_action('bootscore_after_title', 'my_author_gravatar_archive');
/**
* Close the <div> in the 'bootscore_before_loop' action on author archive pages
*/
function close_div_author_archive($location) {
if (is_author() && $location === 'archive') {
echo '</div>';
}
}
// Hook the function into 'bootscore_before_loop'
add_action('bootscore_before_loop', 'close_div_author_archive');
Vertical loop cards and read-more button
/**
* Hook the function to 'bootscore_before_loop'
*/
function hook_before_loop() {
echo '<div class="row">';
}
add_action( 'bootscore_before_loop', 'hook_before_loop' );
/**
* Hook the function to 'bootscore_before_loop_item'
*/
function hook_before_loop_item() {
echo '<div class="col-md-6 col-lg-4 mb-4">';
}
add_action( 'bootscore_before_loop_item', 'hook_before_loop_item' );
/**
* Hook the function to 'bootscore_after_loop_item'
*/
function hook_after_loop_item() {
echo '</div>';
}
add_action( 'bootscore_after_loop_item', 'hook_after_loop_item' );
/**
* Hook the function to 'bootscore_after_loop'
*/
function hook_after_loop() {
echo '</div>';
}
add_action( 'bootscore_after_loop', 'hook_after_loop' );
/**
* Change loop card class
*/
function loop_card_class() {
return "card border-0 shadow h-100";
}
add_filter('bootscore/class/loop/card', 'loop_card_class', 10, 2);
/**
* Change loop card row class
*/
function loop_card_row_class() {
return "d-flex flex-column h-100";
}
add_filter('bootscore/class/loop/card/row', 'loop_card_row_class', 10, 2);
/**
* Change loop image col class
*/
function loop_image_col_class() {
return "";
}
add_filter('bootscore/class/loop/card/image/col', 'loop_image_col_class', 10, 2);
/**
* Change loop content col class
*/
function loop_content_col_class() {
return "d-flex flex-column h-100";
}
add_filter('bootscore/class/loop/card/content/col', 'loop_content_col_class', 10, 2);
/**
* Change loop image class
*/
function loop_image_class() {
return "card-img-top";
}
add_filter('bootscore/class/loop/card/image', 'loop_image_class', 10, 2);
/**
* Change loop card-body class
*/
function loop_card_body_class() {
return "card-body h-100 d-flex flex-column";
}
add_filter('bootscore/class/loop/card/body', 'loop_card_body_class', 10, 2);
/**
* Change loop excerpt card-text class
*/
function loop_card_text_excerpt_class() {
return "card-text small";
}
add_filter('bootscore/class/loop/card-text/excerpt', 'loop_card_text_excerpt_class', 10, 2);
/**
* Change loop read-more card-text class
*/
function loop_card_text_read_more_class() {
return "card-text mt-auto";
}
add_filter('bootscore/class/loop/card-text/read-more', 'loop_card_text_read_more_class', 10, 2);
/**
* Change loop read-more class
*/
function loop_read_more_class() {
return "btn btn-primary d-block";
}
add_filter('bootscore/class/loop/read-more', 'loop_read_more_class', 10, 2);
/**
* Change loop read-more text
*/
function change_loop_read_more_text($title) {
return 'Continue reading <i class="fa-solid fa-arrow-right"></i>';
}
add_filter('bootscore/loop/read-more/text', 'change_loop_read_more_text');
Contents
Spacer
Change entire spacers:
/**
* Change all content spacers
*/
function change_content_spacer($spacer) {
return 'my-5 p-5';
}
add_filter('bootscore/class/content/spacer', 'change_content_spacer');
Change spacer on an single file:
/**
* Change content spacer on an archive page of the post type "product"
*/
function change_content_spacer($spacer) {
if (is_post_type_archive('product')) {
return 'my-5 p-5';
}
return $spacer;
}
add_filter('bootscore/class/content/spacer', 'change_content_spacer');
Hide meta post updated time
/**
* Hide meta post updated time
*/
function disable_updated_time_display($show_updated_time) {
return false;
}
add_filter('bootscore/meta/time/updated', 'disable_updated_time_display');
Hide meta post author
/**
* Hide meta post author
*/
function hide_author_function($display_author) {
return false;
}
add_filter('bootscore/meta/author', 'hide_author_function');
Main col, sidebar and breakpoints
/**
* Change main content col
*/
function change_content_col_size($col_size) {
if (is_active_sidebar('sidebar-1')) {
return "col-md-9 col-lg-8 col-xl-9";
}
return $col_size;
}
add_filter('bootscore/class/main/col', 'change_content_col_size', 11);
/**
* Change sidebar col
*/
function change_sidebar_col_size($col_size) {
return "col-md-3 col-lg-4 col-xl-3 order-first order-md-2";
}
add_filter('bootscore/class/sidebar/col', 'change_sidebar_col_size');
/**
* Change sidebar responsive offcanvas
*/
function change_sidebar_offcanvas($col_size) {
return "offcanvas-md offcanvas-start";
}
add_filter('bootscore/class/sidebar/offcanvas', 'change_sidebar_offcanvas');
/**
* Change sidebar toggler button breakpoint and class
*/
function change_sidebar_toggler($col_size) {
return "d-md-none btn btn-light w-100 mb-4 d-flex justify-content-between align-items-center";
}
add_filter('bootscore/class/sidebar/button', 'change_sidebar_toggler');
Category badge
/**
* Change category badge class
*/
function change_category_badge_link_class($class) {
return 'badge bg-warning-subtle border border-warning-subtle text-warning-emphasis rounded-pill text-decoration-none';
}
add_filter('bootscore/class/badge/category', 'change_category_badge_link_class');
Tag badge
/**
* Change tags badge class
*/
function change_tag_link_class($class) {
return 'badge bg-danger-subtle border border-danger-subtle text-danger-emphasis rounded-pill text-decoration-none';
}
add_filter('bootscore/class/badge/tag', 'change_tag_link_class');
/**
* Remove tag icon
*/
add_filter('bootscore/show/tag/icon', '__return_false');
Comments
Closed comments alert class
/**
* Closed comments alert class
*/
function change_comments_closed_alert_class() {
return "alert alert-warning alert-icon alert-warning-icon";
}
add_filter('bootscore/class/comments/closed/alert', 'change_comments_closed_alert_class', 10, 2);
Closed comments alert content
/**
* Closed comments alert text
*/
function change_comments_closed_text($text) {
return 'Comments are closed. Please join the <a target="_blank" class="alert-link" href="https://github.com/orgs/bootscore/discussions">Discussions forum</a> on GitHub.';
}
add_filter('bootscore/comments/closed/text', 'change_comments_closed_text');
Blocks
Widget search button
/**
* Change searchform block widget button class
*/
function change_block_widget_search_button_class($class) {
return 'btn btn-outline-danger';
}
add_filter('bootscore/class/widget/search/button', 'change_block_widget_search_button_class');
Widget categories badge
/**
* Change widget categories badge
*/
function change_block_widget_categories_badge($block_content, $block) {
$search = array(
'<span class="badge bg-primary-subtle text-primary-emphasis">'
);
$replace = array(
'<span class="badge bg-danger rounded-pill">'
);
return str_replace($search, $replace, $block_content);
}
add_filter('bootscore/block/categories/content', 'change_block_widget_categories_badge', 10, 2);
Table
/**
* Change table block classes
*/
function block_table_class() {
return "table-bordered table-striped table-hover";
}
add_filter('bootscore/class/block/table', 'block_table_class', 10, 2);
Footer
Footer Top
/**
* Footer top classes
*/
function footer_top_class() {
return "bg-success text-white border-top border-secondary pt-5 pb-4";
}
add_filter('bootscore/class/footer/top', 'footer_top_class', 10, 2);
Footer 1-4 wrapper
/**
* Change footer column wrapper classes
*/
function footer_class() {
return "bg-dark text-white border-top border-secondary pt-5 pb-3";
}
add_filter('bootscore/class/footer/columns', 'footer_class', 10, 2);
Footer 1-4 columns
Change all footer columns:
/**
* Change footer 1-4 col
*/
function footer_col_class() {
return "col-12 col-md-6 col-lg-3";
}
add_filter('bootscore/class/footer/col', 'footer_col_class', 10, 2);
Change each footer-column:
/**
* Change footer 1 col
*/
function footer_col_1_class($string, $location) {
if ($location == 'footer-1') {
return "col-6 col-md-12 col-lg-6";
}
return $string;
}
add_filter('bootscore/class/footer/col', 'footer_col_1_class', 10, 2);
/**
* Change footer 2, 3, 4 col
*/
function footer_col_2_3_4_class($string, $location) {
if ($location == 'footer-2' || $location == 'footer-3' || $location == 'footer-4') {
return "col-6 col-md-4 col-lg-2";
}
return $string;
}
add_filter('bootscore/class/footer/col', 'footer_col_2_3_4_class', 10, 2);
Footer info
/**
* Change footer info classes
*/
function footer_info_class() {
return "bg-dark text-white border-top border-secondary py-2 small";
}
add_filter('bootscore/class/footer/info', 'footer_info_class', 10, 2);
To-top button
/**
* Change to-top button classes
*/
function footer_to_top_button_class() {
return "btn btn-light shadow-lg";
}
add_filter('bootscore/class/footer/to_top_button', 'footer_to_top_button_class', 10, 2);
WooCommerce
Grid columns
/**
* Change WooCommerce column class
*/
function change_woo_columns($class) {
return 'col-6 col-lg-4';
}
add_filter('bootscore/class/woocommerce/col', 'change_woo_columns');
Sidebar to left
/**
* Move WooCommerce content to right (Sidebar left)
*/
function move_wc_content_col_to_end($col_size) {
if (is_woocommerce() && is_active_sidebar('sidebar-1')) {
return "col-lg-9 order-lg-last";
}
return $col_size;
}
add_filter('bootscore/class/main/col', 'move_wc_content_col_to_end', 11);
Reviews tab badge
/**
* Change WC reviews tab badge
*/
function change_wc_reviews_tabs_badge() {
return '<span class="badge text-bg-danger">%s</span>';
}
add_filter('bootscore/class/reviews/tab-badge', 'change_wc_reviews_tabs_badge', 10, 2);
Loop out-of-stock badge class
/**
* Change WC loop out-of-stock badge class
*/
function change_wc_loop_out_of_stock_badge() {
return 'badge bg-warning text-wrap mt-2 mb-0';
}
add_filter('bootscore/class/woocommerce/loop/out-of-stock-badge', 'change_wc_loop_out_of_stock_badge', 10, 2);
Disable loop out-of-stock badge
/**
* Disable loop out-of-stock badge
*/
add_filter('bootscore/woocommerce/loop/show-out-of-stock-badge', '__return_false');
Disable Read more button if product is out of stock
/**
* Disable Read more button if product is out of stock
*/
add_filter('bootscore/woocommerce/loop/out-of-stock-remove-read-more', '__return_true');
Disable scripts
Font Awesome
/**
* Disable Font Awesome
*/
add_filter('bootscore/load_fontawesome', '__return_false');
Font Awesome auto-width
/**
* Disable fa-width-auto
*/
add_filter( 'bootscore/class/fa_width_auto', '__return_false' );
AJAX cart
/**
* Disable AJAX cart
*/
add_filter('bootscore/load_ajax_cart', '__return_false');
AJAX login
/*
* Disable AJAX login
*/
add_filter('bootscore/wc_ajax_login', '__return_false');
scssphp compiler
/**
* Disable scssphp compiler
*/
add_filter('bootscore/scss/disable_compiler', '__return_true');
Unsupported blocks and patterns
/**
* Disable unsupported blocks and patterns
*/
add_filter('bootscore/disable/unsupported/blocks', '__return_true');