Loading...

Follow Neil Matthews, I Fix WordPress Sites on Feedspot

Continue with Google
Continue with Facebook
or

Valid

A picture tells a thousand words, and even the most minimal website needs some imagery.  In this post I want to talk about where I get images for my site.

I’m Not A Designer

I’m not a graphic designer,  I don’t have the skills to create my own images so I need to find images online for various uses such as:

  • Blog posts
  • Social media post
  • Ads
  • YouTube thumbnails
  • Imagery for pages
  • Clients sites

Even though I cannot create my own images, there are a number of great resources out there to download images for your WordPress site.  Some are royalty free and other charge a small fee.

Compfight

Compfight is a search engine for the image upload service Flickr.  There are thousands for images there for you to use, and if you filter them correctly you can use them royalty free.

I use Comfight for all of my blog posts, I think up a keyword that matches my blog post, for example for this post I’m thinking about images, from there I went to an art gallery.

I searched for art gallery and a number of images came up, I selected a quirky one of a Gnome visiting an art gallery, I like to have fun with images.

I set filters on the search to find images licensed with the creative commons that can be used for commercial reasons.

In return for using the images I need to add an attribution to the photographer who created the images, if you see the bottom of this post you will see that link.

Compfight has a plugin, check out this review for more details on Compfight.

Plugin Review: Compfight

Shutterstock

Shutterstock is another service I have used for royalty paid images.

Shutterstock has thousands of images for you to browse and buy if they match you needs.  There are photos, vector drawings, logos, icons and videos to choose from.

You can buy a subscription which varies by the number of images you download or you can buy a pre-paid image pack for X downloads which is a one off payments.  I don’t use that many images so I go for this method.   Here’s a link to their current pricing.

https://www.shutterstock.com/subscribe

You can download a watermarked copy of the image to try before you buy, which is a great thing, you cannot be sure an image will work until you see it in place.

I’m building out a new theme build for myself and needed some website imagery, so I searched for “developers desk” and found exactly what I needed.

Canva

Canva is an online image editing tool that I use.

I’ve already stated at the start of this post that I’m not a graphic designer, but Canva comes with loads of great templates to use, so you can drop in an image from Shutterstock or Compfight and lie text and other decoration over the top.

I’ve used this for Facebook page graphics, ads, YouTube thumbnails and a couple of blog post images.

I wrote a detailed blog post about Canva so I’ll not go into too much depth, check out my Canva Review

What If You Need Something Custom

If you don’t know a graphic designer to create custom images for you, here are a couple of service you can use to get a custom design

  • 99designs – get designers to compete for your business with a design competition
  • fiverr – get a logo designed at very reasonable prices.

Personally I’ve been able to get everything I need with a combination of Compfight, Shutterstock and Canva, this is where I get images for my site.

Wrap Up – Where I Get Images For My Site

Lack of graphic design skills does not mean you need to have poor quality imagery on your site, check out these resources to pep up the look and feel of your WordPress site.

Here’s the image attribution link I was talking about.

If you need help adding images to your WordPress site, why not get a no obligation quote?

Photo Credit: Capital District, New York Flickr via Compfight cc

Doing the seo dance – where I get images for my site

The post Where I Get Images For My Site appeared first on WP Dude.

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

In this post I want to take you through a case study of plotting WordPress data on a Google map.  I took data from the WordPress back end which contained location information and used it on a map.

Background

I was engaged by a client of mine called Gary Milton (who is an excellent designer over at Harvest Design) to transform a website design he created for his client into a working WordPress site.  I love this type of job I get to take an ephemeral design and transform it into a working WordPress site.

His client is Strongvox Homes a high end property developer based in the South West of England.  The site we built together is Strongvox.co.uk.

Part of the project was to map the location of property developments across the South East of the country so potential buyers can see where the new builds are located.

The maps are on the home page, the main developments page and there is a cut down map on individual development pages.

Home page – https://www.strongvox.co.uk/

Developments Page – https://www.strongvox.co.uk/developments/

Single Development  – https://www.strongvox.co.uk/development/expression/

Terminology

A quick explanation of the terminology I’m going to use.  A development is a collection of new houses that are built by a property developer, I think that it called a subdivision in the US, and individual properties on that development are know as plots.

England and America are two countries separated by the same language – Winston Churchill

Custom Post Types And Taxonomies

I created a custom post type called a house which contains details of all the plots being built by Strongvox.  These houses were then grouped together into a custom taxonomy called a development.

I created the custom post type and custom taxonomy using a plugin called Types

Toolset Types – Custom Post Types, Custom Fields and Taxonomies

The development custom taxonomy (think of it like a category for blog posts) had additional data associate with it such as the development logo, a custom colour used for each development, images from the site and google map location.  I added this additional data to the taxonomy using the Advanced custom fields plugin.

