How to create a Custom Disruption Message in WordPress

Written by Advanced Custom Fields, Wordpress Tutorials

Sharing is caring!

Hey, another WordPress Tutorial!

In today’s WordPress tutorial, we’ll be creating a custom website service/technical disruption message for when your website or business is having issues and you want to let your customers and/or website visitors know that services may be affected, this may come in handy if the services you provide are not running as normal due to COVID-19 or for whatever reason and you just want to display a website message for your visitors.

As shown in the video, here’s all the code I’ve created for this tutorial.

functions.php code to add in the new WordPress options page.

// Add Options Page
if ( function_exists('acf_add_options_page') ) {


    acf_add_options_page(array(
        'page_title'    => 'Service Disruption',
        'menu_title'    => 'Service Disruption',
        'menu_slug'     => 'service-disruption-settings',
        'capability'    => 'read',
        'redirect'      => false
    ));


    the_field('header_title', 'option');

}

Then place this code where you want to display the message, in this tutorial I placed it in header.php, this is using the ACF (Advanced Custom Fields) True / Flase field type.

<?phpif (get_field('activate_service_disruption', 'option')) : { ?>
 <divclass="disruption-message">
   <divclass="container">
      <divclass="dmessage">          
          <?php the_field('custom_disruption_message', $post_id ="options"); ?>
      </div>
   </div>
 </div>
<?php } endif ?>
Then we needed some styling, which I placed in the style.css which of course, you can change the styling to how you want. But the code I used was just basic CSS for this example, without the use of Less/Sass
/* Disruption Message */
.disruption-message {
    width: 100%;
    background: #FFE169;
}
.dmessage p {
    font-size: 2rem;
    color: #000;
    text-align: center;
    padding: 1rem;
}

Hope this tutorial helped you in some way, if it did, feel free to give the video a like and subscribe for future videos. Also, if you have any issues just leave a comment below.

(Visited 45 times, 1 visits today)
shares