Simple way to hide\show an announcement (just a div) on homepage?

Question

In wordpress, in a particular page that is used as the homepage i have a section of HTML used for an announcement. I am wanting to enable someone to easily customize this section from the dashboard, as well as turn it on/off.

The Requirements:

• Only this 1 announcement will ever exist (no need to show multiple)
• Inside the H3 section the user can edit the text
• Allow the user to change the "Learn More" button text
• Allow the user to specify the button URL

Initial Approach:

• Plugin registers a post_type of "announcements"
• Add a meta_box to contain the on/off switch, url and button text
• Use the content of the post as the data inside the announcement

Now, Problems Start:

• Is there something specific i am doing that is hurting performance?
• Is there an easier way to do this without an entire custom plugin?
• On the front-end, since i just register a custom shortcode?
• will this code even execute on pages without the shortcode?

My plugin code is below, or take a look at the complete code

Complete Plugin Code (https://pastebin.com/N5BgUSqa)

<section class="d-none mt-n7 p-0 position-relative mb-5" style="z-index:999;">
    <div class="container">
        <div class="d-block d-md-flex bg-dark-grad p-4 p-sm-5 all-text-white border-radius-3">
            <div class="align-self-center text-center text-md-left">
                <h3 class="mb-0">Placeholder For Special Offer or News (Shown When Activated)</h3>
            </div>
            <div class="mt-3 mt-md-0 text-center text-md-right ml-md-auto align-self-center">
                <button class="btn btn-white mb-0">Learn more!</button>
            </div>
        </div>
    </div>
</section>

Relevant parts of my plugin custom-announcements.php

Register the custom post type:

$args = array(
    'labels' => $labels,
    'singular_label' => __('Announcement', 'custom-announcements'),
    'public' => true,
    'capability_type' => 'post',
    'rewrite' => false,
    'supports' => array('title', 'editor'),
);
register_post_type('announcements', $args);

Configure the metabox:

add_action( 'add_meta_boxes', 'ca_add_metabox' );

function ca_metabox( $post ) {
    $values = get_post_custom( $post->ID );
    $banner_enabled = isset( $values['ca_banner_enabled'] ) ? esc_attr( $values['ca_banner_enabled'][0] ) : '';
    $button_url = isset( $values['ca_url'] ) ? esc_attr( $values['ca_url'][0] ) : '';
    $button_title = isset( $values['ca_button_title'] ) ? esc_attr( $values['ca_button_title'][0] ) : '';
    wp_nonce_field( 'ca_metabox_nonce', 'metabox_nonce' );

Function that wires up the shortcode to display announcement:

 function ca_announce(){
  global $post;
  $html = '';

  $ca_a = new WP_Query( array(
       'post_type' => 'announcements',
       'posts_per_page' => 1,
       'meta_query' =>  array(
                         array(
                           'key' => 'ca_banner_enabled',
                           'value' => 'yes'
                          )
                        )
  ));

  if( $ca_a->have_posts() ) : while( $ca_a->have_posts() ) : $ca_a->the_post();
        $html .= '<section class="mt-n7 p-0 position-relative mb-5" style="z-index:999;">';
         $html .= '<div class="container">';
         $html .= '<div class="d-block d-md-flex bg-dark-grad p-4 p-sm-5 all-text-white border-radius-3">';
         $html .= '<div class="align-self-center text-center text-md-left">';
         $html .= '<h3 class="mb-0">' . get_the_content()  . '</h3>';
         $html .= '</div><div class="mt-3 mt-md-0 text-center text-md-right ml-md-auto align-self-center"><button class="btn btn-white mb-0">';
         $html .= get_post_meta($ca_a->ID, 'ca_button_title', true );
         $html .= '</button></div></div></div></section>';
         $html .= '';
         $html .= '';
  endwhile; endif;
  return $html;
 }

 add_shortcode( 'ca', 'ca_announce' );

Answer 1

The fastest and easiest way would be to use Advanced Custom Fields Pro (ACF) to create a custom metabox for your announcement. They have a resources page with lots of examples for you to pick from, and even more recipes available from community contributions. Tuts Plus has a great tutorial for getting started with ACF.

In my case, I also created an "Enable/Disable" button to turn the ACF field off, when I didn't want it. So, on pages where I need a Google Map, I enable the ACF field for Google Maps, and enter my mapping coordinates into a list of fields.

ACF has a "builder" to help you create all the fields and conditions you need. This includes being able to specify pages/posts/CPTs to display your content, as well as users/roles permitted to modify it. There is also an exporter, which provides all the code you need to add features into your theme.

I am not affiliated in any way with ACF, nor any company, relative, or friends related to ACF and/or its affiliates.

I have built tons of customizations for dozens of web sites using only ACF. It has saved me LOADS of hours and headaches.