SumoMe Fixes

Update March 23, 2015: This does not work for the current version of SumoMe. But I will keep it up to help with similar situations.

The folks at Appsumo.com have released a free WordPress plugin called SumoMe that is available at http://sumome.com.

You can install SumoMe by either by adding a script to your header (if you are not using WordPress) or by installing their WordPress plugin.

Once you install it and create an account, you have the option of adding two apps:

Twilighter is a slick app that takes the text that is selected on your page and sets up a Twitter tweet using the selected text and creating a short URL back to the page from which it was selected. Your visitor can then make adjustments and click the submit button to tweet it.

The other app is List Builder which opens a modal subscription form that only asks for an email address. You can export the collected addresses as a CSV file.

List Builder caused a problem with this site where the form was showing up behind my header graphic. The problem was the z-index for that DIV element was not high enough. Adding the following code to my style.css file fixed the problem by increasing the z-index value.

.sumome-popup {
     z-index: 11111 !important;
}

Another issue I wanted to fix was the fact that the SumoMe has a control tab that appears in the upper right and visitors can see it. That control tab is of zero use to a visitor, so it is just clutter, yet I will need the tab to change settings. The best solution for now is to make it visible only if an administrator is logged into the site. Please note this code only works if your site is running on WordPress. A hat tip to koningdavid for posting the answer to a similar problem on StackOverflow.com.

Add a style sheet file called visitor.css with the following code:

#sumotest-badge {
     display:none !important;
}

In your theme’s function.php file, add the following:

function visitor_stylesheet()
{
     if (!current_user_can( 'manage_options' )) {

          wp_register_style('visitor_css', get_stylesheet_directory_uri() . '/visitor.css', array(), '1.0', 'all');
          wp_enqueue_style('visitor_css');
     }
}
add_action('wp_enqueue_scripts', 'visitor_stylesheet');

The visitor_stylesheet function checks if the current visitor to the site is an administrator (if the user can “manage_options”, then the user is an administrator). If the user is not an admin, then the visitor.css file is loaded for the user. The CSS code in visitor.css tells the browser to hide the #sumotest-badge DIV element.

Those are my fixes for SumoMe.

Happy cooking!

 

Enhanced by Zemanta

Invalid RSS Feed – ETX Character

English: This icon, known as the "feed ic...

So you are validating your WordPress blog feed and you get an invalid character error. The validator even shows you where the invalid character is located, but it looks fine in your browser!

Copy and paste the text into a text editor and you will see it. In Windows Notepad, you will see a small rectangle, and in Notepad++ you will see more – in my case, the letters “ETX” on a black background.

How did it get there? Probably because you copy and pasted your text from another source.

How do you get rid of it? There are a couple of ways:

One, find the offending post and rewrite the word before and the word the validator was pointing at and delete the original words to hopefully delete the invisible character. Then republish.

Two, create a filter  in your functions.php file to filter it out of existing posts.

function wpc_rssContent($content) {
     // Search for end-of-text character which is created by using      // chr(3) and replace with blank string.
     $content = str_replace(chr(3), '', $content);
     return $content;
}
// Filter the Excerpt RSS feed
add_filter('the_excerpt_rss', 'wpc_rssContent');
// Filter the Content RSS feed
add_filter('the_content_feed', 'wpc_rssContent');
/* Filter the Editor content to keep the character out of your 
   posts before you publish. You will need to click Save Draft at
   least once before publishing to ensure it is removed.
 */
add_filter('the_editor_content', 'wpc_rssContent');

There is probably a better solution out there, but this worked for me.

Missing Sidebar and Missed Opportunites

So I’m looking at my Google Analytics and find that my post Adobe Acrobat Pro X CS6 won’t start: how to fix has over 600 page views (539 unique) for the past month.

For a small-fry like me, that is huge!

I dug deeper and found that the most used Google search phrase for that page was “adobe acrobat x pro won’t open”. I googled it, and my article was #2 right under Adobe.com’s!

If you are reading this on my site, you can see that I run ads on the sidebar. I got excited at the thought of getting some advertising revenue and looked at my advertising stats. There were no clicks registered and the viewed ads number was a lot lower than the page views.

I looked at the page itself and realized the problem. No sidebar was showing up.

