Categories
Wordpress

Password Protect more than just Content and Comments

The following is not a news, but today I had to fix a problem like that at work, so I thought that can be repeated for who has a similar situation.

worpress-password-protected

In WordPress when you use Password protected posts or pages, the post or page content will be hidden until the user inserts the password.

By default WordPress will hide the content and the comments of the post or page that  uses Password protected in the settings and show on screen a message like

This post is password protected. To view it please enter your password below:

The title will also start with “Protected: “. See here how to remove the title prefix.

When the user will type the right password than will be able to view the page completely.

Code wise will be hidden just the text or HTML returning by the following methods

the_content();
comments_template();

inside the files in your WordPress theme (page.php or single.php or index.php).

Problem?

You will find that if you use custom fields or simply use in your loop

<img scr="<?php echo get_post_meta($post->ID, 'postThumb', true); ?>" />

those data will not be protected and they will be visible on the screen.

How to protect custom fields in WordPress?

The simple solution is to use the WordPress function post_password_required() like in the example below

<?php
    if ( !post_password_required() ) 
    { 
        // your protected stuff here
    ?>
    <img scr="<?php echo get_post_meta($post->ID, 'postThumb', true); ?>" />
    <?php
    }
?>
Categories
Wordpress

Remove Protected and Private title prefix

If you use Private or Password Protected posts or pages you might want to remove that awful title prefix

  • Private: …
  • Protected: …

To remove the title prefix you can simply add in your WordPress theme functions.php file, the following code

function the_title_trim($title)
{
  $pattern[0] = '/'.__('Protected').': /';
  $pattern[1] = '/'.__('Private').': /';
  $replacement[0] = ''; 
  $replacement[1] = ''; 
  return preg_replace($pattern, $replacement, $title);
}
add_filter('the_title', 'the_title_trim');

This code will remove the title prefix for Private and Password Protected pages and posts, independently by the language used in the WordPress installation.

Categories
Design Wordpress

HiFi Cinema Webstore

Ecommerce website for HiFi Cinema. The  website is based on WooCommerce and it is super personalised.

The navigation bar will always remain at the top op the screen (just for large screens).

The design follows a fluid design just for computer screens and tables (horizontal orientation).

hifi-cinema-webstore-2013

 

hifi-cinema-webstore-2013-imac

 http://webstore.hificinema.co.uk/

Categories
Responsive Web Design Wordpress

Seekers Park Homes

This is a web site which I built for Seekers working for Alchemy Internet. The website is for 50+ year-old people that might not be internet experts.

The website use a responsive web design that allow people to surf anywhere using any kind of device to surf it.

seekers-responsive-design-2013

seekers-2013-imac

http://www.seekersparkhomes.co.uk/

Categories
Responsive Web Design Wordpress

Claudio Bez

This is an italian web site which I built for Claudio Bez. He’s an artist who does cartoons, paintings, caricatures and illustrations, often combined with strong black and white draws.

You can check out the actual site if you want to see this design layout in action.

responsive-design-bez

bez-desktop-laptop-phone

Bez.desktop

http://bez.bz

Categories
Wordpress

Redirect to post when search query returns single result

To avoid the list of just a single search result, you can add the following code in your theme’s function.php file.

add_action('template_redirect', 'single_result');  
function single_result() {
	global $wp_query; 
	if ( is_search() && !is_paged() ) {
		if ( $wp_query->post_count == 1 ) {
			wp_redirect( get_permalink( $wp_query->posts['0']->ID ) );
		}
	}
}

This code will also avoid the automatic redirection in case of many search results split in pages and in the last page there is just a single result.

Categories
Wordpress

Customise Login Page in WordPress

To customise your WordPress login area, typically on this URL your-domain.com/wp-login.php, you need to add the following in your theme’s function.php file.

Change the login Logo

The default image is the WordPress logo. You can change that image simply modifying the file path. You can add you image and adjust width and height if necessary.

function custom_login_logo() {
    echo '<style type="text/css">
    h1 a { 
        background: url('.get_bloginfo('template_directory').'/img/logo.png) 50% 0% no-repeat !important;
        background-size: contain !important;
        width:260px !important; 
        height:90px !important; 
        margin:0 auto !important; 
    }
    </style>';
}
add_action('login_head', 'custom_login_logo');

 Change the login URL of the login logo

Normally when you click on the login logo, by default it goes to WordPress.org. The following will change it to your own homepage.

function change_wp_login_url(){ 
	return get_bloginfo('url');
}
add_filter('login_headerurl', 'change_wp_login_url');

Change the Title of the login logo

If you want to change the title attribute of the image you just replaced use the following code.

function change_wp_login_title(){ 
	return get_option('blogname'); 
}
add_filter('login_headertitle', 'change_wp_login_title');
Categories
Wordpress

Defer loading of JavaScript in WordPress

