SwiperJS outside the Bootstrap container

Place the following CSS in the project:

.swiper-overflow-container {
    overflow-x: hidden;

    .container {
        overflow: visible;
    }

    .swiper-container {
        overflow: visible;
    }
}

The HTML could be like:

<div class="swiper-overflow-container">
    <div class="container">
        <div class="swiper-container">
            <!-- Required wrapper -->
            <div class="swiper-wrapper">
                <!-- Slides -->
                <div class="swiper-slide">
                    <div class="item">
                        <p>First slide</p>
                    </div>
                </div>
                
                <div class="swiper-slide">
                    <div class="item">
                        <p>Second slide</p>
                    </div>
                </div>

                ...
            </div>
        </div>
    </div>
</div>
                        

Hide admin bar with a simple GET parameter

WordPress gives your website by default an Admin bar when logged in. Sometimes you just want to see a page without the admin bar. You can open the page in a incognito tab, but you can also just add ‘?nobar‘ to your url.

To let this work, you need to add the following code to your functions.php

if (isset($_GET['nobar'])) {
    add_filter('show_admin_bar', '__return_false');
}

Example for the url would be: https://domain.tld/?nobar

How to update WordPress site urls properly

Run the following SQL query to update your WordPress database with a new site url.

UPDATE wp_options SET option_value = replace(option_value, 'OLD_URL, 'NEW_URL') WHERE option_name = 'home' OR option_name = 'siteurl';
UPDATE wp_posts SET guid = replace(guid,  'OLD_URL, 'NEW_URL');
UPDATE wp_posts SET post_content = replace(post_content,  'OLD_URL, 'NEW_URL');
UPDATE wp_postmeta SET meta_value = replace(meta_value,  'OLD_URL, 'NEW_URL');
UPDATE wp_options SET option_value = replace(option_value,  'OLD_URL, 'NEW_URL');

It’s also possible to download a stand-alone project for this called Database Search and Replace.

Update WordPress login page logo

Set your custom logo to a WordPress login page. You can do this easily by adding the following code to the functions.php.

function my_login_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/site-login-logo.png);
		height: 65px;
		width: 320px;
		background-size: 320px 65px;
		background-repeat: no-repeat;
        	padding-bottom: 30px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );

You can read more about editing the login page on this url.

Remove welcome panel from dashboard

It’s very easy to –permanent– remove the welcome panel from the dashboard. You can do it with this one single line. Place it in your functions.php

remove_action('welcome_panel', 'wp_welcome_panel');

wp_nav_menu title

It’s easy to add a menu to your WordPress theme. It’s also easy to add the menu title.. You just got to know it 😉

// Add menu title to the template
echo "<h2>" . wp_get_nav_menu_name('nav-menu') . "</h2>";

// Add menu to the template
wp_nav_menu(
  array('theme_location' => 'nav-menu')
); 

Simple z-index

A while back I came across some nice z-index articles. When using a z-index I mostly give it a high value. But what if we have a couple of z-indexes with high values…

With the following code it’s possible to have a good overview of all the elements which will be using a z-index.

$z-index: (
    modal              : 200,
    share              : 150,
    navigation         : 100,
    footer             : 90,    
);

@function z-index($key) {
    @return map-get($z-index, $key);
}

@mixin z-index($key) {
    z-index: z-index($key);
}

Scroll margin top

With scroll-margin-top it’s possible to automatically scroll before the selector.

h3 {
  scroll-margin-top: 100px;
}