WordPress Action Hooks and Filters To Add Attributes

Is using WordPress filters hard?

Not really. Just need to understand the concepts. Its a good idea to learn PHP and how programming languages work.

If you like to tinker with template files like me you’ll be messing with and editing files. However, its time consuming and with each update the need to dig through documentation is a hassle.

Using WordPress filters offers an option to change some of the default output behavior without editing any template file.

You can read a couple good posts on better understanding Child Theme Action Hooks and Using WordPress Filters on ThemeShaper.

How to better understand WordPress filters?

In order to better understand filters, know that filters allow you to change the default behavior of functions already included in WordPress.

Example is grabbing the post thumbnail, one of many stock WordPress functions. In this instance, you’d want to add a new attribute inside the default img tag output.

The default WP output for getting the function the_post_thumbnail() is:

<img src="ImageSource" class="SomeClass" alt+"SomeAltText" title="SomeTitle" />

To add an itemprop attribute to the img tag, you can use a filter to change the ouput to:

<img itemprop="MyNewProperty" class="SomeClass" alt+"SomeAltText" title="SomeTitle" />

Given the power of using Schema.org’s microdata format, it is important for SEO to add structured data. It’s fodder for search engines and its the future to writing elegant code with meaningful meta data.

Solution changing WordPress default function output

If you understand how to use action hooks and how to use a filter, then your on the way to becoming a better WordPress developer.

For the example above to change, the action hook we like to filter is the post_thumbnail_html.

To better understand, you can check out an article about how to strip inline image width and height attributes – the opposite of what we’re going for here.

In the end, my solution is the following simple lines to change the default the_post_thumbnail() output to include the new itemprop attribute.

In the functions.php file, you just need to add these lines to accomplish the new output.

function add_itemprop( $html ) {
    $html = str_replace('<img','<img itemprop="photo"',$html);
    return $html;
}
add_filter( 'post_thumbnail_html', 'add_itemprop' );

Wrapping A Div Around Every Three Divs Using jQuery

The Problem

I recently came across the need to wrap a parent div around every three divs in order to make an animated carousel slider work properly. Because I am using WordPress as CMS, the output for the code from a custom query in a loop broke the jQuery carousel styling.
The output looked similar to the following child divs.

	<div class="child"></div> 
	<div class="child"></div> 
	<div class="child"></div> 
	<div class="child"></div> 
	<div class="child"></div> 
	<div class="child"></div> 

However, I needed to dynamically wrap a div around a certain number of divs like so.

	<div class="parent"> 
		<div class="child"></div> 
		<div class="child"></div> 
		<div class="child"></div> 
	</div> 
	<div class="parent"> 
		<div class="child"></div> 
		<div class="child"></div> 
		<div class="child"></div> 
	</div> 

After trying to use create a custom function inside WordPress, I didn’t have any luck to successfully modify the output to play nice with the jQuery carousel slider.

The Solution

I found a good solution starting with Stackoverflow Q&A for Wrapping Divs and modified the jQuery snippet to implement the solution I need to make the carousel slider work.

The jQuery snippet I used in the end is a modified version of this on jsfiddle demo.

	var $children = $('.child'); 
	for(var i = 0, l = $children.length; i < l; i += 3) { 
		$children.slice(i, i+3).wrapAll('<div class="parent"></div>'); 
	} 

Through this experience, its clear I can’t rely on manipulating everything through the WordPress API because there is a need to dynamically alter pages for enhanced functionality such as a carousel slider for scrolling through a WordPress loop.

Note to self, time to really dig into jQuery and the DOM.

Importance and Value of Planning Your Business Website

The planning processes we use to create our clients’ websites are truly essential and a core part of their business. It involves developing a logical website structure that is designed specifically to meet their business marketing objectives.

This is completed by thoroughly understanding the client’s needs and doing a discovery consultation. We also spend time to do our own research to truly grasp and understand their industry and business before even any design is done.

I recommend if your in the market to start a business and need a website to consider working with an expert to help plan your business. This is the difference between achieving success or wasting hard earned money.

Ask these questions before even approaching a website design agency to get estimated costs.

  • Who are your customers?
  • What is your business model?
  • Why would anyone need the product or service your offering?

Understanding the value proposition of your business will help you understand the value of a professionally designed website and digital marketing strategy.

Online Marketing Success Requires The Right User Experience