So many lost opportunities!

So where did my sidebar go? I’m not sure it was ever there to begin with.

I am using a custom child theme of the Twenty Eleven theme, but I had not done anything to change the base single post template. I downloaded index.php and single.php to look for differences and found that “get_sidebar();” was not in single.php. I copied single.php to my custom child theme folder and copy and added “get_sidebar()” function to the same place it appeared in index.php. I uploaded my new version of single.php and saw the sidebar was there, but it was shoved below the content.

Element inspection time. The CSS for the divs #primary and #content was different for the single post template. I added the following code (which is a copy of the #primary and #content from the parent theme and I added “.singular”) to my child theme’s style.css to cancel the parent theme’s CSS and get my sidebar in the right place:

.singular #primary {
float: left;
margin: 0 -26.4% 0 0;
width: 100%;
}

.singular #content {
margin: 0 34% 0 7.6%;
width: 58.4%;
}

On a side note, if you have never worked with WordPress child themes before, I highly recommend reading the WordPress Codex on Child Themes. You should never change the code of a theme someone else has made because if they update the theme you will lose your changes if you update the theme on the Update admin page.

 

Page Template Option Missing

On one of the sites I administer, we are using a premium theme that comes with custom page templates.

When setting up a new page on this site, I noticed the Page Template option was missing from the Edit Page page.

I knew older pages were using the same template, so I knew the file wasn’t missing. I checked anyway. Yep, it was there. Maybe there was something weird in the header that was keeping WordPress from registering it as a template.

I downloaded and opened the template file and this is what I found (I replaced the template name to protect the sloppy):

<?php /* Template Name: [redacted] */ ?>

I would not have thought the absence of newlines would have mattered, but I knew that was not like the example that WordPress gives here. So I added some newlines.

<?php 
/* 
Template Name: [redacted] 
*/ 
?>

(Make sure you replace [redacted] with your template name.)

Then I uploaded the change, refreshed my Edit Page and the template option was restored.

I’m off to fix the other pages.

Hopefully in the next update of this theme they fix the problem or I will need to update the page files again.

Random String Shortcode To Fix A PDF Caching Problem

On my church’s website, we post links to our missionaries’ newsletters as PDF files. We have a problem with browsers caching the older newsletters so even though a new file is on the server, the older file appears in the browsers. Not even clearing the cache seems to work. Adding to the problem is when Cloudflare.com caches the file, so I have to log in and delete the cache there.

One solution is to rename the PDF file and then change the link on the site every time. But we like to be lazy efficient around here, so I came up with a shortcode function that inserts a random string.

Adding a question mark and a random string to the end of the link so the browser would  fetch the latest version of the file rather than get the cached version in their browser’s history.

So for each newsletter link, I went into HTML mode and added

?[randomstring]

to the end of the link’s href attribute. So

<a href="http://domain.com/newsletter.pdf">Newsletter</a>

became

<a href="http://domain.com/newsletter.pdf?[randomstring]">Newsletter</a>

and when the post/page is rendered in a browser, [randomstring] would be replaced by a random string of 5 characters. 5 is the default, but the length can be changed by setting the “length” attribute in the shortcode like this:

[randomstring length=10]

Here is the code you need to add to your function.php file in your WordPress theme to make this work.

/*
 random string function
*/
if (!function_exists("random_string")) {
function random_string($atts, $content = null){
 extract(shortcode_atts(array(
 'length' => '5' 
 ),
 $atts));
 $l = $length;
 /*
 Credit: This section of code by "kriskra at gmail dot com"
 http://www.php.net/manual/en/ref.strings.php#84888
 */
 $c = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxwz0123456789";
 for(;$l > 0;$l--) $s .= $c{rand(0,strlen($c))};
 return str_shuffle($s);
}
}

add_shortcode('randomstring', 'random_string');

I decided to keep this simple by not letting the function add the question mark, because a need may arise where you need to use an ampersand instead or perhaps nothing at all.

 

Use get_the_title(), not $post->post_title

WordPress lesson of the day:

If you want the title of a WordPress post, use the function get_the_title($post->ID) and not $post->post_title.

