Customize WordPress With Four Easy-To-Add Scripts

Posted in WordPress3 years ago • Written by 5 Comments

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.

1. Gallery inside any post


Let’s say you want to put galleria in a couple of posts (with no specific rule, could be any post, in any category).

Boolean custom field

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).

Our single.php

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(); ?>

Our images

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>

2. Syntax highlighter inside tutorial category


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"/>

Category testing technique

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" />';
	}
}

3. Demo inside tutorial itself


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.

URL custom field

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!

4. Custom ads for every post


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.

Now it’s your turn!


So, what do you think? Could you think of other places, or different ways, to use these scripts? Hope you enjoyed my article!

43 Written ArticlesWebsiteGoogle+

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/

5 Comments Best Comments First
  • syed nayab

    Monday, December 19th, 2011 12:33

    1

    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…

    0
    • Alex

      Monday, December 19th, 2011 19:17

      2

      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.

      0
  • Dan

    Sunday, December 25th, 2011 23:49

    3

    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

    0
    • Rochester Oliveira

      Monday, January 2nd, 2012 19:13

      5

      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

      0
  • Rochester Oliveira

    Monday, January 2nd, 2012 19:08

    4

    Thanks, Amber, I’m glad you liked!

    0
  • Rochester Oliveira

    Monday, January 2nd, 2012 19:08

    4

    Thanks, Amber, I’m glad you liked!

    0
  • Dan

    Sunday, December 25th, 2011 23:49

    3

    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

    0
    • Rochester Oliveira

      Monday, January 2nd, 2012 19:13

      5

      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

      0
  • syed nayab

    Monday, December 19th, 2011 12:33

    1

    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…

    0
    • Alex

      Monday, December 19th, 2011 19:17

      2

      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.

      0

Comments are closed.

54.83.238.24 - unknown - unknown - US