Tag Archives: wordpress

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' );
Mass editing a string in a WordPress MySQL Database

Mass editing a string in a WordPress MySQL Database

I’ve encountered many times with the need to change a certain string from a database in order to adapt all images and hardcoded links from one url to a different one. But there are more cases you would want to search & change a string by accessing directly your databases:

  1. images not working and you need to change their URL,
  2. changed the home URL in “settings” and can’t access your blog anymore,
  3. changing a phrase or spelling you’ve been using incorrectly all throughout,
  4. changing all instances of the name and slug of an old custom post type to a new one,

Log into your PhpMyadmin panel and search for the SQL console and use this line:

UPDATE wp_posts SET `post_content` = REPLACE (  `post_content`,  'Item to replace here',  'Replacement text here');

Where wp_posts responds to the name of your posts table which will vary depending on your table index.

find-and-replace-text-in-wordpress

Or log in via a shell command:

mysql -u username -ppassword
use mywordpress_table;
UPDATE wp_posts SET post_content = REPLACE (  post_content,  'text to find here',  'text to replace here');
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
Html5 correct figure captioning for WordPress

Html5 correct figure captioning for WordPress

The problem

You may have noticed that when WordPress inserts an image into the Editor it creates this kind of code:

<a title="foobar" href="http://url_to_image.jpg">
    <img class="align size-full" title="foobar" src="url_to_image.jpg" alt="foobar"/>
</a>

And if you include a caption to the image it will show up like this:

[ caption id="attachment_id" align="align" width="xxx" ]
    <a href="url_to_image.jpg">
        <img src="url_to_image.jpg" alt="" title="foobar" width="xxx" height="yyy" class="size-large" />
    </a> 
Caption Here[ /caption ]

But that is obviously not correct Html5 markup and not at all semantic or parsable by robots. I’m very surprised at how slowly WordPress adapts to Html5, while it’s already been going on for years now.

The solution

So here’s the hack.

Edit your functions.php (ideally you’re working on a Child copy) and add the following:

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) {
	$html5 = "<figure class='align$align withcaption' >";
	$html5 .= "<a href='$url' data-title='$caption'><img src='$src[0]' alt='$alt' /></a>";
	$html5 .= "<figcaption>$caption</figcaption>";
	$html5 .= "</figure>";
} else {
	$html5 = "<figure class='align$align nocaption' >";
	$html5 .= "<a href='$url' data-title='$caption'><img src='$src[0]' alt='$alt' /></a>";
	$html5 .= "</figure>";
}

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

What this does is hook this new function that re-writes the html being sent to the editor from the Media Browser making use of Html5’s figure and figcaption tags.

So now, for newly inserted images (not the already inserted ones), you get this code instead:

<figure class="align nocaption">
    <a href="url_to_image.jpg"><img src="url_to_image.jpg" alt="Alt text"></a>
</figure>

And with a caption:

<figure class="align withcaption">
    <a href="url_to_image.jpg" data-title='Caption Here'><img src="url_to_image.jpg" alt="Alt text"></a>
    <figcaption>Caption Here</figcaption>
</figure>

The styling

Finally, it is very easy to style these new tags. Here’s an example:


/* Restyling for figcaptions */

#main-content figure.withcaption {
	border: 1px solid #DDD;
	padding:5px;
	background: #fff;
	border-radius: 3px;
}

#main-content figcaption {
	background: #FFF;
	color: #666;
	text-align: center;
	padding: 5px 0;
	color: #8c8d94;
	font-size: .8em;
	font-style:italic;
}

This is an example of a styled Html5 figcaption imported directly from the Media Browser.
This is an example of a styled Html5 figcaption imported directly from the Media Browser.
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.

Transfering posts from one custom post-type to a different one

Transfering posts from one custom post-type to a different one

The problem

When you change the theme on a WordPress installation that heavily depended on custom post-types —to show product/portfolio items, for instance— you might find that they won’t be using the same slug for this custom post-type. This means that your existing items will not be accessible from WordPress’s control panel with the new theme installed.

Custom logo on login form for WordPress

Custom logo on login form for WordPress

Sometimes you want to deliver a fully customized WordPress installation and theme, and this is a very simple fix that’ll step up your game.

By adding the following function into the functions.php file (or creating your own functions.php file for a child theme), you are telling WordPress to grab the logo from somewhere else in order to integrate the login form into the whole corporate image.

Infinite scrolling gallery

Infinite scrolling gallery

Explosive cocktail of jQuery plugins you probably are very used to seeing around the web and didn’t know.

In a nutshell, Isotope, the chemical arrangement by David Desandro, helps create a grid style layout with totally out of the box responsive and fluid properties and many options; Infinite Scroll, by Paul Irish, will ease the navigation not having to click through pages anymore (yes, you’re right, just like Google images, Twitter, Facebook, Pinterest…); Inview, by Protonet, applies some nice effects to the blossoming content; and finally Lightbox, by Lokesh Dhakar provides an overlay to display full screen images when clicked.

Pages: 1 2 3 4 5 6 7 8