Tweaking WordPress: How to create a floating paragraph before your post

In this post Brian explains his path to conquer yet another WordPress theme tweaking problem.

A client of mine, unfortunately NOT using the Amazing Grace theme, wanted a certain way of displaying information on his WordPress site. It involved what I now call a 'floating paragraph' above the page title with some introduction text.

The first thing I did was to consult the greatest mind on the Internet when it comes to all web related issues – no, not Vlad – but Google (witty, witty).

I found two really in-depth articles on advanced WordPress styling. Here is the original and here is the follow up.

Now then, to save you two weeks (believe it or not) of trying to understand what goes where, here is the Amazing Grace version of this code and where to put it.

Please note – if you are not a computer whizz kid save all the files you are altering, then you have back-ups for when it goes wrong.

Before we begin, here is what the finished result should look like in Amazing Grace -

Let us begin.

Firstly, open your functions.php file in the theme editor and paste the following code onto the end of the existing code.

 array("name" => "header_paragraph","std" => "","title" => "Header Paragraph:",

"description" => "This is the large floating paragraph just below the header area.", "type" => "text"),

);

function new_meta_boxes() {

global $post, $new_meta_boxes;

foreach($new_meta_boxes as $meta_box) {

$meta_box_value = get_post_meta($post->ID, $meta_box['name'].'_value', true);

if($meta_box_value == "")

$meta_box_value = $meta_box['std'];

echo'';

if($meta_box['type'] == "text") {

echo'

'.$meta_box['title'].'

'; echo'

'; echo'
'; } elseif ( $meta_box['type'] == "textarea" ) { echo'

'.$meta_box['title'].'

'; echo'

'; } } } function create_meta_box() { global $theme_name; if ( function_exists('add_meta_box') ) { add_meta_box( 'new-meta-boxes', 'Extra Page Styling', 'new_meta_boxes', 'page', 'normal', 'high' ); add_meta_box( 'new-meta-boxes', 'Extra Page Styling', 'new_meta_boxes', 'post', 'normal', 'high' ); } } function save_postdata( $post_id ) { global $post, $new_meta_boxes; foreach($new_meta_boxes as $meta_box) { // Verify if ( !wp_verify_nonce( $_POST[$meta_box['name'].'_noncename'], plugin_basename(__FILE__) )) { return $post_id; } if ( 'page' == $_POST['post_type'] ) { if ( !current_user_can( 'edit_page', $post_id )) return $post_id; } else { if ( !current_user_can( 'edit_post', $post_id )) return $post_id; } $data = $_POST[$meta_box['name'].'_value']; if(get_post_meta($post_id, $meta_box['name'].'_value') == "") add_post_meta($post_id, $meta_box['name'].'_value', $data, true); elseif($data != get_post_meta($post_id, $meta_box['name'].'_value', true)) update_post_meta($post_id, $meta_box['name'].'_value', $data); elseif($data == "") delete_post_meta($post_id, $meta_box['name'].'_value', get_post_meta($post_id, $meta_box['name'].'_value', true)); } } add_action('admin_menu', 'create_meta_box'); add_action('save_post', 'save_postdata'); ?>

This has now created a new way to enter text when you create a page or post -

We will look at the styling of the 'floating paragraph' below.

Now, using a plain text program make a new document with the following code and save as 'head-para.php' - make sure it hasn't been saved as 'head-para.php.txt' - then upload into the Amazing Grace theme folder with the other php files.

ID, 'header_paragraph_value', $single = true); ?>

Next, open 'index.php' in the theme editor and add this line immediately below <div id=”content”> -

<?php if (get_post_meta($post->ID, 'header_paragraph_value', $single = true)) include ('head-para.php'); ?>

Ok, we are nearly finished.

Finally we style the final text output. So open the stylesheet in the theme editor and add the following lines (to keep it all consistent put it below #content ) -

#header-para

{

text-align:center;

border: 1px solid #b0b0b0;

padding: 5px;

background: #dfdbab;

font-weight:bold;

}

This styling says “the text is aligned in the center, the box has a solid border all the way round and has the color 'whatever', there is padding pushing the text in from the edge of 5px, the main color of the box is 'whatever', and the text is bold”.

To change this simply learn the basics of CSS and do whatever you wish. Those of you with Blue Grace will want to change the 'background' to #3b6277.

So there you have it. When ever you create a post/page and add text in the extra panel provided it will show up above the page/post title. Here is a live demo for you all to see on a site using Amazing Grace – Why Travel to Santiago


More like this:


Posted in: WordPress
TAGS:, , , , , , , , , , , , , , ,
Both comments and trackbacks are currently closed.

9 Comments

  1. Wordpress Brian
    Feb 8th, 2010 4:44 PM

    Hi everyone - and more specifically to you Mac_Boy,

    Just to let you know -

    I choose to go for 'custom fields' as opposed to 'excerpts' because this piece of code was only the beginning of a larger puzzle.

    The customer had a travel website and wanted to display all-sorts of information at various points around his site - as you can image a travel company having.

    By using 'custom-fields' I was able to call on the 'keys' and the 'values' at a later date to make pages dynamically.

    For example - if the 'key' for this display box was 'forthcoming trips' and he entered dates on individual pages, that means I could make him a page called "All Upcoming Trips" that was 'self building' by displaying the appropriate 'key' and 'value' by using 'get_post_custom_values' and 'get_post_custom_keys'.

    Please excuse my poor terminology, it was a while since I made this particular modification.

    Also, I tried various plugins to get the job done, but none did exactly what I wanted and one clashed with Cforms ii and the site went down (I opted for the Cforms plugin due to all the enquiry forms on the website). Always remember the less plugins a site has the better.

    Hope this clears things up.

    • Mac_Boy
      Feb 8th, 2010 4:54 PM

      @WordPress_Brian thank you for the explanation. I'd love to see that client's web site.

      Personally, I prefer using plugins because the functionality is not locked-up in a theme's functions.php file. That allows me to change themes for looks and also for problem solving.

      Yes, plugins can conflict with each other and cause problems with functionality and with CSS.

      For custom coding, I recommend following Vladimir's book and write your own plugins instead of adding more code into functions.php you'll also gain portability by being able to reuse those plugins for other clients.

      • Wordpress Brian
        Feb 8th, 2010 5:47 PM

        Hey Mac_Boy, thanks for the input.

        Despite my appearance on Vlad's site and the technical issues of the code above (and my fancy comment) I still have much to learn. Your points are well made (and have sunk in for future reference) and I will eventually have to learn how to make plugins from some of these more lengthy code additions.

        I was actually going to download Vlad's book in Ebook format soon (I live in Chile, might take a while to arrive in the normal post).

        Anyway, thanks again.

        • Feb 8th, 2010 5:52 PM

          I think Brian's idea was well worth it and is flexible. It also shows a thought process of someone combating with a particular issue in WordPress and as such is valuable to a wide public.

  2. Feb 8th, 2010 3:32 PM

    I would have gone with a MUCH simpler process.

    Using the "more fields" AWESOME plugin:

    Create a new edit box. Let's call it "Floating Paragraph." We'll add two new input fields fields: A checkbox called "Using Floating Paragraph?" (Key: "FloatOnOff") and a text area called "Floating Paragraph Text" (Key: "FloatText").

    Go into the single.php template (or wherever else you want this to show up), and inside the loop, just before the code that creates the title, insert:

    That's it. Go add some css, and spend two weeks doing something else.

    • Feb 8th, 2010 3:41 PM

      it removed my code snippet... argh

      I used the code tag...
      Do we use the pre tag?

      Here it is again:

      
      
      
      
      
      

      And, just in case, here it is, with all the angle brackets removed.

      ?php if ( get_meta(FloatOnOff) == on ) { ?
      div class="FloatParagraph"
      ?php meta(FloatText) ; ?
      /div
      ?php } ?

      Anyway, the end resulting functionality is basically the same, but using the excellent "More Fields" plugin to automatically do what you spent a whole lot of time and coding doing. I guess if you're anti-plugin-clutter (or pro-hand-writing-a-lot-of-geeky-code), your way is better. But this is how I would do it (in fact, I've used this basic tool for dozens of similar applications).

      • Feb 8th, 2010 3:43 PM

        Its eating it even with your pre tag, I'll have to check. Email me the full code please vprelovac@gmail.com

      • Wordpress Brian
        Feb 8th, 2010 5:49 PM

        Hi Adam, I think it was this plugin you mentioned that clashed. Was unfortunate but I learned loads by doing it the manual way.

  3. Mac_Boy
    Feb 6th, 2010 5:31 PM

    I had done a simpler method for a client by using the 'excerpt' field for pages. A simple IF-THEN-ELSE was put into page.php Then I used a page-excerpt plugin to get the excerpt field to show up on the create-edit page screens.

    Your method is quite complex in comparison. It helped me learn alternative methods!

    Thanks for sharing.