Both should work, but I found when you use smart or curly quotes (both single and double) in your post titles, using $post->post_title returns an empty string. Perhaps running a filter function would help, but I have no reason to go through that trouble right now.

 

 

 

WordPress 3’s New Menus

WordPress 3 has brought forth some new tricks like the customizable navigation menus which make it very easy to set up your own menus using a GUI. You can define and drag-and-drop the order of the menu items, and WordPress will output them as an unordered list (<ul><li>…</li></ul>).

Rather than try to explain it myself, just head over to Justin Tadlock’s post about the menus.

One missing piece was filled by John The Developer where I needed to add a custom class to the last menu item.  I was displaying a menu horizontally and using “margin-right” to space the menu items (inside <li> tags) apart, but I didn’t want that margin on the last item.  Here is John’s 8 lines of code solution.

Then in my CSS file, I defined “last-item” class as:

li.last-item {
     margin-right: 0 !important;
}

I did try using the pseudo-class of li:last-child which worked fine in Chrome and Firefox, but it did not work for Internet Explorer because IE has yet to recognize pseudo-classes.

Update Bonus: Want to add some collapsing menu goodness? Check out Daneomatic.com’s post.

FeedWordPress making invalid RSS?

As I mentioned in my last post, I’m using FeedWordpress to syndicate affiliate links.  I turned on the option to have the permalink to the affiliated articles to go straight to the affiliate link instead of the page (that may be bad for SEO, but one less click for visitors).

The problem was the RSS feed became invalid because of the affiliate link.  So I need to encode the link.  So on line 590 of feedwordpress.php, I changed

$uri = get_syndication_permalink();

to

$uri = esc_attr(get_syndication_permalink());

The esc_attr function is a built in WordPress function that converts certain characters to their HTML encoded equivalents. Such as “&” becomes “&amp;”.

Everything seems to be working fine now.

LinkShare AdMix and SEO Friendly Images plugins

If you are a LinkShare affiliate, there a great plugin called LinkShare AdMix that uses the RSS feeds of retailers you have partnered with to automatically insert posts of each item in the feed.  I had to do 2 things to get it to work:

  1. Line 111 of feedwordpress.php, I had to change $fwp_path = ‘feedwordpress’; to $fwp_path = ‘linkshare-admix’; because the code was not finding the install folder correctly.  Changing the folder name from “linkshare-admix” to “feedwordpress” may have worked too, but there is already a FeedWordpress plugin (which this plugin is based on) out there and should you need to install both for some reason, you don’t need them butting heads*.
  2. Be sure you copy the included Magpie RSS  files into your wp-includes folder to get everything to work right.

I noticed that the images the Linkshare feed was posting were not SEO’d – no alt or title tags.

Enter the SEO Friendly Images plugin which adds alt and title tags for you based on the posts title and keywords.  But it didn’t work.

Usually plugin problem lie in an incompatibility with another plugin, so I disabled a plugin one at a time to determine which one was causing the problem.

Guess what?  It was the LinkShare AdMix plugin.

I wondered if the original FeedWordpress plugin had the same problem, so I disabled the LinkShare AdMix plugin and installed the FeedWordpress plugin.  Same problem.  I remember seeing filters were called in the source code, so I searched for “filter” and found a commented paragraph about preserving the feed and not allowing other plugins to change it.  The 2 offending lines of code followed, and I promptly commented them out:

//add_filter(‘the_content’, ‘feedwordpress_preserve_syndicated_content’, -10000);
//add_filter(‘the_content’, ‘feedwordpress_restore_syndicated_content’, 10000);
Update: Yes, I totally missed the built-in option to “Expose sydicated posts to formatting filters” under Syndication options > Post & Links > Formatting >Formatting filters. *facepalm*  But this only works for the FeedWordpress plugin.  LinkShare AdMix plugin does not have this option, so you will need to comment out the 2 lines of code above to get it work with the SEO Friendly Images plugin.
Commenting out that code worked.  Just remember you will need to do this again when the Linkshare Admix plugin gets updated.
In the end, I think I will stick with FeedWordpress instead of LinkShare AdMix because I get more fine tune control and easier to add RSS feeds.
*I think installing both LinkShare AdMix and FeedWordpress would not workout because then need different versions of Magpie RSS.  Some recoding would be required to get them to play nice.