Create successful marketing campaigns by having a strategy that is aligned with your business goals. Any successful internet marketing strategy will have a plan to meet business objectives. Take a methodical approach laying out each objective goal step by step.

Align your sales and marketing goals to your business operations and create a business game plan that delivers a functional and engaging experience for your customers. Be certain your website is capable of delivering these experiences. Your website needs to help visitors accomplish tasks, gain information, and take inquiries.

By taking advantage of search engines and targeting your audience with certain keywords, you’ll identify intent by understanding how customers found your business through search engines.

Learn how to drive more targeted traffic and increase conversion rates with SEO and landing page optimization.

Staying Focused With Your Online Marketing Messaging

Online marketing is the process of using digital information channels found on the Internet to deliver your marketing message to your target audience. By taking advantage of the Internet, you’ll build awareness for your business. You will use search engines, email newsletters, and social media networking websites. Other online marketing strategies involve banner displays, link placements, and videos.

The digital space is large and constantly evolving so your online marketing strategy needs to adapt. Your digital marketing strategy heavily depends on how you utilize the different marketing channels.

We recommend a holistic approach to online marketing. Make sure your business is focused on delivering a targeted message to your customers to achieve good results. With targeting the right messaging for the different stages they’re experiencing in the sales and buying cycle, you’ll be able to address their needs and concerns.

Why Search Intent Is Important To The Buying Process

Unlike traditional marketing, digital marketing it is much more powerful because your able to communicate and approach prospects at different stages of their buying cycle.

By understanding what stage your target audience is in, you can cater your marketing message and delivery through different channels. This is the power of understanding prospect buyer’s intent. Rather than just getting the word spread out as much as possible, you will try to target the different stages and phases of their intent through creating the right content and targeting the right keywords.

By communicating with prospects through different buying stages from initial research to interest to taking action, you’ll build confidence and develop the momentum necessary for business growth and expansion.

Google I/O Impressions of Nexus tablet, Jellybean Android and Q.

After catching the keynote speech today, I’m ready to order a Nexus 7. My Kindle Fire feels grossly under powered and I don’t feel like rooting just to make it better.

The next iteration of Android codenamed Jelly Bean is version 4.2 and the interface is very slick. Add the slick UI onto the 16 core graphics chip on the Nexus 7 and we got ourselves a winner.

Why? Because its only $199 but sports specs that are equivalent or better than a Samsung Galaxy S3. Without contract that is… I hope. Either way, its impressive and cant wait to get one.

As for the Q, it seems more proof of concept. Its a cloud enabling device in your home with deep software app integration.

I guess if Google could easily manufacture TV with retina display resolutions that are 46 inch and up, that’d be the next Google TV hardware.

What are your thoughts on Googles I / O conference?

Better UX When Website URL And Business Name Matches

Someone recently asked whether it would help his business if they purchased a new domain with the .com or another type of extension for his website.

The issue is not whether his website is on a .com or .net domain or gaining any benefits.

The real issue is the business name (DBA) and website domain URL do not match. The website URL is missing a plural “s” that is in the DBA.

An example is the following situation. The business name is SEO Professionals but the url is www.seoprofessional.net.

This presents a couple user experience disconnects and problems for the business. This got me thinking about how the user will interact and the best way to handle the experience.

<2>Problem 1: Confusion For Clients
Every time you hand a business card, the business name and logo is typically much larger than the website URL. If the potential client only remembers one thing, its the name of your business. In this case, SEO Professionals.

Should they automatically assume your URL is your business name and type in www.seoprofessionals.com in a browser, then you potentially send them to a non-existent page or worse, a competitors’ website.

Now you don’t want to give business away by marketing for another business, do you?

Problem 2: Search Engine Dilemma

Say the same client loses your forgets the URL but remembers the business name. They launches his or her favorite search engine and types in “SEO professionals”.

There is a likelihood www.seoprofessional.net will not rank high enough. Most tests have shown domain matching URL is powerful indicator for search engine results.

Again, this is a case where if the user reads only the Page Title and ignores the URL variations a potential client may be lost.

Optimizing The Website

Its important that the website will need to be optimized for search engines and potential clients.

The meta information that search engines display in results pages will need the correct page titles and descriptions. So even if the URL and business name do not match, a searcher will find exactly what they are looking for visually.

The homepage or any landing page will need to have every possible indicator that the right destination has been reached. A clear legible logo or recognizable symbolmark.

