Per Post Scripts & Styles of Javascript or CSS on a WordPress Blog

If you’ve ever tried to post a tutorial or demonstration of Javascript or CSS on a WordPress blog, you’ve inevitably faced the challenge of figuring out how to load the scripts and styles for just that post.

The easy way is to add the styles to your main stylesheet and add the Javascript code to your main Javascript file (if you have one), but that’s not really a very nice thing to do to your viewers, especially if your post specific code ends is rather large. Visitors end up downloading code they’ll likely never visit, and every time you want to a new post, those files will have to be recached.

A better way would be to only load post-specific Javascript and CSS when you’re looking at that particular post. Unfortunately, WordPress doesn’t provide a built-in way to do this.

I’ve seen a few plugins that do this, but all of them are pretty hackish and don’t have nearly enough customization options. So after much frustration with the existing plugins, I decided to write my own.

Allow me to introduce Per Post Scripts & Styles. You can download the plugin hosted on WordPress.org or follow the source on Github.

 

Why it’s better

• Dynamic URLs with %SITE_URL% and %THEME_URL% variables
• Script dependency support as well as script duplication checking
• The option to load scripts in either the header and footer
• Attach scripts to posts, pages, and custom post types
• Load attached scripts and styles not just on that post’s page, but on the home page or any other page where that post is displayed.

Perhaps the worst thing about the existing plugins is they force you to hard code your script and style URLs. Not only is this bad practice, but it’s particularly inconvenient if (like me) you do most of your development locally, and then upload to your server. Obviously if I attach http://localhost:8888/javscript/some-file.js to a post, that’s not going to work when it to my production server. This also applies to anytime you need to switch to URLs. Per Post Scripts & Styles allows you to use variables like %SITE_URL% and %THEME_URL% making this issue much easier to manage.

Another big problem with the existing plugins is they simply collect your URLs and plop them out in the header. This goes against WordPress best practices for two very compelling reasons: (1) no duplication checking and (2) no dependency checking. Imagine if you wanted to include a that required jQuery to run. You could list jQuery as one of the scripts to attach, but what if another plugin is already loading jQuery? Now you’ll be loading it twice!

Per Post Scripts & Styles takes care of all these issues for you. A meta box is added to every post, page, or custom post type you choose, and all you have to do is specify which the URLs should be loaded. The plugin takes care of the rest.

 

Documentation

Edit Post Screen

In the edit post screen there is a meta box below the post content box titled “Per Post Scripts & Styles”. Simply enter the URLs of any Javascript or CSS files that you want to load in the appropriate box.

Instructions

• When entering the URLs, you may use the variables %SITE_URL% and %THEME_URL% for greater flexibility, e.g. %SITE_URL%/scripts/this-post-script.js
• To have multiple scripts, put each on on its own line.
• If your script has one or more dependencies, add them as a comma separated list in braces at the end of the URL, e.g. %SITE_URL%/scripts/code.js{jquery,json2}. Here is a list of possible dependencies that ship with WordPress.

Header Scripts

List script URLs to be enqueued in the header.

 

Footer Scripts

List script URLs to be enqueued in the footer. (The footer is often the best place to put Javascript files because it doesn’t slow the loading of the other HTML content.)

 

Styles

List stylesheet URLs.

 

Extras

Hardcode Javascript or CSS here. It will be outputted right before the </header> tag. Make sure to properly use the <script> and <style> tags. Note: while this is primarily used for Javascript and CSS, the contents of this box is dumped at the end of the header on the page. Anything extra you want to put in the header when this specific post is loaded can go here.

 

Settings Page

Allow Per Post Scripts & Styles For The Following Post Types:

 

Choose one or more of the post types to allow attaching specific scripts and styles to. If you have custom post types, they will appear in this list as well.

Only Load Scripts & Styles When

 

Most of the time you will want to select single post pages only. The only exception is if you’re displaying the full content (not just the excerpt) of a post on another page. This blog, for example, is using the second option because it displays the full content of some posts on the home page. Keep in mind, however, that selecting all pages will add a considerable amount of overhead to each page load since it will have to query the database for every post loaded on every page. Only use this if absolutely necessary.

Read More

How to Replace Changed URL in Wordpress Posts

If you transferred your Wordpress site to a new domain or changed your current Wordpress URL, you'll probably find a bunch of references to the old site URL that need to be updated. Wordpress stores the site URL, links in images, and links in posts and pages as full URLs. When you change your URL, Wordpress does not automatically update old links. This post tells you how to update all of these links without having to manually edit each and every post.

This post doesn't explain how to transfer a Wordpress site. You can read some more details about moving Wordpress here. Typically when completing a test site and moving to a production server, I'll do a full MySQL dump using mysqldump --add-droptable via command-line, then transfer all files and process the SQL on the new server.

Copying your WP installation to a new server does not replace URL references automatically, so after any transfer you end up with a bunch of broken links. Not good! Fortunately there are a few easy SQL commands you can run to update your posts, pages and site URL.

Replace the references to olddomain.com and newdomain.com in the SQL code below with your actual URLs. Then you can run each query via phpMyAdmin or command-line, whatever your preference.

Always make a backup before doing bulk changes to your Wordpress database!

Step One: Replace URL in config

1 2 3

UPDATE wp_options SET option_value = replace(option_value, 'http://www.olddomain.com', 'http://www.newdomain.com') WHERE option_name = 'home' OR option_name = 'siteurl';

Step Two: Replace URL guid in WP posts

1 2	UPDATE wp_posts SET guid = replace(guid, 'http://www.olddomain.com','http://www.newdomain.com');

