Tag Archives: PHP

How to get the featured image url from a WordPress post

How to get the featured image url from a WordPress post

This is going to be a very quick recipy.

Two lines I always use in order to obtain the url for the featured image, full size. This could be useful if you want full control of the code, like placing the image as a background for a box, instead of relying on the img tag that the_post_thumbnail() outputs.

Here you are:

<?php
     // GET IMAGE LINK
     $thumbfull = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );
     urlfull = $thumbfull['0']; 
?>

Now you can use $urlfull wherever you wish.

How to override parent theme functions in WordPress

How to override parent theme functions in WordPress

If you’re a WordPress theme developer/customizer you’ll have probably encountered the need to modify parent theme properties in a child theme. Different entities work differently:

  • Templates: php templates are totally replaced by the child theme if the file has the same name,
  • Styling: css is appended (because you’re are actually including the parent’s css to the top of the child’s) so any object with the same id will be overwritten.
  • Functions: but functions from the functions.php don’t work in the same way. Functions in your child theme will be loaded before the functions in the parent theme. This means that if your parent and child themes both have functions called my_function() which do a similar job, the one in the parent theme will load last, meaning it will override the one in the child theme.

However, there are three ways to change the order in which functions are fired, and you can prevent functions from being fired altogether:

  • Pluggable functions
  • Function priority
  • Removing functions from the hook they’re attached to

Pluggable functions

When writing a parent theme, it’s good practice to make your functions pluggable so that you can easily override them in child themes. This simply means to wrap them in a conditional tag with PHP’s function_exists() to check if a function with that name has already been run. This way the parent theme function does not override one the child theme, thus giving power to the child theme developer to rewrite parent functions just by maintaining it’s name.

This is how the parent theme should look like:

if ( ! function_exists ( 'my_function' ) ) {
    function my_function() {
        // Contents of your function here.
    }
}

This is what you’d write in the child theme:

function my_function() {
    // Contents for your function override here.
}

Function Priority

Sometimes pluggable functions are not available. Good practice wise, this is not acceptable for a good parent theme, but in reality there are frameworks out there so complicated and being maintained for so long, that functions exist outside functions.php and are usually not pluggable. This was my case so I had to seek further to be able to override them.

In WordPress, when adding your functions to an action or filter hook, you can assign a priority level to it. Functions will be added to the hook in ascending order. For instance:

function your_function() {
    // Contents for your function here.
}
add_action( 'init', 'parent_function', 20 );

This your_function() is hooked on init and has a priority of 20. So rewriting a child theme with priority 25 will override it’s behaviour:

function your_function() {
    // Contents for your function here.
}
add_action( 'init', 'parent_function', 25 );

But priorities are optional. On omission, WordPress will understand a priority of 10, so a priority 15 on a child theme function will be overriding it.

Removing Functions From Hooks

But sometimes, overloading a function is not enough to avoid it’s original behaviour after all. In this case you’ll need to actually de-hook the parent function and hook your child theme function instead by using remove_action() and remove_filter(). The one you use will depend on whether the function is attached to an action hook or filter hook in the parent theme.

To remove an function simply do:

remove_action( 'init', 'parent_function' );

However, this won’t work on its own, you need to attach this function to a hook which will fire after the hook which the parent theme function is attached to. This is because you can’t remove the action before it’s been fired.

function child_remove_parent_function() {
    remove_action( 'init', 'parent_function', [priority level] );
}
add_action( 'wp_loaded', 'child_remove_parent_function' );

NOTE: If the parent_function() was loaded using a priority level, you have to unloaded by stating the same level as well. That’s why [priority level] is in square brackets.

As you may imagine, wp-loaded is a hook that comes after init, so remove_action() can really remove the parent_function() that was loaded to init.

If what you want it was to delete a parent function, that’s all there is. If you would like to rewrite it, now you’re free to write whatever new function you’d like.

function child_function() {
    // your function
}
add_action( 'init', 'child_function' );
Active Screen Scrolling Mockup Effect for Websites

Active Screen Scrolling Mockup Effect for Websites

This is what I wanted to achieve for website portfolio pages like my last MONKEY Pictures item:

screenshot
*Scroll Me

And I wanted it to be responsive and to be super easily inserted into my WordPress editor. So, as we already did on the post on correct figure captioning on WordPress, we will be using again the function html5_insert_image to hook our own html5 code into WordPress.

MockUp image download

First, download the image from here and be sure to remember where your are uploading it.

functions.php

Then, copy & Paste the following code into your functions.php:

function html5_insert_image($html, $id, $caption, $title, $align, $url, $size, $alt) {
$url = wp_get_attachment_url($id);
$src = wp_get_attachment_image_src( $id, $size, false );

if ($caption) {
    if ($caption ="screenshot"){
        $html5 = "<div class='screendiv'><div class='dummy'></div><div class='screenpack'><figure class='screenshot' >";
        $html5 .= "<img src='$src[0]' alt='$alt' class='align$align'/>";
        $html5 .= "</figure><div class='screen-overlay'><span>*Scroll Me</span></div></div></div>";
    } else {
    $html5 = "<figure class='align$align withcaption' >";
    $html5 .= "<a href='$url' data-title='$caption'><img src='$src[0]' alt='$alt' class='align$align'/></a>";
    $html5 .= "<figcaption>$caption</figcaption>";
    $html5 .= "</figure>";
    }
} else {
    $html5 = "<figure class='align$align nocaption' >";
    $html5 .= "<a href='$url'><img src='$src[0]' alt='$alt' class='align$align'/></a>";
    $html5 .= "</figure>";
}

return $html5;
}
add_filter( 'image_send_to_editor', 'html5_insert_image', 10, 9 );

