The meta box can be implemented in the  post/ page editor of specific page template at the WordPress back-end.

Example: Refer the below screenshot, which contains certain page sections which are displayed from MetaBoxes.

In above screenshot you can notice that  on Home page template, different page sections like ‘Slogan’ and ‘content boxes’ are displayed using custom metaboxes functionality. These are manged from page editors at WordPress back end.  Please refer the below screenshot to see the back-end:

 Assigning Metaboxes to the page templates:

Step 1: Create a page template (For details refer this ).

Step 2: Replace code present in the rtp_post_types_custom_box() with the following one  :

global $post;
 $template_file = get_post_meta( $post->ID, '_wp_page_template', TRUE );
 if ( $template_file == 'featured-template.php' ) {
 add_meta_box ( 'post_custom_field_id', __( 'Custom Field', 'rtPanel' ), 'rtp_posts_inner_custom_box', 'page', 'side', 'high' );
 }

Here in above code, meta boxes are linked to “featured-template.php”. You can replace the template name with the one you have created for which  meta box will be displayed.

This is useful when we are applying the meta box value only to one page or to page having some specific page template.

For any questions about using metboxes in rtPanel, please contact on our Support Forums.

Related Posts:

1. Creating custom page templates in rtPanel child theme
2. Create Metabox on rtPanel Child Theme
3. Create Custom Post Type with rtPanel Child Theme

Assign Custom Metabox To Specific Page Template is a post from rtCamp

Adding Image to Header From Custom Theme Options:

rtPanel is pre-equipped with all the basic functionality required. Creating a theme option to add images to header is very simple and it can be achieved with three easy steps as below:

1. Get code from rtp-custom-theme-options.php:

rtPanel child theme contains pre-defined theme option file as ‘rtp-custom-theme-options.php’ in lib folder of child theme. You can see the codes on Github here.  It has “Image Uploader” field by default so we don’t have to write extra codes in this page.

2. Create Function at functions.php:

All we need to do is to create a function in functions.php file and then add the code to display image from rtp-custom-theme-options.php file in that function. The function with code will look as below:

<?php function rtp_display_img(){
 global $rtp_custom_theme_options;<?php $custom_image_uploader = wp_get_attachment_image_src( @$rtp_custom_theme_options['custom_image_id'], 'thumbnail' ); ?>   <img src="<?php echo @$custom_image_uploader[0] ?>" alt="Custom Image"<?php echo ( isset( $custom_image_uploader[0] ) ?  'style="max-width: 240px; width: 100%;"' : 'style="max-width: 240px; width: 100%; display: none;"' ); ?> /> <?php } ?>

This is how it looks at the backend in the admin area of Custom Theme Options page. The code has default styling for the image which is displayed. You can also add CSS style to the image in the desired way you would like to display it.

3. Add Hook:

Once we have created the function we have to hook it. As we have to display this image  after header we will use ‘rtp_hook_after_header’. For example,

add_action('rtp_hook_after_header','rtp_display_img');

Note:  By default the image will be displayed above the menu as the menu in the site uses same hook with the priority 10. If you would like to display the image below the menu then you have to set the priority more than 10. For Example,

add_action('rtp_hook_after_header','rtp_display_img',12);

I hope above tutorial was helpful. You may ask your questions below as comments or on our support forums.

Related Posts:

1. Custom Theme Options in rtPanel Child Theme
2. Create Custom Post Type with rtPanel Child Theme
3. Clickable header in rtPanel child theme

Create Custom Theme Options To Add Header Image is a post from rtCamp

In the earlier post we have seen how easy it is, to add the slider in your website using rtPanel child theme. By default this slider will display latest 10 posts’ featured image with its post title and the excerpt. Through this post we will show few more examples about how the slider can be presented in different ways:

1. Displaying only images:

By default the slider displays latest 10 posts featured image with its post title and the excerpt. If you would like to display only images on the post then you need to comment the following line in the code:

  $slider_html .= '<h1><a href="' . get_permalink() .'" title="'.  get_the_title().'" rel="bookmark" >' . ( ( strlen( get_the_title() ) > 50 ) ? substr( get_the_title(), 0, 50 ) . "..." : get_the_title() ) . '</a></h1>' .'<h6>'. get_the_excerpt().'</h6>';

2. Displaying the images from the posts of specific categories:

In many of our projects we have displayed slider where the post belonged to specific category.  For example, posts having ‘Slider’ category will only be displayed on the slider.  To display such post in the slider you just need to add the category name in the the rtp-slideshow.php For example, if you want to display the posts of ‘Slider’ category on the slider then you just need to add  ’category_name’ =>’slider’ in below code

 query_posts( array( 'ignore_sticky_posts' => 1, 'posts_per_page' => 10, 'order' => 'DESC') );

Thus the code will be as below:

 query_posts( array( 'ignore_sticky_posts' => 1, 'posts_per_page' => 10, 'order' => 'DESC', 'category_name' =>'slider') );

3. Displaying the image from the page attachment:

The images which are attached to the page can be displayed in the slider. That is, each page will display its page attachment in the Slider.  For this you have to replace the code in the rtp_get_cycle_slider() function with below code:

global $post;
 $images = & get_children( array( 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC', 'post_parent' => $post->ID, 'numberposts' => 20 ) );
 $slider_html = '';
 if ( count( $images ) > 1 ) {
 $slider_html .= '<div class="clear"></div><div id="rtp-cycle-slider"><div class="rtp-cycle-slider-container">';
 foreach ( $images as $image ) {
 $slider_html .= '<div class="cycle-slides">' . wp_get_attachment_image( $image->ID, 'rtp-slider' ) . '</div>';
 }
 $slider_html .= '</div>';
 }
 echo $slider_html;

Note: The slider will be only display if there are minimum 2 images in the page attachment.

Thus using rtPanel child theme deploying the slider in the website becomes easy and presenting it in diffrent way is much easier. You can add your CSS styling to the class in the div tags to enhance the slider design.

Related Posts:

1. Case Study: rtPanel Child Theme ‘SceneCreek’
2. Create Custom Post Type with rtPanel Child Theme
3. Create Metabox on rtPanel Child Theme

Customizing Image Sliders in rtPanel Child Theme is a post from rtCamp

Example: Display custom signature image at end of post content on single posts.

So lets see step-by-step guide for its implementation.

Step 1:  In the “functions.php” file, create a custom function and write the code to display the image. For example,

function custom_hook_end_post() {
 echo '<img src="http://localhost/wordpress/wp-content/uploads/2012/03/mylogo.jpg>">';
}

If you want to display the image from the custom uploader which is present in the Custom Theme Options you have to write the below code:

function custom_hook_end_post() {
 global $rtp_custom_theme_options;
 $custom_image_uploader = wp_get_attachment_image_src( @$rtp_custom_theme_options['custom_image_id'], 'thumbnail' );
  echo '<img src="'.@$custom_image_uploader[0].'">';
}

This function will display the image after ever page/post content.

Step 2: If you want to display the image only on particular page the you have to add some condition in the code, such as:

 if( is_page() )  To display image only on page (not on the post page).

if(is_single())  To display image only on page single post page.

if(is_singular()) To display image on page and single post page.

For example,

function custom_hook_end_post() {
 global $rtp_custom_theme_options;
 $custom_image_uploader = wp_get_attachment_image_src( @$rtp_custom_theme_options['custom_image_id'], 'thumbnail' );
 if( is_page() )
 echo '<img src="'.@$custom_image_uploader[0].'" class="rtp_after_post_img">';
}

Step 3: Once you have created the function you have to hook it using add action. For which you have to add the below:

add_action( 'rtp_hook_end_post_content', 'custom_hook_end_post' );

and you are done. After this the image will be displayed below the page/post content as given in above image.

There can be many other usage of ‘rtp_hook_end_post_content’ hook, based on your creative approach. One more reference example can be using this hook to to display the social networking icons or  social networking plugins.

Related Post: Adding Google ad banner above logo in rtPanel child theme.

Related Posts:

1. Create Custom Post Type with rtPanel Child Theme
2. Add Google ad-banner above logo in rtPanel
3. Create Metabox on rtPanel Child Theme

Display Image Signature Below Post Content is a post from rtCamp

Example – Adding Google-ad banner to rtPanel Child Theme  above logo:

Step 1:

At first we will create a custom field (textarea) in the custom theme option. So that when google ads script is added to that field, the google ads will appear before logo of the site. The custom field can be defined in the file ‘rtp-custom-theme-options.php’ which is under the lib folder of Child theme of rtPanel. (learn more about – custom theme options in rtPanel)

Step 2:

Once textarea field is created, we will add the google ads script to this textarea. Now first we will create custom function as “rtp_google_ads” in the ‘function.php’ which is present in the child theme folder. This is to display the google-ads.

function rtp_google_ads(){
    global $rtp_custom_theme_options;
    echo $rtp_custom_theme_options['google_ads'];
}

So once function is created, we need to “hook” the function to the ‘rtp_hook_before_logo’ action hook so that Google ad will be displayed before the logo. So the code will be as below:

add_action('rtp_hook_before_logo','rtp_google_ads');

After adding this code the google ads will be displayed before the logo. It is show in below screenshot.

Step 3:

Once google ad is displayed we will add style it according. This can be done by adding CSS styling to the ‘style.php’ file in the child theme folder.

Isn’t it pretty easy to add our own functionality to the theme!!!

This is just a small example to demonstrate how our ‘rtp_hook_before_logo’ can be used. But there are many more things that can be achieved using this hook, as long as your creativity will not end. Some example usages are adding social networking icons, adding images, adding search textbox etc.

Do let us know, your creative usages of rtPanel Hooks via comments.

Related Posts:

1. Add Google Adsense Link Unit In Header
2. Create Metabox on rtPanel Child Theme
3. Custom Theme Options in rtPanel Child Theme

Add Google ad-banner above logo in rtPanel is a post from rtCamp

Considering this, rtPanel has also been offering some awesome in-built hooks. The inbuilt function such as Hooks allows a developer to rewrite content or append new functionality. To know more about the ‘rtPanel Hooks’ refer this. To  make it further easy, we have provided a rtPanel hooks editor plugin.

rtPanel Hooks Layout Map:

Some other commonly used hooks are:

• Using rtp_hook_before_header, rtp_hook_after_header, rtp_hook_after_logo.
• Using rtp_hook_before_header can be used to display the content before header.
• Using rtp_hook_after_logo can be used to display the content after the logo.
• Using rtp_hook_after_header can be used to display the content after header.

In further posts, we will give some examples and case studies about usages of rtPanel Hooks. You may ask your questions on our dedicated support forum.

Related Posts:

1. Clickable header in rtPanel child theme
2. Creating custom page templates in rtPanel child theme
3. Child Theme development using rtPanel – Part I

Hooks in rtPanel Child theme is a post from rtCamp

In the rtPanel child theme we have provided 6 filters as follow:

rtp_header_image_width: This is used to modify the width of the header image on your site. Click here for the code.

rtp_header_image_height: This is used to modify the height of the header image on your site. Click here for the code.

rtp_nav_menu_depth: This is used to specify the number of sub-menus/child to show in the primary menu. By default it is set to 4. Click  here for the code.

rtp_default_image_path: This could be used to specify the path to a default thumbnail image. Incase your posts don’t have a thumbnail, this default thumbnail image would show up. Click here for the code.

rtp_readmore: This filter is used by rtPanel itself to wrap the read more text in square brackets. This could be used to remove the brackets or modify the read more text/link. Click here for the code.

rtp_add_theme_pages: This hook is mainly for plugin development. This adds an option tab next to General, Post & Comments.

How to use Filter in the rtPanel  Child Theme?

To use the filter you just have to add the respective code in the “function.php” file and add the desire value to the code. For example, if you want to show the child menu of primary menu, then you have add the code as follows:

function custom_rtp_nav_menu_depth( $depth ) {
 return 1;
 }
 add_filter( 'rtp_nav_menu_depth', 'custom_rtp_nav_menu_depth' );

If you have questions about using filters, please feel free to ask them on our support forum.

Related Posts:

1. Child Theme development using rtPanel – Part 2
2. Child Theme development using rtPanel – Part I
3. Custom Theme Options in rtPanel Child Theme

Filters in rtPanel is a post from rtCamp

Today is a special day to remember contribution from all rtCampers and thank all our well-wishers, clients and partners out there.

The best is yet to be…

We achieved many things last year including rtPanel, an open-source WordPress theme framework, which is growing rapidly.

As we are entering into 4th year, it feels good to be part of a team of extraordinary rtCampers whose passion will help us achieve new feats (like preceding year before!)

Rather than speaking about our plans for year ahead, I would like to get back to work so we can ship something for real!

rtParty 2012

Rather than having an average celebration on a working day, we choose a secluded beach - Karde,  near Dapoli in Ratnagiri District in Maharashtra for a weekend party. The best thing about that place was – no cellphone or internet access – which left rtCampers with no other option but to enjoy rtParty 2012.

If entire rtCamp’s unavailability had caused any inconvenience to you, as leader of these supercharged knights, I apologies to you for this “downtime”.

rtCamp 3rd Anniversary

Photos:

rtParty 2012 photo gallery is here. Same photos are also embedded below:

Related Posts:

1. [Photos] rtParty2011 – rtCamp’s Second Anniversary Celebration
2. rtCamp is Celebrating its 1st Birthday!
3. rtCamp is Now 2 Years Old :-)

Happy Birthday to rtCamp! (3rd Anniversary) is a post from rtCamp

What is ‘Custom Theme Options’?

The “Custom Theme Options” is useful when we need to display the same content  (graphics/image/text) on all/some pages and provide flexibility to the user to modify/change that content as per their desire (without touching the code).
For example, most of the websites have the social networking icons. Site Owner will prefer to have complete control over social networking links and icons’ display in their website. In this case using Custom Theme Options will be a good approach to achieve this functionality.

Creating Custom Theme Options for post in rtPanel Child Theme

Inbuilt Function

“Custom Theme Options.php” file is available in lib folder of rtPanel Child Theme. This file by default has “TextBox”, “TextArea”, and “Image Uploader” field. Hence by using required field name in the code we can display the value/content of that field at the desired place in the site.

How to use the function

The functions required to create Custom Theme Options are as follow:

• rtp_custom_theme_options( $theme_pages ): This function is used to set name of ‘custom theme options’.
• rtp_custom_theme_default_values(): This function is used to set the default value of fields that will be used in the custom theme options.
• rtp_custom_theme_options_metabox(): This is a function, where actual fields are constructed. Here you have to set the label name for the field that is created for e.g. here we have created the textbox and its label.

<tr valign="top">
 <th scope="row"><label for="rtp_title"> <?php _e( 'Enter the text that you want to display after every post:', 'rtPanel' ); ?> </label> </th>
 <td>
 <input type="text" value="<?php echo $rtp_custom_theme_options['title']; ?>" size="40" name="custom_theme_options[title]" id="rtp_title" />
 </td>
 </tr>

After creating this field it will look like below screenshot on the ‘Custom Theme Option’ page in the dashboard of admin side.


rtp_custom_theme_options_validate( $input )
This function defines the codes, which which validates the fields.

In this way the custom field in the Custom Theme Options can be created.

How to implement:

Now to implement the field value in your site you can create the custom function in ‘function.php’ file.
for e.g.

<?php function rtp_msg(){
    global $rtp_custom_theme_options;
    echo $rtp_custom_theme_options['title'];
}
add_action('rtp_hook_end_post_content','rtp_msg');

This is how the Custom Theme Options can be used in site.

Live Example

In one of our projects - Kashyap Groups; the custom theme option has been used to set the company’s Facebook and Twitter id.
Below is the screenshot of the Custom Theme Option in the admin side:

This Custom Theme Option was used to set the companies Facebook and Twitter id on the site.

Conclusion

Its easy to develop the Custom Theme Options in rtPanel by using the provided functions. Theme options allows site owner to change or modify the content as per their desire!!!

Custom Theme Options in rtPanel Child Theme is a post from rtCamp

Many a times, we have been asked, why rtPanel do not have in-built SEO features?

rtPanel has integrated with WordPress SEO by Yoast plugin. We do not want to lock-in any user in our theme framework. So we deliberately avoid running into plugin territory. Yoast plugin being a matured plugin fulfills the SEO requirement of rtPanel. Further more the mark-up of rtPanel theme framework is also SEO friendly.

This plugin can be seen here in admin area Appearnce > rtPanel > General > ‘Plugin Support’ section.

(Already referred in rtPanel Theme Options ‘General’ article.)
You can refer this Guide to know more about the configuring the SEO plugin so that your site can be optimized.

Related Posts:

1. rtPanel Hooks Editor Plugin Launched
2. rtPanel Theme Options ‘General’
3. rtPanel is now in official WordPress Theme Directory

Integrated SEO plugin in rtPanel is a post from rtCamp