Step Three: Replace links in WP post content

1 2	UPDATE wp_posts SET post_content = replace(post_content, 'http://www.olddomain.com', 'http://www.newdomain.com');

Now you can just browse to your new site and test everything out. If everything went well, the SQL commands should have fixed all references to the old links in your Wordpress posts and site config.

Read More

Getting the Most from WordPress Post Thumbnail

The majority of page on the Internet includes an image; blogs are no exception.  More and more blogs are introducing newspaper style layouts with a large image at the top of each article.

Previously in WordPress the methods to display these was clunky, either having to upload and paste the URL into a custom field or using a php script to interrogate the content to find the first image.

WordPress 2.9 and above have bought a nice and easy solution to this problem with the introduction of post thumbnail.

Post thumbnail adds an additional meta box to your posts and pages allowing your editors to upload their own images completely separate to the content. It also has the ability to automatically crop your images to the correct size ensuring nothing ever looks out of align on your website.

Implementing Post Thumbnail

To enabled Post Thumbnail simple paste the following into your functions.php. I have also included the code to enable Post Thumbnail in just pages or posts.

if(function_exists('add_theme_support')) {
 add_theme_support('post-thumbnails');
 // add_theme_support('post-thumbnails', array('post')); // Add to posts
 // add_theme_support('post-thumbnails', array('page')); // Add to pages
}

Once enabled you should see a new meta box in your posts and pages in your WordPress admin.  We now need to tell WordPress what size we want the thumbnail to be.  You can do this by simply placing the following into your functions.php file.

set_post_thumbnail_size(570, 200, true); // width, height, crop (true or false)

In most cases we’ll want a few difference sizes for our post thumbnail for various areas of our website such as homepage, archives, single and search. This can be accomplished by creating new image sizes. Add this to your functions.php.

add_image_size('single_post', 200, 120, true); // name, width, height, crop

You can add as many of these as you want but remember it will create a crop for each image you upload so if you’re limited on space you may wish to try and keep them to a minimum.

Post thumbnails are created at the time the image is uploaded so if in the future you change your cropping sizes all previous post thumbnails uploaded won’t resize.  There is a plugin available called Regenerate Thumbnail which will go through all of your images and resize them to the new sizes.

Now we’ve set all the settings to our theme we can look at displaying the post thumbnail. You can use the following code in any loop to display a post thumbnail.

<?php
if (has_post_thumbnail()) {
 // an image has been uploaded lets display it
 the_post_thumbnail();
 // the_post_thumbnail('single-post'); // use to display custom thumbnails
  we've added previously
 // $image = get_the_post_thumbnail(); // this will return the image as a
  variable instead of printing it.
} else {
 // you may wish to include your previous method
  for older content or a default image?
}
?>

Here we’re displaying the post thumbnail in the loop. First we’re checking whether the post has a thumbnail attached to it.  If the thumbnail is present we can then either print out the default size or a custom one we’ve previously created in our functions.php file. I have added an else statement in this post in case you wish to add a default image or carry on supporting previous methods used before this function was used on your website.

Adding Post Thumbnail to your RSS

Unfortunately regardless of whether Post Thumbnail has been activated in your functions.php WordPress will not display them in your RSS feed. We can include the following function will add the thumbnail if available to each post in your RSS. Place it in your functions.php.

function rss_post_thumbnail($content) {
   global $post;
    if(has_post_thumbnail($post->ID)) {
         $content = '<p>' . get_the_post_thumbnail($post->ID) .
                '</p>' . get_the_content();
    }
    return $content;
}
add_filter('the_excerpt_rss', 'rss_post_thumbnail');
add_filter('the_content_feed', 'rss_post_thumbnail');

That’s it! Its really that simple.

Read More

How to Solve ‘You Do Not Have Sufficient Permissions to Access This Page.’ in WordPress

I have been running into troubles logging in to WordPress and was kinda frustrated all morning.

Basically each time I use tried to log in, I get:

You do not have sufficient permissions to access this page.

I could not edit the blog, nothing works except the front page. I did a couple of searches at Google but the solutions didn’t seem to work for me.

In the end, I did a new installation of WordPress and scrutinized every damn thing in the users and usermeta table between a database that worked and a database that doesn’t.

Did you change the prefix of your table names in WordPress after the migration?

In my old database, I used ‘wp_’ as my prefix. As I migrated, I decide to use ‘wp3_’ instead of ‘wp_’. Unfortunately, the meta_key values are tied down to:

• wp_user_level
• wp_capabilities
• wp_autosave_draft_ids

I need to update it to

• wp3_user_level
• wp3_capabilities
• wp3_autosave_draft_ids

I wrote an SQL statement to share, just replace ‘prefix_’ with your new WordPress prefix. The following statements go to ‘meta_key’ and does a string replace from ‘wp_’ to ‘prefix_’.

UPDATE `prefix_usermeta` SET `meta_key` = REPLACE( `meta_key` , 'wp_', 'prefix_' );

(Make sure you do backups first! Note that the quotes used for string and field name are different.)

In the options table, there is ‘wp_user_roles’, make sure you get that changed into ‘prefix_user_roles’.

UPDATE `prefix_options` SET `option_name` = 'prefix_user_roles' WHERE `option_name` ='wp_user_roles' AND `blog_id` =0;

(Make sure you do backups first! Note that the quotes used for string and field name are different.)

With everything set, I tried logging in again and it worked. A happy WordPress user once again. I am using WordPress 2.2.2 before the migration and I did not upgrade WordPress during the migration. Hope it helps. (Applies to WordPress 2.3.3 also.)

Read More