What this does is to insert a different code snippet depending on whether there is caption defined or not, and what this caption says. So now, whenever you upload a new image using the «Add Media» functionality and write «screenshot» as a caption, this is the html code that will be sent to the editor:

<div class='screendiv'><div class='dummy'></div><div class='screenpack'><figure class='screenshot' ><img src='$src[0]' alt='$alt' class='align$align'/></figure><div class='screen-overlay'><span>*Scroll Me</span></div></div></div>

css styling

Finally, for it to work nice you’ll need the following css rules on your style.css:

div.screendiv {
    display: inline-block;
    position: relative;
    width: 100%;
}
.dummy {
    margin-top: 100%;
}
.screenpack{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

figure.screenshot {
    position:absolute; 
    height:55%;
    z-index:100;
    top:3.5%;
    width:96.5%;
    overflow-y:scroll;
    margin-left:3.5%;
}
.screen-overlay {
    position:absolute; 
    z-index: 10000000;
    background: url('url-to-mockup.png') no-repeat; 
    background-size: contain;
    width:100%;
    height:100%;
    pointer-events:none;
}
figure.screenshot img {margin:0; padding:0;}
.screen-overlay span{color: #fff; font-size: 0.75em; float: right; margin-top:0.5%; margin-right: 3%; font-style: italic; text-transform: uppercase;}

Inline css (not usually a good idea)

Although it is not usually a good idea to inline you css, when it comes to sporadic use of a few snippets I do like to make use of this instead of cluttering my css files. So, to avoid the css avoid, the new code for the functions.php would be:

unction html5_insert_image($html, $id, $caption, $title, $align, $url, $size, $alt) {
$url = wp_get_attachment_url($id);
$src = wp_get_attachment_image_src( $id, $size, false );

if ($caption) {
    if ($caption ="screenshot"){
        $html5 = "<div class='screendiv' style='display: inline-block; position: relative; width: 100%;'><div class='dummy' style='margin-top: 100%;'></div><div class='screenpack' style='position: absolute; top: 0; bottom: 0; left: 0; right: 0;'><figure class='screenshot' style='position:absolute; height:55%; z-index:10; top:3.5%; width:96.5%; overflow-y:scroll; margin-left:3.5%;'><img src='$src[0]' alt='$alt' class='align$align' style='margin:0 !important; padding:0 !important;'/></figure><div class='screen-overlay' style='position:absolute;z-index: 100; background: url(http://obsessive-coffee-disorder.com/wp-content/themes/implicit-child/images/imac-transp.png) no-repeat; background-size: contain; width:100%; height:100%; pointer-events:none;'><span style='color: #fff; font-size: 0.75em; float: right; margin-top:0.5%; margin-right: 3%; font-style: italic; text-transform: uppercase;'>*Scroll Me</span></div></div></div>";
    } else {
    $html5 = "<figure class='align$align withcaption' >";
    $html5 .= "<a href='$url' data-title='$caption'><img src='$src[0]' alt='$alt' class='align$align'/></a>";
    $html5 .= "<figcaption>$caption</figcaption>";
    $html5 .= "</figure>";
    }
} else {
    $html5 = "<figure class='align$align nocaption' >";
    $html5 .= "<a href='$url'><img src='$src[0]' alt='$alt' class='align$align'/></a>";
    $html5 .= "</figure>";
}

return $html5;
}
add_filter( 'image_send_to_editor', 'html5_insert_image', 10, 9 );

How does it work?

Well, the structure is pretty simple. Two elements, figure and div with overlay picture wrapped by the same div. This is then wrapped inside another div together with a dummy content div that is need to help calculate the height of the figure and the overlay for any width and, thus, making the mockup totally responsive for any screen width! And without any javascript or media-queries!

Untitled-1

The problem

Setting the width to 100% (or whatever you want it to be) of both —figure and screen-overlay— is easy, but the height isn’t as it depends entirely on the ratio and proportions of your overlay image. Using the css3 “function” calc() for a ration calculation on the height wasn’t going to help because the percentage used is taken from the height of the parent div, not it’s width.

So can you have a div with a height that is always the same as (or proportional to) it’s width?

I found the answer here: JSFIDDLE, and by changing the dummy’s percentage you can actually decide on your own div’s ratio. Clever, right?

Ultimately

  1. Download the overlay mockup image or create one yourself.
  2. Copy & paste the functions.php code into your functions file
  3. Copy & paste the css into the style.css file
  4. Change as desired
  5. Add an image and write «screenshot» as it’s caption
  6. Repeat 5 as many times as desired
Easy peasy MAMP installation How-To

Easy peasy MAMP installation How-To

To work on a website development, the easiest way is to have a local installation of your CMS —WordPress on my case.

Whenever I have to activate one of these, I always have trouble remembering all the steps or wether this OS X version has or hasn’t this or that. So this is my checklist for MAMP installation based on Mavericks.