Total Followers 132,503
Probably at some point you wanted to customize things in WordPress instead of using the “default” for every page. Like a pretty image gallery in a few posts, a syntax highlighter for your tutorial category or a demo page for your tutorials.
Well all those things break the standard, so people will see it as “impossible” to change. Should you put the following scripts on every page? No. That would be a waste of resources, since you’ll load a lot of useful things many times. Should you put them directly in your content (dear lord, please, don’t ever do this)? This would be really hard to maintain, since every simple change would be a big waste of time because you would have to make those changes post by post.
Let’s see a couple of ways to get this easily working.
Let’s say you want to put galleria in a couple of posts (with no specific rule, could be any post, in any category).
Then your best option is to insert a custom field, and there just put any value, like “1″, so you’ll know that this one is a gallery post.
It’ll be something like this:
Now, little grasshopper, you may ask yourself why don’t we just put our script there, in our custom field, or even inside the content (argh!). We do it this way because if for any reason we change our script (like a plugin update, or change our theme) we can easily change it in a single place. Otherwise it would be way harder to make even small changes (like put a new color in your gallery).
Now we need to get this field, and then en queue our script! Just like that!
Where you have:
<?php get_header(); ?>
You’ll replace with:
<?
add_filter('wp_head','galleria_script');
function galleria_script(){
//we need to get our post ID outside the loop
global $wp_query;
$post_id = $wp_query->post->ID;
$has_galleria = get_post_meta($post_id, "galleria", true);
if ( ! empty($has_galleria) ) {
echo '<script type="text/javascript" src="'.get_bloginfo("template_url").'/js/galleria/galleria-1.2.5.min.js"></script>';
echo "\n <script type=\"text/javascript\"> \n
$(\"#gallery\").galleria({ \n
width: 500, \n
height: 500 \n
}); \n
</script>";
}
}
get_header(); ?>
Now we just make sure that all our images meet galleria’s specifications. You could even upload all your images via custom fields and use a shortcode to put them in place (so you won’t need to change the HTML at all). But for now we’ll do it with HTML:
<div id="gallery"> <img src="photo1.jpg" alt="" /> <img src="photo2.jpg" alt="" /> <img src="photo3.jpg" alt="" /> </div>
Let’s say that just like 1WD you publish a few cool coding tutorials every now and then. So it’s good to have a syntax highlight plugin, right?
If you just put it in your header.php every single post will have syntax highlight plugin files, even the non-coding ones. Like this:
<script type="text/javascript" src="http://www.1stwebdesigner.com/wp-content/plugins/wordpress-code-snippet/scripts/shCore.js"></script> <link href="http://www.1stwebdesigner.com/wp-content/plugins/wordpress-code-snippet/styles/shCore.css" rel="stylesheet" type="text/css" /> <link type="text/css" rel="Stylesheet" href="http://www.1stwebdesigner.com/wp-content/plugins/wordpress-code-snippet/styles/shThemeDefault.css"/>
Our solution this time is to use a simple category test. Let’s say that your coding category is “WordPress”. Then all you have to do is check if the post uses “word press” category, and then you’ll add syntax highlight scripts.
add_filter('wp_head','syntax_script');
function syntax_script(){
global $wp_query;
$post_id = $wp_query->post->ID;
$has_cat = in_category( "wordpress", $post_id );
if ( ! empty($has_cat) ) {
echo '<script type="text/javascript" src="'.get_bloginfo("url").'/wp-content/plugins/wordpress-code-snippet/scripts/shCore.js"></script>';
echo '<link href="'.get_bloginfo("url").'/wp-content/plugins/wordpress-code-snippet/styles/shCore.css" rel="stylesheet" type="text/css" />';
echo '<link type="text/css" rel="stylesheet" href="'.get_bloginfo("url").'/wp-content/plugins/wordpress-code-snippet/styles/shCore.css" rel="stylesheet" type="text/css" />';
}
}
Another cool thing that you can do is to add demos directly inside your page. In order to get them working properly you may want to use iframes, so you ensure that the scripts and styles of your site won’t conflict with the ones from the demo.
What you need to do here is to add a simple meta with your demo URL:
And then you’ll just check in your single if there is anything in your demo-url. If there is anything it’ll show this url in an iframe, if not, it’ll just ignore and go on. Put this in the end of your loop (or any other place you want to display demo):
<?php
//loop stuff here
//still inside loop, otherwise $post->ID won't work
$demo = get_post_meta($post->ID, "demo-url", true);
if ( ! empty($demo) ) {
echo '<iframe src="'.$demo.'" width="100%" height="300"><p>Sorry about that. Your browser does not support iframes.</p></iframe>';
}
//now you can finish your loop!
Well, despite of Google’s algorithm to recognize your post’s main topic and serve ads related to it, sometimes you may want to show different ads for different kinds of posts. For instance, you may serve affiliate links for “reviews”, Technorati ads for “funny” and google ads for “tutorials”.
This can be done with get_template_part function. With this function you can include external files inside your loop. So you just need to create a folder called “ads” in your template, set up your main files with the same name of your category slog.
Then at some point, your code will check which template part will be included, this way:
$cats = wp_get_post_categories( $post->ID );
foreach($post_categories as $c){
$cat = get_category( $c );
get_template_part( 'ads/'.$cat->slug );
}
So if you have a post that is “funny” and “review”, you’ll show 2 ad blocks.
So, what do you think? Could you think of other places, or different ways, to use these scripts? Hope you enjoyed my article!
Get The Only Freelancer crash course you will ever need to read!
I'm a web designer and entrepreneur from Itajubá (MG), Brasil. I love writing about obscure topics and doing some cool stuff. And also I do some FREE stuff, check it out: http://www.roch.com.br/
Sunday, December 25th, 2011 23:49
I’m sorry, I was really excited when I found this article today as I had been trying to port galleria into wordpress, but now I am disappointed the directions are not very clear, and after following them it fails to work. I do not see at all how the custom field relates to the code added later on, and I find your explanation to be lacking. Please explain it more clearly. FYI: I am trying to use a page instead of a post, so I edited page.php
Monday, January 2nd, 2012 19:13
Hey Dan, probably your wordpress doesn’t have custom fields for pages. Try creating a post just to try the technique (just add a custom field as I said and your scripts and it’ll work as expected)..
Then you have to add custom fields for pages so you’ll have what you want in first place with a plugin like custom field template
[]‘s
Monday, December 19th, 2011 12:33
December 12th, 2011 | Author: admin
Posted in Uncategorized | No Comments »
Hi, i want to remove it from my blogs, they are annoying..can you please hlep me with that…
Monday, December 19th, 2011 19:17
In your single.php search for ” | Author:
Posted in | and here something with comments” and remove this part. The same for your blog page.
I wrote this fast without checking it, but i’m pretty sure it’s something like this or with just a small variation.
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
![Basic Web Design Video Course – Complete HTML Markup & CSS Styles [Part 3]](http://www.1stwebdesigner.com/wp-content/uploads/2013/03/preview-small-webdesignvideocoursepart3.jpg "Basic Web Design Video Course – Complete HTML Markup & CSS Styles [Part 3]")
![Basic Web Design Video Course – Basic HTML Tags, Structure & CSS [Part 2]](http://www.1stwebdesigner.com/wp-content/uploads/2013/03/preview-small-basicwebdesignvideocoursepart2.jpg "Basic Web Design Video Course – Basic HTML Tags, Structure & CSS [Part 2]")
syed nayab
Monday, December 19th, 2011 12:33
December 12th, 2011 | Author: admin
Posted in Uncategorized | No Comments »
Hi, i want to remove it from my blogs, they are annoying..can you please hlep me with that…
Alex
Monday, December 19th, 2011 19:17
In your single.php search for ” | Author:
Posted in | and here something with comments” and remove this part. The same for your blog page.
I wrote this fast without checking it, but i’m pretty sure it’s something like this or with just a small variation.
Dan
Sunday, December 25th, 2011 23:49
I’m sorry, I was really excited when I found this article today as I had been trying to port galleria into wordpress, but now I am disappointed the directions are not very clear, and after following them it fails to work. I do not see at all how the custom field relates to the code added later on, and I find your explanation to be lacking. Please explain it more clearly. FYI: I am trying to use a page instead of a post, so I edited page.php
Rochester Oliveira
Monday, January 2nd, 2012 19:13
Hey Dan, probably your wordpress doesn’t have custom fields for pages. Try creating a post just to try the technique (just add a custom field as I said and your scripts and it’ll work as expected)..
Then you have to add custom fields for pages so you’ll have what you want in first place with a plugin like custom field template
[]‘s
Rochester Oliveira
Monday, January 2nd, 2012 19:08
Thanks, Amber, I’m glad you liked!