Deferring loading of JavaScript functions that are not called at startup reduces the initial download size, allowing other resources to be downloaded in parallel, and speeding up execution and rendering time.

While this “lazy” method of loading doesn’t reduce the total JS payload, it can significantly reduce the number of bytes needed to load the initial state of the page, and allows the remaining bytes to be loaded asynchronously in the background.

In order to speed up the loading of a page all the JavaScript in the HTML header has to be run after the page finish to load, more precisely at the end of the page before the </body> tag.

WordPress automatically adds all the core and plugin JavaScript in the HTML header using the function wp_head() or at the end of the page using wp_footer().

All the JavaScript contained in the header wp_head() has to be moved at the end of the page in wp_footer().

In order to do that you can add those simple line in your function.php of the your theme.

if(!is_admin()) {
	// Move all JS from header to footer
	remove_action('wp_head', 'wp_print_scripts');
	remove_action('wp_head', 'wp_print_head_scripts', 9);
	remove_action('wp_head', 'wp_enqueue_scripts', 1);
	add_action('wp_footer', 'wp_print_scripts', 5);
	add_action('wp_footer', 'wp_enqueue_scripts', 5);
	add_action('wp_footer', 'wp_print_head_scripts', 5);
}

All this will be valid just in the public website not for the admin panel.

Make sure that in your theme you will not add any other JavaScript in your header.

If you use HTML5, Modernizr (or html5shiv) needs to be in the HTML header, in order to make the old browsers (i.e. IE7, IE8) HTML5 and CSS3 friendly.

 

Categories
Wordpress

How to update WordPress on Aruba.it hosting

Aruba.it has a strict write permission on his web hosting servers.
Just adding the following two simple lines at the top of the wordpress configuration file wp-config.php and your website will be able to run all the updates without returning any error.

<?php
   define('FS_CHMOD_FILE',0755);
   define('FS_CHMOD_DIR',0755);
   ...
?>

Enjoy your automatic wordpress upgrades and plugin updates.

Categories
Wordpress

How to get the Featured Image or the First Image in the post?

Supposing you want to have an image aside of each post in your post list page. The WordPress function get_the_post_thumbnail() is what you need. Make sure to set a  featured image inside the edit post (or custom post) page.

If you forget to set the featured image inside a post, WordPress will consider as featured image the first uploaded image from your computer. Obviously if you do not have any image in the content of a post, the featured image for it will not exist.

What happens if you write a post and add images from the “WordPress media library” (without uploading images from your computer)?
Well, get_the_post_thumbnail() will not return any image at all.

If it is your blog/website it will not be a big problem, you will notice the error and you will fix it straight away.
But if you set up a WordPress website for some of your clients that are not really web oriented, the following solution will save you a lot of time (avoiding “not easy” support phone calls).

Copy the following code in your theme functions.php

// POST IMAGE
function get_default_post_image($size = 'thumbnail', $post_id = false){
	global $post, $id;
	$post_id = (int)$post_id;
	if (!$post_id) $post_id = $post->ID;
	$image = '';
	if(has_post_thumbnail($post_id)) {
		$image = get_the_post_thumbnail($post_id, $size);
	} else {
		$args = array(
			'post_parent' => $post_id
			, 'post_type' => 'attachment'
			, 'post_mime_type' => 'image'
			, 'post_status' => 'any'
			, 'numberposts' => 1
			, 'order' => 'ASC'

		);
		$attachments = get_children($args);
		foreach($attachments as $attachment) {
			//$attachment = array_shift($attachments);
			$image = wp_get_attachment_image($attachment->ID, $size);
		}
	}
	return $image;
}
function the_default_post_image($size = 'thumbnail', $post_id = false){
	$img = get_default_post_image($size, $post_id);
	if( empty($img) ){
		$img = '<img src="'.get_bloginfo('stylesheet_directory').'/images/default_post_image.png" alt="no image" />';
	}
	echo $img;
}

Make sure you add a “not available” image (/images/default_post_image.png) in your theme folder.

Then you will able to use the_default_post_image()

<?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
    ...
    <?php the_default_post_image(); ?>
    ...
    <?php endwhile; ?>
<?php endif; ?>

inside your theme (inside your post loop).

An alternative could be get_default_post_image()

<?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
    ...
    <?php echo get_default_post_image(); ?>
    ...
    <?php endwhile; ?>
<?php endif; ?>

Usage

<?php the_default_post_image( $size, $post_id ); ?>

the_default_post_image will return an HTML image (/images/default_post_image.png when not image is set in the post)

<?php echo get_default_post_image( $size, $post_id ); ?>

get_default_post_image() will return an HTML image as string and  an empty string when not image is set in the post.

Parameters

size
(string/array) (Optional) Either a string keyword (thumbnail, medium, large or full) or a 2-item array representing width and height in pixels, e.g. array(32,32).
Default: ‘thumbnail’

post_id
(integer) (Optional) Post ID.
Default: Post ID