How to: add an alert box on the front page

juggledad · #1 Oct 7, 2015, 05:51 AM

I've had several cases where a client wants to have an alert show up on the front page -like a 'No School" announcement. Here is how to do it.

1) make sure you have the plugin 'exec-php' installed
2) go to MTO->Main Templates->+ Add main template
3) enter the name 'front-page' and copy 'index' and add the new template
4) edit the new 'front-page.php'
5) right after the line

HTML Code:

<?php get_header(); ?>

add

HTML Code:

<div id="fp-announce">
    <?php dynamic_sidebar( 'front page alert' ); ?> 
</div>

and press the 'SAVE Changes' button
6) go to Appearances->Widgets and you should see a new widget area 'front page alert'
7) add a text widget to the new widget area and insert the following code into it

HTML Code:

<?php 
# ================================================ 
#      CODE for announcement on front page box       
# ================================================ 
if ( is_front_page() ) { 
		$my_query = new WP_Query('category_name=announcement&showposts=1' );
		while ($my_query->have_posts()) : $my_query->the_post(); ?>
		<div class="announce row">
				<br/>
			<h3 style="text-align: center; color: #797C00;">Special Announcement</h3>
				<?php the_content(); ?>
				<br/><br/>
		</div>
		<?php endwhile; 
} 
# ================================================ 
#   end of CODE for announcement on front page box       
# ================================================ 
?>

8) go to MTO->CSS Files->various.css - scroll to the bottom and add the following

HTML Code:

div#fp-announce {background-color: yellow; margin-bottom: 0px;}

9) add a new category (posts->category) called 'annoucement'

Now when you want an annoucement to show on the front page, just create a post and give it the category 'annoucement' and it will show up. You can change the background color in the CSS to what ever you want.

NOTE: give the post a date of a year ago so it won't show up on the first page of your posts in addition of being on the front page.