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 ()
<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' );
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/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' );
1 Answer
Reset to default 0The 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.