Tag Archives: wpfpbhelpdocs

Help docs and Tutorials for Wordpress FrontPageBanner Plugin

WordPress Front Page Banner – Advance Tutorial [Enable PHP]

By

In earlier part of the tutorial, I have explained  how to use Custom Style Sheet and other basic configuration tutorials. In this tutorial I will give you a basic idea on how to use PHP with WordPress Frontpage Banner Plugin.

[ 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.

WordPress Front Page Banner – Advance Tutorial [Custom Style Sheet]

By

In previous tutorials,  I have explained the basic configuration for WordPress FrontPage Banner plugin. In this tutorial, I will explain you how to use 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

WordPress FrontPageBanner Support

By

This is a support page for WordPress FrontPageBanner Plugin.

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

How to use WordPress Front Page Banner Plugin – [ Part 5 - Configuration]

By

In earlier parts of this tutorial, I have showed you how to insert adsense, announcements and YouTube video in WordPress Frontpage using this plugin. In this part I will  explain you how to insert affiliate/referral links to your WordPress front page using FrontPageBanner Plugin.

Click on ‘FPB Settings’ and open the configuration panel. Now select ‘Media’ as default style. Now get your code from sites, here I got it from http://spreadfirefox.com and simply paste it in custom code section. Here we go

Here you go it’s done, see how it will look on your blog. Use it to insert anything like Webhosting referral  links or ads from buysellads.com to your WordPress blog’s frontpage. Charge advertiser more for giving them this prime space in your blog.

How to use WordPress Front Page Banner Plugin – [ Part 4 - Configuration]

By

In earlier parts of this tutorial, I have showed you how to insert adsense, announcements. In this part I will  explain you how to insert Video’s to your WordPress front page using FrontPageBanner Plugin.

Click on ‘FPB Settings’ and open the configuration panel. Now select ‘Media’ as default style. Now get your embed video code from video sites like Youtube and paste it in insert code section as shown in screen-shot.

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