Mar 7, 2012

Wordpress page as external link

Let's say you need a "Contact" page in your Wordpress but you don't want a page displayed. All you want is to open the email client with a "mailto" link. How to do that?

After digging on the web for some time i found this solution. You just have to create a blank page in your wordpress, and then put this in the title of the page:

<a href=”your-link”>The title</a>

So for example, if you want to open the mail client to your  email address, you should put a page title like:

<a href=”mailto:contact@mysite.com”>Contact</a>

And what if you want to point the link to another site?

<a href=”http://www.google.com”>Go to Google</a>

No plugins, no special tricks needed to put a link to a mail address or external link in your menu bar!

Thanks to Ulysses for the info.

Have fun!

Mar 5, 2012

Wordpress: Get page slug

So what if you need the page slug when programming on Wordpress? It doesn't have a function like "the_slug()". But no problem! You can put this code inside your "functions.php", located in your theme folder, and use it in your theme code!

function get_the_slug() {
    global $post;
    if ( is_single() || is_page() ) {
       
        return $post->post_name;        
    }else{
        return "";   
                  }   
}
You can use this function to generate a custom code for your page, according to the page you are in, like:

<?php
    if (get_the_slug()=="Contact"){
        echo "<span>Welcome to Contact section!</span>"
    }
?>
 BTW I got the code from the Wordpress codex (link here) , thanks to sligowaths for the code! I just tought that it would be nice to make it a bit more visible and show it's use.

Have fun!

Mar 2, 2012

Custom background gallery with Wordpress

Recently I had to make a Wordpress based site with a custom background. A friend of mine suggested using Wordpress gallery (via attaching the images to the pages) to do it. It's possible, and I have done it, however the actual site has to be moved, and i experienced some problems exporting and importing the posts and pages. The problem is, that when exporting, it gives some kind of error about the attached images.


So, i tried to find out another way to set background images for a Wordpress site, in a more easy and movable way. My purpose was to put all images on some sub-folder of the theme, and then use a custom field the page. This, combined with some magic code inside "functions.php" code, can make it possible.


Here are the steps!


1. Add a custom field to your pages. In my case, i called it "bgrange". (If you don't see custom fields it's because they are hidden, click "Screen options" upper right of the screen, for later Wordpress versions, after 3.2 i guess, then check "custom fields" check-box).


2. Put a value in the custom field. The code i made is able to recognize background ranges. Note that your backgrounds must be named with the same prefix and suffix, for example "my_background_XX.png", where XX is the number of the background. In the case of the image, the images selected are the named "my_background_01.png", "my_background_02.png",etc, until 8, and the final one is the image "my_background_19.png", in this case. Prefix and suffix can be set later to fit your preferences, as will be seen. Do this operation on all the pages that you want to show the custom background.


 3. Let's add some PHP code in your page header, for example.
<div id="preload" style="display:none;">
    <?php    
        $bgpath = "".get_bloginfo("template_directory")."/images/backgrounds/";
        $range = "".get_post_meta($post->ID, 'bgrange', true);
        echo "\n";
        get_backgrounds2($bgpath, "my_background_" ,".png", $range);
    ?>
</div>

Ok what this code does is: put a div with an ID called "preload" that is hidden, so images won't be displayed for now. Then, the php code gets the template directory of your theme, and supposes that your backgrounds are inside "<yourthemename>/images/backgrounds". You can change that to fit your needs. The second php line gets the custom field that we just added to the page. This is a string, that will be treated afterward. After that, a simple "echo \n" to ease the readness of the code (not necessary but makes easier to read your code). The final statement uses a custom function that has to be defined on your "functions.php", a file located in your theme folder in case you don't know, that includes a lot of functions used by your theme to make it work. So, the last step is to put these functions on functions.php file!

3. Open your functions.php file and put this code:

function get_backgrounds($path, $prefix, $sufix, $start, $end) {
    if($start<=$end){
        for($n=$start; $n<=$end; $n++){
            $nstr = trim("".$n);
            if($n<=9 && $n>=0){$nstr = "0".$nstr;}
            echo "<img class=\"bgimage\" src=\"".$path.$prefix.$nstr.$sufix."\"/>";
            echo "\n";
        }
        return true;
    }else{       
        for($n=$start; $n>=$end; $n=$n-1){
            $nstr = trim("".$n);
            if($n<=9 && $n>=0){$nstr = "0".$nstr;}
            echo "<img class=\"bgimage\" src=\"".$path.$prefix.$nstr.$sufix."\"/>";
            echo "\n";
        }
        return true;   
    }
    return false;
}

function get_backgrounds2($path, $prefix, $sufix, $list) {
    $data = explode(',', $list);
    for($n=0; $n<count($data); $n++){
        if(strpos($data[$n], '-') !== false){
            $rdata = explode('-', $data[$n]);
            get_backgrounds($path, $prefix, $sufix, $rdata[0], $rdata[1]);
        }else{       
            $nstr = trim("".$data[$n]);
            if(intval($data[$n])<=9 && intval($data[$n])>=0){$nstr = "0".$nstr;}
            echo "<img class=\"bgimage\" src=\"".$path.$prefix.$nstr.$sufix."\"/>";
            echo "\n";
        }
    }
    return true;
}


What makes this code? Ok, let's start by the second function. Basically what it makes is to get a path (the path to your backgrounds) a prefix (remember, "my_background_" for example), a suffix (".png" for example) and a list (that is, the custom field we added to our pages). The list is "exploded" into individual elements, separated by commas. Then, if a range of backgrounds is detected, the first function is called, that in turn explodes it and generates the list of images. If no range detected, the list elements generate individual backgrounds. You finally end up with a list of "<img>" elements "echoed" (that is, generated HTML put on your page). Since the <div> element that they are in is hidden, there is no problem. We just need that code in the page , so we can use it afterward.

So, now we have our page with a hidden div, and the images on it, they are not displayed but the code is there, now what?


4. Use a jQuery or JavaScript plug-in to show the images as backgrounds. I used successfully Supersized to do so. You just need to go to their page, i recommend you to check the demos and then download the source code. Then play with the downloaded demos locally, and check the code. It's really nice and easy to put it in your page. You will end up with a Javascript code like this:

<script type="text/javascript"> 
                var slidelist=[];
               
                function put_in(){
                    var x=$(this);
                    var source= ""+x.attr("src");
                    slidelist.push({'image': source});
                }
               
                var bgs = $(".bgimage");
                bgs.each(put_in);


The code above will let you put all the elements of a certain class, in this case ".bgimage" into a list. Get a look at the php code on functions php, and you will notice that this class is added to every image. So once you have the list, you can call the Supersized plug-in like this:

                $.supersized({ 
               
                    // Functionality
                    slide_interval          :   3000,        // Length between transitions
                    transition              :   1,             // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                    transition_speed        :    700,        // Speed of transition
                                                              
                    // Components                           
                    slide_links                :    'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
                    slides                     :      slidelist                   
                });
</script>

 I hope it helps you making your custom backgrounds easier and more movable, and without the long and boring process of attaching the images to your pages.

See you soon!