[ Read how to show New Year Countdown on your WordPress blog's frontpage using this plugin ]

Let’s take a example: How to show Today’s date on WordPress FrontPage  using PHP, to get the date using PHP we need to use PHP date function. PHP Date Manual

Here is the code to show the date

<?php
echo 'Welcome Today is  '.date("d/m/Y");
?>

Enable PHP in ‘FPB Settings’ and paste the above PHP code in custom code. See the below screen-shot how it will be

And here How it may look on your blog, remember by default it will override theme’s stylesheet settings. We can define our own style sheet using Custom Style Sheet.

To use custom style sheet, you need to have a basic knowledge of CSS. There is a simple tutorial available at w3schools.com, I have also started from there only.

Wordpress FrontPage Banner plugin by  default allow you to have two styles  Plain,  Media.

Following is the default CSS, which works behind the scene .

<style>
.fpb_media
{
padding: 5px;
margin: 5;
}
.fpb_plain
{
background: #F3F3F2;
padding:5px;
margin:3px;
border:1px solid #E3E1DB;
}
</style>

Let me break the code the very first <style> tag is used to start the definition of style sheet.  .fpb_media and .fpb_plain are CSS classes which are selected as per your input.

.fpb_media class only defines padding and margin as there is no need to change the background as well as border while using images, adsense or any other media.

.fpb_plain class adds background and border to isolate textbanner/ announcement, it helps to get attention from viewer.

Remaining all of the classes and style’s are inherited from your theme’s style sheet.

In order to use Custom Style Sheet, first enable Custom Style Sheet from plugin configuration panel and put CSS code in text-area and We are done.

Let me give you a example:  I want to use announcement on my blog and the heading color should be Red with the text size of 24px and the block background should be Gray and the text color should be White and the border of box should be thick.

First set Plain as default style sheet and enable Custom Style Sheet and enter the following code

<style>
.fpb_plain
{
background: #828282; /*color code for gray*/
padding:5px; /* this padding and margin is fine */
margin:3px;
border:5px solid #E3E1DB; /* box border size and color*/
}
.myheading /* to change heading style as by default it inherits theme*/
{
color:#FF0000; /* red color */
font-size: 24px /* change font size */
}
.mytext /* to change text */
{
color:#ffffff;
}
</style>

We are done with  Style Sheet, now we need some tweaking in our custom code. The code should now use this style sheet, let see how it would be.  I  am taking the same code which I have used in Announcement Configuration tutorial, we need minor changes in it.

<h2 class="myheading">Announcement</h2>
<p class="mytext">Welcome to my blog, this is announcement area here you will see latest notes, competitions information. Keep watching</p>

see the below Screen-shot, how these settings looks  in configuration panel.

And here how it looks on blog’s front-page.

If you find any problem in using this method or if you have any queries, feel free to comment here

Please refer Help Docs to Know How to use this plugin.

Change Log

Version 1.1 – Release Date: Dec 22, 2009

• Supports PHP Execution
• Fixed Random number display

Version 1.0 -  Release Date : Dec 20,2009

• HTML/JavaScript or any other custom code
• Known Bug : Random Number Display when Custom Style Sheet enabled

You can comment in this post for any questions, suggestions, bug report or any other help related to WordPress FrontPageBanner Plugin

Here you go it’s done, see how it will look on your blog.

As we want to display announcement, so here just select the ‘Default Style’ as ‘Plain’, Now in configuration code simply insert the following code

<h2>Announcement</h2>
<p>Welcome to my blog, this is announcement area here you will see latest notes, competitions information. Keep watching</p>

see the below screen shot that how it will be.

Let me explain it, ‘h2′ is a HTML heading tag, there are so many others and it starts from ‘h1′. Here I have used ‘h1′ is mainly used for blog titles and using more ‘h1′ confuse search engines and break your SEO. The second tag is ‘p’ which is used for paragraph so it simply put the enclosed text in paragraph.

see how it will look

Note: This plugin inherits all the CSS style sheet from the current WordPress theme so the look may vary as according to theme. Don’t worry in coming tutorials I will discuss how you can override it as per your need.

First configure the adsense in Google adsense panel as per your requirement and then copy the code for your adsense. Now select ‘Media’ as ‘Default Style’ in plugin’s configuration panel and paste the code in ‘Custom Code’, you are done.

Below is the screen-shot, how it may look on your blog.