$100 USD prize - rtPanel Header Mods

I’m putting up a $100USD bounty to be paid via PayPal for whoever can fully resolve my problem. I’d prefer to make a $100 contribution to rtCamp through the widget on my site’s control panel if a staff member can help me out. But any enterprising, competent individual is welcome to do the work and collect.

I write the blog TimelessFinance. I use rtPanel as my website’s theme. It’s an excellent theme. It’s simple and effective. The theme was made even more elegant by last month’s update. rtPanel does basically everything I want. For example, it generates great homepage excerpts with picture thumbnails. It also has a short header.

On that last point: I am loath to waste space in the header. The header in rtPanel is short, but underused. I’d like to use the header more efficiently. This will clear up some prime sidebar space for other purposes.

Here’s an image of my current site (or you could just go to the actual website, TimelessFinance.com)

And here’s an image of how I’d like my site to look (“desired state”).

rtCamp has prepared some instructions for playing around with the header, particularly regarding Google ads (for example, http://rtcamp.com/blog/add-google-adbanner-logo-rtpanel/ and http://rtcamp.com/blog/add-googleadsense-link-unit-header/). The problem, for me, is that I’m a total noob when it comes to web design – PHP, CSS, whatever. When I read those instructions, I was completely confused and too afraid to take a stab at the problem.

BUT with specific, clear directions I’m sure I can make the necessary edits. Here’s what you have to work with:

  1. I have rtPanel Child installed, so I can access “Custom Theme Options” under Appearance // rtPanel.
  2. I installed the “Hooks” plugin so I can also access that if needed (Appearance//rtPanel//Hooks).
  3. I can access the Editor in WordPress to edit style.css, or any of the .php files, for rtPanel or rtPanel Child. I haven’t modified either rtPanel nor rtPanel Child, so it should be easy to give me instructions off the default rtPanel install.

Here’s textual information on the “desired state”: 1. The design can’t waste any vertical header space. 2. It needs to look decent. No graphic design involved, but it needs to be reasonably laid out. Generally, stuff should be aligned. Right and left alignments preferred. Again, no graphic design required, but it can’t look awful. 3. If the code references an element that is copy pasta, e.g. Google Ads, a social media link, or my Feedburner chiclet, then it’s fine to say “PUT TWITTER LINK HERE” or “PUT GOOGLE AD CODE HERE”. Just don’t assume I know how to create a Feedburner email form or how to replicate the rtPanel’s social media bar. Cause I don’t. 4. The Search Box in the menu line – I don’t require that the Search box has a button beside it that says “Search”. In fact, I’d rather NOT have the button. I’d rather have text inside the search box instead (e.g. “Search TimelessFinance”), and when the user clicks on the search text field, the default text disappears. Either way is OK. 5. The Google Ad – I’d prefer the layout I’ve depicted in the picture (a 468 x 60 size, “Banner”). If you have a really stunning solution that works for “Leaderboard” (728 x 90) and doesn’t vertically expand the header at all (horizontal would be OK) then that’d be awesome since the Leaderboard is the most popular format for advertisers. 6. The Social Media icons – I like the rtPanel widget. It’s very attractive. Please ensure your solution includes WHERE I place each of my 5 social links, e.g. “PUT TWITTER LINK HERE”. I’ve pictured these icons at the top right of the header, but it’d be fine if they were bottom right. I only need the five icons depicted. 7. The Feedburner chiclet and e-mail form – this is probably the item that I’m most flexible about. If you can fit them in the middle of the Google Ad and social media bar, that’s fine. Can you fit them under the “social media bar” without wasting too much vertical header space? Cool! Heck, if you want to put a place on the right side of the menu for the chiclet, that’s fine. Just explain it all in excruciating detail.

I need a complete, comprehensive, stable solution for the above header modifications. I’ll award the $100 USD prize to the first correct solution posted on this board. That solution could be in one of two forms: 1) A complete set of instructions, telling me how to modify the PHP, CSS, Hooks, and/or Custom Theme Options to create the changes as reflected in the “desired state” image/list. I’d prefer if you could separate the instructions for each element (i.e. search, Google Ad, social media bar, and Feedburner form/chiclet), but that’s not essential. Now I need to stress: I AM A NOOB. I need clear instructions, e.g. “Go to the Editor. Under the rtPanel Child theme, edit ‘rtp-custom-theme-options.php’. Insert ‘xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx’ below all the other text.” Crystal clear instructions. Don’t assume I understand anything more than the basics of the WordPress interface. Sloppy, unclear instructions don’t win the prize. I’ll try to ask questions so you can improve your instructions but I’m an idiot so my help will be largely useless. 2) A modified rtPanel Child for me to install that reflects the “desired state” image/list, so long as I also get instructions on where/how to add my GoogleAds script, the social media links, and the Feedburner code. (If you could widgetize the header in a manner where I could simply insert the relevant widgets/text boxes that’d be fantastic, but I assume this would be a ton more work). I realize that I could go to a developer for a custom theme. But I don’t need a custom theme OR gorgeous custom graphics. I JUST want rtPanel with a modified header. It’s not that I have anything against paying a developer. My blog just doesn’t produce enough to justify $400+ for a custom theme. If my blog was an extremely profitable business, of course I’d invest the money. The reality, however, is that it’s not. Hence the $100 bounty. I hope it’s enough to encourage participation, since the outcome will be a great open source header mod that will make rtPanel even more versatile.

