Archive - nRelate Plugin RSS Feed

Centering nRelate

When you normally center a div with CSS, it’s pretty simple since you probably know the width of the div.  This becomes a bit more difficult with nRelate since we have so many different styles on different sites, which makes it impossible to determine the width.

The best way to center nRelate is to increase the LEFT MARGIN.  Add this code to your themes STYLE.CSS file.  You will probably need to change the 10px to whatever works for your theme.

CENTER NRELATE INCLUDING TITLE

.nrelate {
margin-left: 10px !important;
}

CENTER NRELATE (NO TITLE)

.nrelate .nr_inner {
margin-left: 10px !important;
}
TARGETING A SPECIFIC NRELATE PLUGIN
If you have multiple nRelate plugins running on your site, you may want to only center one of them.  To do that, replace .nrelate with one of these:
.nrelate_related
.nrelate_popular
.nrelate_flyout




Show Flyout on Pages

The Flyout plugin is preset to only show on Single Posts.  If you want it to show up on other Posts or Pages you would use the following two filters to change the display:

  • nrelate_flyout_is_loading
  • nrelate_flyout_should_inject
Let’s look at two examples.  The following code should be placed in your theme’s FUNCTIONS.PHP file:

 

Show on WordPress PAGES and SINGLE POSTS:

function show_nrelate_flyout_custom($load_nrelate) {
 if ( is_single() || is_page() ) {
 $load_nrelate = true;
 }
 return $load_nrelate;
 }
 add_filter('nrelate_flyout_is_loading', 'show_nrelate_flyout_custom');
 add_filter('nrelate_flyout_should_inject', 'show_nrelate_flyout_custom');

 

 

Show on a CUSTOM POST TYPE (“Events”) and SINGLE POSTS

function show_nrelate_flyout_custom($load_nrelate) {
 if ( is_single() || 'events' == get_post_type() ) {
 $load_nrelate = true;
 }
 return $load_nrelate;
 }
 add_filter('nrelate_flyout_is_loading', 'show_nrelate_flyout_custom');
 add_filter('nrelate_flyout_should_inject', 'show_nrelate_flyout_custom');







					

Translating nRelate into your language

All nRelate WordPress plugins are ready for translating/localizing, and we’re looking to our community to help.  If you would like to translate an nRelate plugin into your language, here’s some information to get you started:

Tutorials:

.Pot and .mo Files:

All nRelate .Pot and .mo files are packaged with each plugin in the /languages directory.

.po Files:

Currently, .po files are only available for our Related Content plugin:

Using the nRelate Widget

Just like all WordPress widgets, the nRelate widget is simple to use.  Just drag it over to the widget area you want and press SAVE.  Settings for the widget are configured on the standard nRelate settings page.

A common question is: How can I have the nRelate widget only show up in my sidebar (or any widget area) and not under posts?

  1. Go to the nRelate settings page.
  2. Scroll down the the LAYOUT SETTINGS area.
  3. Under “Which pages should display related content?“, check all the boxes where you want nrelate to display.  The widget will only show up on the page(s) you check, this way you can easily target the areas of your website to display nRelate.
  4. Also under LAYOUT SETTINGS, make sure both “Automatic” layout settings (“Top of post” and “Bottom of post” ) are UNchecked. Leaving them checked will automatically add nRelate to your posts.
  5. Press SAVE CHANGES, and that’s it!

Using Images in Custom Fields with nRelate

nRelate uses some specific logic to determine which image to show in our thumbnails.  The first thing we look for is an image set in a custom field.  Here’s how you can easily tell nRelate which image to use for thumbnails.