By writing optimized page title headlines and descriptions, chances are search engines will pick up on the title over the URL and so will searchers (potential clients) too.

This is just scratching the surface of optimization for websites but the lesson here is that its a good idea that your business name and website URL’s match.

Why You Shouldn’t 301 Redirect Every Page On Your Site

When deciding to update a website by creating a whole new information architecture, one easily falls to temptation to use a 301 redirect on web pages that no longer are useful.

The reason is because you want to let search engines know that the page has been permanently moved to a new location, new URL. However, you want to retain and be able to pass the link juice, page authority, or page ranking that was associated to the original page.

Be Mindful When 301 Re-Directing Pages

You don’t want to lose all your SEO efforts from the past. But it’s also important to have a content strategy for your website.

This is definitely a helpful trick for useful pages that had page ranking with link juice but pointless for junk pages that never passed much value to begin with or contained lots of duplicate content.

If you’ve paid any attention to how Google see duplicate content with its Panda update, you would think twice before launching a 301 campaign.

Proper and Improper 301 Situations

The proper use of a 301 re-direct is to give search engine spider crawlers the signal that a web page has permanently moved to a new location.

Improper use is to re-direct any page no longer used, not found, etc. back to the homepage or root URL.

For SEO purposes, I would advise against this strategy for the following reasons:

  • Re-directed web page has low content or page rank value.  Shouldn’t be associated back to most important page on your site, the homepage.
  • Too many different off topic pages re-direct back to homepage can effect your domain authority.  Different Page Titles, Meta Descriptions and Keywords are still in the index yet are 301 re-direct to your most important page which may not always relate.
  • Pages no longer useful should be removed from the search engine index with proper 404 or Page Not Found. Let the page die out on its own naturally.

What are your thoughts when it comes to using a 301 re-direct?

Content Strategy Helps Improve SEO and Copywriting

The hottest trend these days in web design is Content Strategy. It has a certain buzz to it like how search engine optimization (SEO) was like in years past. But what role does it play in our web projects. I’ll try to uncover how Content Strategy combines SEO and copywriting techniques and why web designers should practice it.

What Exactly Is Content Strategy?

Whats so important about Content Strategy? Effectively, Content Strategy is the planning, management and delivery of a website’s content formats such as text, images, videos and anything else you put on a it. It is closely related to SEO and copywriting.

How SEO and Copywriting Play Into Content Strategy

SEO is the art of designing a structured page meaning clean HTML markup that can be easily interpreted by search engines but filled with content that is helpful to people. A single web page is not very useful but a combination of pages that relate to each other so people using search engines can find a site based on keywords provided within each page and topic to help generate topical authority for a site.

By planning ahead what topics will be on the site, what headlines will be written and the supporting text and images prepared it’ll make our lives as web designers much easier.

Copywriting relates to SEO because effective writing highlights the topic, the web pages intention and is able to attract search engines algorithms and peoples’ search terms. With our content strategy plan, we have the blue print to stay focused on these topics.

Implementing SEO and Copywriting Techniques

By planning and organizing your content first such as declaring your marketing message, business purpose or goals; you’ll create pieces of content that help support the website. Each section of text will support a topic and these category topics will support the main topical theme of your site or micro-site. Other supporting contents are images with proper tags, internal links to pages so information architecture and site navigation has a good flow and well written copy to attract people and search engines’ attention.

As web designers, we should know and understand a combination of skills so we can create better sites that are both aesthetically pleasing and functional as well as being able to educate our clients. We already know basics to SEO and how to effectively write copy content for websites. We can create and prepare graphic images and photos. Most likely you have a blog and write to it regularly on your website as well.

Incorporating these skills together and planning a client’s or your own content for the web is how content strategy becomes part of the design process. Its a control mechanism to ensure that no task is left behind so we can minimize delays on our web design projects.

Further Reading On Content Strategy

Discipline On Content Strategy – From A List Apart, this article describes the discipline of practicing Content Strategy and why as web designers we should incorporate it into our design process. There are several other great articles on this subject at A List Apart and I recommend you reading them.

Content Strategy: The Philosophy of Data – From Boxes and Arrows offers how Content Strategy is not just about text but all data that pertains to a site. It is a great article to learn more about this topic.

Content Strategy For The Web Professional – From Lucid Plot gives a great summary for Content Strategy and how we should, as web professionals, practice this discipline and use them in our projects.