Feel free to ask me questions on here, or by email at [email protected]. Also, if you want feedback on a list of instructions or on a theme you’re working on, but you don’t want them released to the public yet, send them to [email protected] and I’ll keep them private (unless and until you win!)

In the end, I don’t want a private set of instructions. I’d prefer the solution to be “open source” insofar as it’s made available to the public on this forum or by download (e.g. on Wordpress’ themes listing). Actually, I’d also love to host the resulting code or theme!

Thanks all!

  • Joe

Hello Joe.

Below is the solution:

Add these lines in child themes style.css

  
#header {  
   width:400px;  
   float:left;  
}  

#rtp-child-top-right-sidebar{  
    float:right;  
}  

#rtp-child-below-heading-sidebar{  
    clear:both;  
    margin-left:10px;  
}  

Add these lines in child themes functions.php

  
function rtp_child_custom_sidebars_display(){  
    ?>
<?php dynamic_sidebar('rtp-top-right-sidebar'); ?>
<?php dynamic_sidebar('rtp-below-heading-sidebar'); ?>
<?php } add_action('rtp_hook_after_header','rtp_child_custom_sidebars_display'); function rtp_child_custom_sidebar(){ register_sidebar(array( 'name' => __( 'Top Right Sidebar' ), 'id' => 'rtp-top-right-sidebar', 'description' => __( 'Widgets in this area will be shown on the Top right side of the page' ), 'before_title' => '

', 'after_title' => '

', 'before_widget' => '
', 'after_widget' => '
' )); register_sidebar(array( 'name' => __( 'Below Heading Sidebar' ), 'id' => 'rtp-below-heading-sidebar', 'description' => __( 'Widgets in this area will be shown below the heading' ), 'before_title' => '

', 'after_title' => '

', 'before_widget' => '
', 'after_widget' => '
' )); } add_action('widgets_init','rtp_child_custom_sidebar');

This will create two sidebars at the locations you’ve mentioned and you can put any widget in there using the widget section from the widgets menu, if you need any custom styling, please let us know.

Cheers!!

Hey guys,

I did the edits recommended – although I see at least one more person (Rahul) has modified it since I made the changes to my site. Since I’m going to bed I won’t have a chance to put in the latest code (I’m going to revert my site til I wake upbut I wanted to show you the results and the edits that remain. Here’s a screenshot:

http://www.timelessfinance.com/wp-content/uploads/2012/07/remaining-changes.jpg

First off, excellent work thus far. For starters, the fact that it’s widgets makes it REALLY easy. I think you should release a child theme like this, for people like me who want to use the header. Second, I LOVE that this design fits a “Leaderboard” ad and not just a “Banner”. Much better than my original idea and please keep this. However I can’t have the large amount of vertical header space wasted by white space; this needs to go. If it’s easier, I don’t mind if the Leaderboard is ABOVE the logo. But again, no wasted vertical white space is a must and currently a lot is wasted.

Also, I need search functionality added to the template, in the menu bar. Using the existing rtPanel widget is fine (no button would look nicer, but as long as it’s laid out OK and doesn’t take up too much space, the default one is fine).

Thanks for your work thus far; I’m really glad I’ll be able to support rtCamp with a donation.

Hi Joe,

I made very small changes to Gagan’s post. Codes you have used was from Gagan only.

I checked latest screenshot by you. Whitespace issue is solvable.

Since you are going to slip anyway I am keeping this gig open for others rather than giving solution myself!

Rest assured, you will get updated code here soon by a community member. :slight_smile:

Here are some changes in my initial script, this will fix the issues showed in the screenshot

in style.css(child theme)

  
#header {  
    width:400px;  
    float:left;  
}  

#rtp-child-top-right-sidebar{  
    float:right;  
    margin-right:10px;  
    width:211px;  
}  

#rtp-child-below-heading-sidebar{  
    clear:left;  
    margin-left: 10px;  
    width:728px;  
    height:90px;  
}  

functions.php -> same as my first post
Here is a working sample:
http://rtpanel.madlabs.co.cc

Hey Gagan,

In Chrome, the design now looks beautiful. However, per this screenshot, there’s still an issue in IE9 (IE users make up the largest portion of my site visitors):

http://www.timelessfinance.com/wp-content/uploads/2012/07/Gagan-issues.jpg

Also, there obviously isn’t yet a Search field in the menu bar as required.

The rtCamp solution is winning at this point, BUT I’ve had one proposal emailed to me. Here’s some info about the competing proposal: the header, in Google Chrome, is tighter than even this version. It includes the search function in the menu now. HOWEVER, it doesn’t run on widgets, it’s extremely version unstable (looks terrible in IE) and the code is so much longer that it bogs down my site and runs slower when I tested it. It’s got a custom graphic for the “Subscribe!” button (I’m not sure who owns the image, if anybody, which concerns me and it’s not a good colour for my site – I didn’t ask for any graphic design on this challenge because I didn’t want to run into issues like this). Ergo, rtCamp is still the leader because it’s the most stable and I could more easily modify it further if I wanted because it’s widgetized.

Thanks,

Joe

It seems that the IE’s defaults for the OK button, since I couldn’t directly test the code on your site, I couldn’t test the output and about the search, I almost forgot about it, I’ve coded it now you can see the demo on
http://rtpanel.madlabs.co.cc/

Here’s the final code for this(though if you need some support for IE, I’ll look into it specifically, but I can do that only after you apply this code on your site, then only I’ll be able to debug it):
style.css

  
#header {  
    width:400px;  
    float:left;  
}  

