We have seen more and more posts in the Artisteer Forum about the page heading using valuable page ‘Real Estate’ and asking how to delete the heading, thinking about this issue we thought how we might utilize this space and put it to work.

The heading is a part of the page where the viewer attention is focused when the page loads, at the moment they only see the page title and a lot of space, we want to sell our website to the viewer so what better use of this space than our own marketing needs, we will use a random quote plugin to present the content.

Random Quotes

We looked at a number of plugins for WordPress to deliver random quotes, we wanted one we could use in code as well as in a sidebar widget and we found this one.

Stray Random Quotes looked to be the best plugin for what we wanted to achieve, having a plugin, short codes that can be added into a post, categories for our quotes, code options for our template pages, accepts html tags, ajax enabled, etc:

Download the plugin or install it from your admin page, Plugins > Add New > Search (‘Stray random Quotes’) > Install, add a few quotes for testing from the left admin column and Quotes.

You may need to use escape code in the quote content, replacing ‘ with '  don’t might save as don/’t change to don't

This happened to the quote in the screenshot below, there is a full list of codes here at The UK web Design Company 

Demo View here for the Random Quotes

Functions.php

What we will do to make it easy to add a quote to our templates is to add a function to functions.php to which we can pass in a category or quoteID to filter our quotes or just get any random quote, open the functions.php file and add this code

/* Start function to return a quote using Stray Random Quotes */
function cms_get_quote($category,$quoteID){
    if (function_exists('stray_random_quote')){
        if($quoteID){
            stray_a_quote($quoteID,'',false, false);
        }else{
            stray_random_quote($category,false,'',false,1,10,'quoteID','ASC', false, '');
        }
    }
}
/* End function to return a quote using Stray Random Quotes */

Style.php

Next we will add some styles to hold our quotes, change the values here to suit your own theme, it is good practice to have a local test environment, failing that have a test installation online.

The first style block is the main container for our page title, there is nothing to change in this block for your theme.

/* Start Box, quote */
.cms-quote
{
  margin: 0 auto;
  min-width: 1px;
  min-height: 1px;
  margin-bottom: 10px;
  width: 100%;
  overflow: hidden;
}
/* End Box, quote */

This section is the container for our page title, you may need to adjust the padding and width here for your theme.

/* Start Page Title, quote */
.cms-quote .cms-quote-left
{
  float: left;
  padding-top: 15px;
  padding-right: 15px;
  width: 15%;
}
/* End Page Title, quote */

This next section is the container for our quotes, you may need to adjust the colors and widths here for your theme.

/* Start Quote Area, quote */
.cms-quote .cms-quote-right
{
  float: left;
  color: #3B7DB0;
  text-align: center;
  padding: 5px;
  width: 70%;
  height: 50px;
  overflow: hidden;
  border: 1px solid #e0e0e0;
}
/* end Quote Area, quote */

Page.php

The last file we need to change is the page.php, you may want to add the code to any templates you have made, single.php is another page that shows a single post from a category.

The new code will go after the line <div class=”art-post-inner art-article”>, we will add lines 01 to 16 and lines 22,23, save the file and test.

<!-- End Random Quote support -->
<?php if (function_exists('stray_random_quote')) : ?>
<div class="cms-quote">
<div class="cms-quote-left">
   <h2 class="art-postheader">
   <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php printf(__('Permanent Link to %s', 'kubrick'), the_title_attribute('echo=0')); ?>">
   <?php the_title(); ?>
   </a>
   </h2>
   </div>
   <div class="cms-quote-right">
   <?php cms_get_quote('','') ?>
   </div>
</div>
<?php else : ?>
<!-- end custom code  -->
<h2 class="art-postheader">
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php printf(__('Permanent Link to %s', 'kubrick'), the_title_attribute('echo=0')); ?>">
<?php the_title(); ?>
</a>
</h2>
<?php endif; ?>
<!-- End Random Quote support -->

Different Options

The plugin has a help page which explains the settings for the plugin, the section about adding quotes to templates has the code calls that we used in functions.php, you could change some of the defaults if you wanted to.

The function we created has two values you could pass in, <?php cms_get_quote(‘category’,'quoteID’) ?> you can use these on page templates or in your theme parts.

If you want the option the use long quotes in posts or using the plugin then you can do the following, create a quote category lets say ‘pages’ then change the call in page.php to

<?php cms_get_quote(‘pages’,”) ?>

You may have a template for the support page and want to show only support page quotes, <?php cms_get_quote(‘support’,”) ?>, or just a single quote using the quote id

<?php cms_get_quote(”,’7′) ?>

Notice

Code disclaimer information
This document contains programming examples therefore, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code examples from which you can generate similar function tailored to your own specific needs.

All sample code is provided by www.DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.

Membership

We hope you will benefit from our tutorials Membership to this website is not required, however the downloading of any themes or files is restricted to site supporters.

You can register for a 10 year ‘Free Account’ from the members page which will give you access to the source files and free themes, as we introduce premium themes and content these will only be downloadable with a subscription, any revenue from subscriptions is used to support the site costs.

this website is a tool to support and promote WordPress and Artisteer, please support, share and give credit for any benefits you gain from the tutorials on this website.