ADDING IMAGES TO A CUSTOM FIELD:

  1. Upload your image.
  2. Create a custom field, and add the FULL url (including http://)

** Here is a good explanation on how to use custom fields.

WHEN YOUR THEME CREATES THE CUSTOM FIELD:

Sometimes your theme or a plugin creates nice looking fields for your image url. These are standard WordPress custom fields, just prettified.  Here’s how to find the custom field name:

  1. Go to you EDIT POST screen
  2. Click on the SCREEN OPTIONS tab in the upper right.
  3. Check the CUSTOM FIELDS box
  4. Scroll down the page, and you should see your custom fields displayed.

ADDING YOUR IMAGE CUSTOM FIELD TO NRELATE:
  1. Click on the nrelate icon in the WordPress menu to get to the NRELATE DASHBOARD.
  2. Add your custom field name in the CUSTOM FIELD FOR IMAGES box.
  3. Save your changes.

IMPORTANT: Changing the data in CUSTOM FIELD FOR IMAGES, and pressing SAVE, will require nRelate to reindex  your website.  It may take up to two hours for your changes to take effect.

 

Manually Adding nRelate Code To Your WordPress Template

If you want control exactly where nRelate displays on your website, you can manually insert our PHP function into your WordPress template, FUNCTIONS.PHP OR use our Shortcode in your actual Post or Page. It’s actually quite simple:

Manually Inserting PHP function into your THEME TEMPLATE:

  1. Pick the proper WordPress theme file to add your code.  For example you may pick SINGLE.PHP for single posts.
  2. Insert the proper nrelate code into the file, save and upload to your site:
    • RELATED CONTENT: 
      <?php if (function_exists('nrelate_related')) nrelate_related(); ?>
    • MOST POPULAR: 
      <?php if (function_exists('nrelate_popular')) nrelate_popular(); ?>

Manually Inserting PHP function into your FUNCTIONS.PHP FILE:
Plugins like nRelate (and most social plugins) automatically attach themselves to your post content. Use this code snippet in your FUNCTIONS.PHP file to control where nRelate shows up. Change both of the “99”s to any number between 0 and 999 to move nRelate. This is essentially a sort order for all plugins that attach themselves to your post content.

remove_filter( 'the_content', 'nrelate_related_inject', 10 );
remove_filter( 'the_excerpt', 'nrelate_related_inject', 10 );
add_filter( 'the_content', 'nrelate_related_inject', 99 );
add_filter( 'the_excerpt', 'nrelate_related_inject', 99 );

Using our Shortcode in your Post or Page:

  1. Edit the Post or Page you want to show nrelaate.
  2. Insert the proper nrelate shortcode into the body of the Post or Page:
    • RELATED CONTENT: 
      [nrelate-related]
    • MOST POPULAR: 
      [nrelate-popular]

Once you’ve completed the steps above, you now have to change some settings in your WordPress Admin:

  1. Scroll down the the LAYOUT SETTINGS area.
  2. Under “Which pages should display related content?“, check all the boxes where you want nrelate to display.  Just because you manually place the nRelate code in your SINGLE.PHP file, for example, doesn’t mean nRelate will show up.  You also need to check the SINGLE POSTS check box. This is done in case you only have one theme file, like INDEX.PHP, which renders on multiple pages.   By checking the appropriate box you can focus nRelate on the pages you want.
  3. Also under LAYOUT SETTINGS, make sure both “Automatic” layout settings (“Top of post” and “Bottom of post” ) are UNchecked. These are not needed since you are manually adding the nRelate code.
  4. Press SAVE CHANGES, and that’s it!

nrelate Styling Guide: Part II

All nrelate plugins are written so they inherit your themes CSS styles.  However, sometimes you may want to change a color, font-size or more.  nrelate is packed with lots of CSS classes, listed below are some of the more common ones you may want to target.

IMPORTANT NOTES:

  • All of these code snippets should be placed in your themes CSS file.  This is usually: STYLE.CSS
  • These samples will target ALL nrelate plugins.  You can target an individual plugin by changing “.nrelate” to the appropriate plugin:
    • .nrelate_related
    • .nrelate_popular
    • .nrelate_flyout
  • WIDGETS: For nrelate widgets, change “.nrelate” to the appropriate plugin.  This allows you to style the nrelate widgets differently then the nrelate in your posts:
    • .nrelate-related-widget
    • .nrelate-popular-widget

All Plugin Styles

Add space above nrelate

.nrelate { margin-top: 20px !important; } /* Add 20px above nrelate */

nrelate title

.nrelate .nr_text { color: #000000 !important; } /* Change color to black */

Post title

.nrelate .nr_post_title { color: #000000 !important; } /* Change color to black */

Thumbnail Styles

Thumbnail Text
.nrelate .nr_text { color: #000000 !important; } /* Change color to black */

Text Styles

Text Excerpt
.nrelate .nr_excerpt { color: #000000 !important; } /* Change color to black */


 

 

Remove nrelate from a particular post or page

You can stop nrelate from showing on a particular post or page, using standard WordPress conditionals (for a full list click here)

Single Post

To remove one or more POSTS, add the following code to your theme’s functions.php file. (for Pages, change “is_single” to “is_page”):

function hide_nrelate_from_posts($load_nrelate) {
if ( is_single("post-id-here") ) {
$load_nrelate = false;
}
return $load_nrelate;
}
add_filter('nrelate_related_is_loading', 'hide_nrelate_from_posts');

You need to change “post-id-here” to the ID of the post or page you want to target.  So if you want to target Post “17”, use this:

 function hide_nrelate_from_posts($load_nrelate) {
if ( is_single('17') ) {
$load_nrelate = false;
}
return $load_nrelate;
}
add_filter('nrelate_related_is_loading', 'hide_nrelate_from_posts');

Multiple Posts

You can also target more than one Post.  Let’s say you want to remove nrelate from Post’s 17,18 and 19.  You would wrap them in an array, which looks like this:

function hide_nrelate_from_posts($load_nrelate) {
if ( is_single(array('17','18','19')) ) {
$load_nrelate = false;
}
return $load_nrelate;
}
add_filter('nrelate_related_is_loading', 'hide_nrelate_from_posts');

 Post in a Category

To remove nRelate from a post in a particular category, find the category ID (here’s how) and use the in_category conditional.  Let’s say you want to hide nRelate from any posts in category 6:

function hide_nrelate_from_cat($load_nrelate) {
if ( in_category('6') ) {
$load_nrelate = false;
}
return $load_nrelate;
}
add_filter('nrelate_related_is_loading', 'hide_nrelate_from_cat');

 Posts from multiple Categories

You can also remove nRelate from posts in multiple categories. To hide nRelate from any posts in categories 6, 7 and 8 try this:

function hide_nrelate_from_cat($load_nrelate) {
if ( in_category( array( 6,7,8 )) ) {
$load_nrelate = false;
}
return $load_nrelate;
}
add_filter('nrelate_related_is_loading', 'hide_nrelate_from_cat');

Do not load on mobile devices

function hide_related_from_mobile($load_nrelate) {
  if ( wp_is_mobile() ) {
    $load_nrelate = false;
  }
    return $load_nrelate;
}
add_filter('nrelate_related_is_loading', 'hide_nrelate_from_posts');

For MOST POPULAR replace:

nrelate_related_is_loading

with

nrelate_popular_is_loading

For FLYOUT replace:

nrelate_related_is_loading

with 

nrelate_flyout_is_loading

 

Signing up for Ads

Signing up for advertising is pretty easy.

1. Login to your WordPress Admin Area

2. Go to the nRelate Dashboard and copy your ad code

3. Sign up for an account at Partners.nrelate.com and enter your adcode on the partners site

 

4. Back in your WordPress Admin, go to the nRelate settings menu, and then the ADVERTISING Tab, and check off: “Would you like to display Ads”.  You can also configure how many ads, and where to show them.

Changing the title to an image

Sometimes a regular old typeface doesn’t cut it, and you may to replace the nrelate title with an image.  I’m talking about the area above nrelate posts that says “You may also enjoy” or “Most Popular”.  There are many ways to do this, but I’m going to show you the easiest, using a little CSS.

Just open your themes css file (probably style.css), and add the following code:

.nrelate .nr_title {
background-image: url("http://full-path-to-your-image");
background-repeat: no-repeat;
text-indent: -99999px;
}

 

If you want to use different images for our Related plugin and our Most Popular plugin, you would have two different CSS selectors:

.nrelate_related .nr_title {
background-image: url("http://full-path-to-your-image-for-related");
background-repeat: no-repeat;
text-indent: -99999px;
}
.nrelate_popular .nr_title {
background-image: url("http://full-path-to-your-image-for-popular");
background-repeat: no-repeat;
text-indent: -99999px;
}

Here is an example of replacing the related title with an image from Mobilemag.com. Doesn’t it look great!

Mobilemag.com

Feel free to ask questions in the comments below.

Page 1 of 41234»