#rtp-child-top-right-sidebar{  
    float:right;  
    margin-right:10px;  
    width:211px;  
}  

#rtp-child-below-heading-sidebar{  
    clear:left;  
    margin-left: 10px;  
    width:728px;  
    height:90px;  
}  
#rtp-nav-menu{  
    width:100%;  
}  
#rtp-nav-menu li.rtp_child_custom_search{  
    float:right;  
    width:25%;  
    padding-top:1px;  
}  
#rtp-nav-menu li.rtp_child_custom_search form div input{  
    width:93%;  
}  

functions.php

  
function rtp_child_custom_sidebars_display(){  
    ?>
<?php dynamic_sidebar('rtp-top-right-sidebar'); ?>
<?php dynamic_sidebar('rtp-below-heading-sidebar'); ?>
<?php } add_action('rtp_hook_after_header','rtp_child_custom_sidebars_display'); function rtp_child_custom_sidebar(){ register_sidebar(array( 'name' => __( 'Top Right Sidebar' ), 'id' => 'rtp-top-right-sidebar', 'description' => __( 'Widgets in this area will be shown on the Top right side of the page' ), 'before_title' => '

', 'after_title' => '

', 'before_widget' => '
', 'after_widget' => '
' )); register_sidebar(array( 'name' => __( 'Below Heading Sidebar' ), 'id' => 'rtp-below-heading-sidebar', 'description' => __( 'Widgets in this area will be shown below the heading' ), 'before_title' => '

', 'after_title' => '

', 'before_widget' => '
', 'after_widget' => '
' )); } add_action('widgets_init','rtp_child_custom_sidebar'); function rtp_custom_search_form_timesfinance( ) { global $rtp_general, $is_chrome; $search_class = 'search-text'; if ( preg_match( '/customSearchControl.draw\(\'cse\'(.*)\)\;/i', @$rtp_general["search_code"] ) ) { $search_class .= ' rtp-google-search'; $placeholder = NULL; } else { $placeholder = 'placeholder="Search Times Finance" '; } $chrome_voice_search = ( $is_chrome ) ? ' x-webkit-speech="x-webkit-speech" speech="speech" onwebkitspeechchange="this.form.submit();"' : ''; $form = '
  • ' . __( 'Search for:', 'rtPanel' ) . '
  • '; echo $form; } function rtp_default_nav_menu_timesfinance() { echo ''; /* Call wp_nav_menu() for Wordpress Navigaton with fallback wp_list_pages() if menu not set in admin panel */ if ( function_exists( 'wp_nav_menu' ) && has_nav_menu( 'primary' ) ) { wp_nav_menu( array( 'container' => '', 'menu_id' => 'rtp-nav-menu', 'theme_location' => 'primary', 'depth' => apply_filters( 'rtp_nav_menu_depth', 4 ) ) ); } else { echo '
      '; wp_list_pages( array( 'title_li' => '', 'sort_column' => 'menu_order', 'number' => '5', 'depth' => apply_filters( 'rtp_nav_menu_depth', 4 ) ) ); rtp_custom_search_form_timesfinance(); echo '
    '; } echo ''; } function rtp_child_remove_default_menu() { add_action('rtp_hook_after_header','rtp_default_nav_menu_timesfinance'); remove_action('rtp_hook_after_header','rtp_default_nav_menu'); } add_action('init','rtp_child_remove_default_menu',1);

    I really appreciate the work you’ve done thus far and wanted to show I’m good for it, so I just sent $60 to RTCAMP SOLUTIONS PRIVATE LIMITED (PayPal confirmation: 4CV71496BG617814W). I also wanted to confirm that you guys are the winners, since we’re 90% there and I don’t want other people spending time/effort to work ont his project anymore. Gagan, you’ve done an excellent job thus far and the rtCamp team is great. Also, special thanks to the other person who participated by email but didn’t win.

    As for finishing the project so that I can pay the remaining $40USD:

    • I’ve now left up all of your modifications on http://www.timelessfinance.com so that you can debug in IE9 to make it match the formatting requested. Here are the outstanding issues:
      – RESOLVED - I fixed the search field’s text to read “Search TimelessFinance” cause it said “Search Times Finance”. Not an issue.
      – OUTSTANDING - in IE9, the Search Box is blank. It needs to say “Search TimelessFinance”
      – OUTSTANDING - the Feedburner form, as discussed/pictured in the last post, doesn’t appear properly in IE9. If there’s a concern about the current Feedburner widget then one option is to create a custom Feedburner email form (to make it more compact). If you create the code, I could paste this into a “text” widget instead of using my current Feedburner Form widget.

    The last $40 will be paid when those outstanding issues are resolved.

    Also, keeping in mind that I hope this will be a publicly-available child theme, if anybody wants to spend some time to optimize the final code it’d be awesome. But not necessary for the remaining $40.

    Again, excellent work Gagan et al!

    I’ve made a jQuery based workaround for the search problem you are facing in IE9
    copy the entire js from this file:
    http://rtpanel.madlabs.co.cc/wp-content/themes/rtCamp-rtpanel-child-theme-db6acef/js/rtp-custom-scripts.js

    paste it in child themes rtp-custom-scripts.js file in js folder

    and add these lines in functions.php

      
    function rtp_child_custom_script() {  
        wp_enqueue_script('rtp-child-custom-script',  get_bloginfo('stylesheet_directory').'/js/rtp-custom-scripts.js');  
    }  
    add_action('wp_enqueue_scripts','rtp_child_custom_script');  
    

    As for the styling of the feed burner, I don’t see any issues, here’s my screenshot of IE9’s output:
    http://rtpanel.madlabs.co.cc/wp-content/uploads/2012/07/outputie.jpg

    Still if you need to fix it somehow, here are a few lines you can paste in style.css of child theme:

      
    .subscription_btn{  
        width:40px!important;  
    }  
    

    Thanks Joseph for the Payment :slight_smile:

    Hey Gagan,

    I’ve sent the remaining $40. Sorry for the delay; it took me a bit to figure out how to edit the .js file. I ended up using FTP and your code works great.

    Thanks very much for your help. My sidebar is a cleaner slate. Site is more user friendly and compact; I’ve added some new widgets and reconfigured plugins toward these ends.

    You were right re: the subscribe button; I checked it on two other computers’ IE9 browsers; it was my IE9 that was the problem. But I put in the latest code, and now it looks good on my computer, too.

    Any chance that you could compile this into a theme .zip? Is it a matter of just putting all the child theme’s .php files and styles.css into a .zip file? I assume it must be more complex than that. I’d really like to host this child theme so that new bloggers can get an efficient, compact theme for free. I’d refer people to rtPanel to download the parent first, of course. If you want to chat on Gmail, my address is [email protected].

    Thanks again,

    Joe

    Hello Joe,

    Glad to know that your problems are resolved. For us, more than money its your satisfaction which rewards us :slight_smile:
    As asked, I am sending you the zip of child theme containing the recent changes.
    Please let us know if any other problem comes up. I’ll be glad to assist you further.

    Thank you,

    Gagan

    Hi Joe

    Once you put up child theme for downloading, please add a link in this thread.
    That way others users will be able to download your theme.

    Thanks for using & promoting rtPanel. :slight_smile:

    Regards,
    -Rahul

    Gentlemen,

    The direct download link is:

    http://www.timelessfinance.com/wp-content/downloads/rtchild-timelessfinance.zip

    I’ve also prepared a brief set of instructions about rtPanel and the Child Theme (for noobs like myself): http://www.timelessfinance.com/theme/

    I’m very excited that this may end up in the Themes section of WordPress.org. I’m subscribed to this thread, so please post if/when it’s approved!

    Thanks,

    Joe of TimelessFinance

    Hey guys,

    Thanks again for all of your help. I have a question re: the menu.

    I’ve been adding “About” pages, for the Blog, for me, and for a contributor to my blog, Adina. Here are the URLs:

    timelessfinance.com/about/about-timelessfinance/  
    timelessfinance.com/about/about-adina-j  
    timelessfinance.com/about/about-joe-wood  
    

     

    When a user hovers their mouse over the “About” button, I want the menu to drop down, and display each of the three options. I set up a custom menu as follows:

    http://www.timelessfinance.com/wp-content/uploads/2012/07/custom-menu-issue.jpg

    And it worked fine (mouse hover on “About” resulted in a drop-down; if they clicked on “About” they went to a map site - http://www.timelessfinance.com/about)

    The problem is that, when I activate the custom menu, the lovely Search Box that you guys helped install (in the menu bar) disappears.

    http://www.timelessfinance.com/wp-content/uploads/2012/07/custom-menu-issue0.jpg

    I assume there’s probably an easy fix so that I can activate my custom menu and still keep the Search Box in the menu bar. I’ve reverted the site to the original menu so the search bar still displays (when the user hovers a mouse over “About” it only drops down to “About TimelessFinance”).

    Alternately, is there any simple, scale-able way to easily make the default menu drop down properly?

    Thanks,

    Joe

    Hello Joe,

    Kindly find the function named “rtp_default_nav_menu_timesfinance” and replace this function with the below one.

      
    function rtp_default_nav_menu_timesfinance() {  
    
    echo '';  
    
    if ( function_exists( 'wp_nav_menu' ) && has_nav_menu( 'primary' ) ) {  
    wp_nav_menu( array( 'container' => '', 'menu_id' => 'rtp-nav-menu', 'theme_location' => 'primary', 'depth' => apply_filters( 'rtp_nav_menu_depth', 4 ) ) );  
    }else {  
    
    echo '
      '; wp_list_pages( array( 'title_li' => '', 'sort_column' => 'menu_order', 'number' => '5', 'depth' => apply_filters( 'rtp_nav_menu_depth', 4 ) ) ); echo '
    '; } rtp_custom_search_form_timesfinance(); echo ''; }

    Also select your custom navigation in primary navigation option which you set as named “main” in back-end.

    Hope this will solve your problem, even though if any issue remains it will be our pleasure to look after it.

    Regards.

    -Ankit

    Hi Ankit,

    I didn’t want to respond until I’d tested it a couple times. Every time I put in the code, I get the following error:

    Parse error: syntax error, unexpected T_STRING, expecting ‘,’ or ‘;’ in /hermes/bosweb/web081/b813/ipg.timelessfinancecom/wp-content/themes/rtCamp-rtpanel-child-theme-b70ba2b/functions.php on line 74

    I assume there’s an obvious resolution or I’m doing it wrong.

    Thanks,

    Joe

    Hello joe,

    this error is appearing because compiler is unable to parse the string properly, most probably because you might have paste the code directly. some characters may not be in proper format.

    I am again writing here the code this time you can copy and paste the code.

      
    function rtp_default_nav_menu_timesfinance() {  
         echo '';  
            /* Call wp_nav_menu() for WordPress Navigaton with fallback wp_list_pages() if menu not set in admin panel */  
            if ( function_exists( 'wp_nav_menu' ) && has_nav_menu( 'primary' ) ) {  
                wp_nav_menu( array( 'container' => '', 'menu_id' => 'rtp-nav-menu', 'theme_location' => 'primary', 'depth' => apply_filters( 'rtp_nav_menu_depth', 4 ) ) );  
            } else {  
                echo '
      '; wp_list_pages( array( 'title_li' => '', 'sort_column' => 'menu_order', 'number' => '5', 'depth' => apply_filters( 'rtp_nav_menu_depth', 4 ) ) ); echo '
    '; } rtp_custom_search_form_timesfinance(); echo ''; }

    Thanks again for your generous help with this issue.

    Your latest code fixed the main problem: the custom menu appears with a search box.

    The appearance, however, needs a bit of adjustment. The search bar now “hops down” to the next line and a weird bullet (li or ul) appears. Here’s an screenshot, in both Chrome and IE9 (the green box is where the Search box usually sits on the menu):

    http://www.timelessfinance.com/wp-content/uploads/2012/07/search-bar-format-issue.jpg

    If you want to see the “current state” (what the search box should look like) I’ve reverted the edits so you can see the correct format on the front page.

    Thanks,

     

    Joe

    Hello Joe,

    I analysed your problem and below is the step by step solution to your problem follow these steps and you will be done with your issues.

    Step 1:

    (Please replace line by typing yourself)

    Find the function named “rtp_custom_search_form_timesfinance” and replace it’s last line which is echo $form with return $form;

    Step 2:

    Find the function named “rtp_default_nav_menu_timesfinance” and replace this function with following.

    (You can copy and paste following code)

      
    
    function rtp_default_nav_menu_timesfinance() {  
    echo '';  
    /* Call wp_nav_menu() for WordPress Navigaton with fallback wp_list_pages() if menu not set in admin panel */  
    if ( function_exists( 'wp_nav_menu' ) && has_nav_menu( 'primary' ) ) {  
    wp_nav_menu( array( 'container' => '', 'menu_id' => 'rtp-nav-menu', 'theme_location' => 'primary', 'depth' => apply_filters( 'rtp_nav_menu_depth', 4 ) ) );  
    } else {  
    echo '
      '; wp_list_pages( array( 'title_li' => '', 'sort_column' => 'menu_order', 'number' => '5', 'depth' => apply_filters( 'rtp_nav_menu_depth', 4 ) ) ); rtp_custom_search_form_timesfinance(); echo '
    '; } echo ''; }

    Step 3:

    Add the following function to the function.php at end of the file.

    (You can copy and paste following code)

      
    
    function rtp_add_search_form_li( $menu_li ){  
        $search_form_li_append = rtp_custom_search_form_timesfinance();      
        $menu_li = $menu_li.$search_form_li_append;  
        return $menu_li;  
    }  
    add_filter( 'wp_nav_menu_items' , 'rtp_add_search_form_li' );  
    
    

     

    After completing these 3 steps you will get the desired result.

    Regards
    -Ankit.