Advanced Custom Fields

The Pro version of ACF allows us to add a custom field type that is a Google Maps field. so on the back end of the website when creating a new development there is a field where we can type in the address and it is plotted on a map, saving the longitude and latitude details of that location.

So we have our development data collected in the back end the question is how to display it on the front end, enter the Google maps JavaScript API

Google Maps JavaScript API

Google has opened up it’s maps feature and allows developers to plot their own data points using their API or application programming interface.

To do this we need to output a script and pass our data into that script.

Before you start you will need to get a google maps API key check out this post for details Get A Google Map API Key

Header Code

The first part of the process is to add a script into the header of your site to load up the google maps here is the one I used note the red text where you add your own API key.

This helper script pulls in the google maps code and allows us to show a map in our template files.

You can change this script to set your own variables such as zoom level or type of map e.g. terrain or satellite

<style type="text/css">

.acf-map {
	width: 100%;
	height: 400px;
	border: #ccc solid 1px;
	margin: 20px 0;
}

/* fixes potential theme css conflict */
.acf-map img {
   max-width: inherit !important;
}

</style>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script type="text/javascript">
(function($) {

/*
*  new_map
*
*  This function will render a Google Map onto the selected jQuery element
*
*  @type	function
*  @date	8/11/2013
*  @since	4.3.0
*
*  @param	$el (jQuery element)
*  @return	n/a
*/

function new_map( $el ) {
	
	// var
	var $markers = $el.find('.marker');
	
	
	// vars
	var args = {
		zoom		: 16,
		center		: new google.maps.LatLng(0, 0),
		mapTypeId	: google.maps.MapTypeId.ROADMAP
	};
	
	
	// create map	        	
	var map = new google.maps.Map( $el[0], args);
	
	
	// add a markers reference
	map.markers = [];
	
	
	// add markers
	$markers.each(function(){
		
    	add_marker( $(this), map );
		
	});
	
	
	// center map
	center_map( map );
	
	
	// return
	return map;
	
}

/*
*  add_marker
*
*  This function will add a marker to the selected Google Map
*
*  @type	function
*  @date	8/11/2013
*  @since	4.3.0
*
*  @param	$marker (jQuery element)
*  @param	map (Google Map object)
*  @return	n/a
*/

function add_marker( $marker, map ) {

	// var
	var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );

	// create marker
	var marker = new google.maps.Marker({
		position	: latlng,
		map			: map
	});

	// add to array
	map.markers.push( marker );

	// if marker contains HTML, add it to an infoWindow
	if( $marker.html() )
	{
		// create info window
		var infowindow = new google.maps.InfoWindow({
			content		: $marker.html()
		});

		// show info window when marker is clicked
		google.maps.event.addListener(marker, 'click', function() {

			infowindow.open( map, marker );

		});
	}

}

/*
*  center_map
*
*  This function will center the map, showing all markers attached to this map
*
*  @type	function
*  @date	8/11/2013
*  @since	4.3.0
*
*  @param	map (Google Map object)
*  @return	n/a
*/

function center_map( map ) {

	// vars
	var bounds = new google.maps.LatLngBounds();

	// loop through all markers and create bounds
	$.each( map.markers, function( i, marker ){

		var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );

		bounds.extend( latlng );

	});

	// only 1 marker?
	if( map.markers.length == 1 )
	{
		// set center of map
	    map.setCenter( bounds.getCenter() );
	    map.setZoom( 16 );
	}
	else
	{
		// fit to bounds
		map.fitBounds( bounds );
	}

}

/*
*  document ready
*
*  This function will render each map when the document is ready (page has loaded)
*
*  @type	function
*  @date	8/11/2013
*  @since	5.0.0
*
*  @param	n/a
*  @return	n/a
*/
// global var
var map = null;

$(document).ready(function(){

	$('.acf-map').each(function(){

		// create map
		map = new_map( $(this) );

	});

});

})(jQuery);
</script>
Plotting Development data

Okay so now we want to collect the data we need an actually output the map.

So in my theme template files where I want to output the map I have this php code, let me step you through it.

$terms = get_terms(development_get_devs());
<div  >

<?php

if ( ! empty( $terms ) && ! is_wp_error( $terms ) ){
foreach ( $terms as $term ) {
$location = get_field('google_map_location', 'development_' .$term->term_id);
if( !empty($location) ):
echo get_field('status', 'development_' .$term->term_id);
if(get_field('status', 'development_' .$term->term_id) =="PREVIOUS"){
$icon=get_stylesheet_directory_uri()."/markers/marker-grey-36px-sq.png";
}elseif (get_field('status', 'development_' .$term->term_id) =="CURRENT"){
$icon=get_stylesheet_directory_uri()."/markers/marker-black-36px-sq.png";
}else{
$icon=get_stylesheet_directory_uri()."/markers/marker-white-36px-sq.png";
}


?>
<div  data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>" icon="<?php echo $icon; ?>">
<div class ="map_description">
<div status', 'development_' .$term->term_id);?>"><?php echo get_field('status', 'development_' .$term->term_id); ?> DEVELOPMENT</div>
<h4><?php echo $term->name; ?></h4>
<div class ="map_address">

<p><?php echo get_field('address_1', 'development_' .$term->term_id);?>, <?php echo get_field('address_2', 'development_' .$term->term_id);?></p>

</div><!--map address -->

<div >
<?php


if(get_field('status', 'development_' .$term->term_id) !="FUTURE" && get_field('status', 'development_' .$term->term_id) !="PREVIOUS"){
echo '<a href="'.site_url().'/'.$term->taxonomy.'/'.$term->slug.'">VIEW</a>';
}

if(get_field('status', 'development_' .$term->term_id) =="FUTURE"){
global $wp;
$current_url = home_url(add_query_arg(array(),$wp->request));
echo '<a href="'. $current_url.'/#gform_wrapper_3'.'">REGISTER</a>';
}
?>

</div><!--view button -->
<div ></div>
</div><!--map description -->
</div><!--marker-->
<?php endif;
}
}

?>
</div><!--acf map -->

Code Step Through

  1. Run the function development_get_devs to get all the developments based on the filter.
  2. We loop through that query getting location data from the Google maps field
  3. The code in read is the important thing, we output a list of markers with longitude and latitude data

The google maps API takes that data and translates it into map marker points. The helper script knows to look for the DIV acf-map and transform the data there into a map.

Customizing Icons

You probably noticed the icons are also customised. The colour of the marker changes depending upon the status of the development, so I also check another ACF field called status and set the $icon variable depending upon that status.

Filters

The code outputs the developments based upon an availability filter, click on the current button about the map and only the developments who’s status is current are shown.

Maps Are Linked

If  you click on a map marker you are linked to a data card popup which in turn is linked to the single development, all of this data is dynamically pulled in from the query.

Single Development

I used the same technique on single development pages but only pulled back the location data for a single developments address.  Plotting WordPress data on a Google map works for single pieces of data too.

Whoa That Was A Bit Techie!

I can hear you shouting “that’s too technical for me Neil!”, but if you want a custom Google map you can also use plugins like the one below to manually plot data points on a map and use it in your posts and pages.

You only need custom code if you want to dynamically add and adjust data on a map.

WP Google Maps

Wrap Up Plotting WordPress Data On A Google Map

You can create custom Google maps from your WordPress data, if you have a project that needs that type of functionality give me a shout I’m your man.

Hat tip to this post http://www.advancedcustomfields.com/resources/google-map/

Photo Credit: Tuomo Lindfors Flickr via Compfight cc

Doing the seo density dance Plotting WordPress Data On A Google Map needs to mentioned a few times so I’m saying Plotting WordPress Data On A Google Map one more time.

The post Case Study: Plotting WordPress Data On A Google Map appeared first on WP Dude.

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

How can you know if that new plugin you are about to install is of a high quality? How can you setup some kind of plugin quality control process to ensure all new plugins that are added to your site won’t break things?

In this video post I’ll show you how to check the quality of any plugins you are about to use.

Anyone can create a plugin an upload it to the WordPress plugin, there are approval processes but there is no rigorous checking of the codes compatibility with themes and other plugins, so sadly it’s a very common thing that I see that a plugin will crash a site.

Use the techniques in my video to create some plugin quality control.

Video

Plugin Quality Control - YouTube

The Process
  • Install from the WordPress dashboard, their search rules out a lot of plugins that are not being actively developed.
  • Visit the plugin page on WordPress.org to get a full list of stats.
  • Check last update to ensure the plugin is actively developed, plugins not actively developed can hold vulnerabilities or bugs.
  • Check the plugin is tested to your version of WordPress, check the plugin is compatible with your version if you are using an older version of WordPress.
  • Review the ratings avoid all 5 stars and lots of 1 & 2 stars. Look at the reviews to see what people are complaining about.
  • Look at the support forum ensure the plugin developer is actively engaging in support, avoid plugins where there are zero replies.
Links Mentioned

WordPress Plugin submission guide

Contact form 7 Plugin Page

Wrap Up – Plugin Quality Control

Plugins clash with themes, and other plugins all the time, installing the wrong plugin will bring your site down and end up with you visiting this page to ask me for help.

Do yourself a favour and do some plugin quality control before you click that install button.

Photo Credit: classroomcamera Flickr via Compfight cc

The post Plugin Quality Control appeared first on WP Dude.

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Separate tags by commas
To access this feature, please upgrade your account.
Start your free month
Free Preview