So now what? Well the only way I could get page excerpt from a page is by using the excerpt field (not shown on page edit by default) or by automatically clean the content of the page, limit the number of words and output it.

Manual Method

Manual method means that you will have to enter page excerpt into excerpt field when adding new page or editing old one.

The way to get the excerpt field to the add new page simply put this code into functions.php file of your theme.

// Init hook
add_action('init', 'my_custom_page_excerpt');

// Function that adds the excerpt field onto the add new page
function my_custom_page_excerpt()
{
    // Register excerpt feature for pages
    add_post_type_support('page', 'excerpt');
}

And that’s it for the manual method. Now when you add or edit a page and you will see the excerpt field (if you can’t see it, click on Screen Options and check the Excerpt checkbox).

Automatic Method

This method will get the page excerpt for each requested page on the fly without you having to add extra texts into extra input fields. Just the way I like it. :)

function get_my_page_excerpt($page_id = 0, $word_limit = 55)
{
	// Stop here if page id is not set
	if ($page_id === 0)
	{
		return FALSE;
	}

	// Get content from page
	$page = get_posts(array(
	    'include' => $page_id,
	    'post_type' => 'page'
	));

	//	Get the page content, that is will all the shortcodes and HTML
	$content = $page[0]->post_content;

	//	Strip all the shortcodes from the post content
	$content = strip_shortcodes($content);

	//	CDATA
	$content = str_replace(']]>', ']]>', $content);

	//	Strip all the HTML tags from the content
	$content = strip_tags($content);

	//	Separate words by space
	$words = explode(' ', $content, $word_limit + 1);

	//	Check if the content of the page is actually longer then the stripped content
	if(count($words) > $word_limit)
	{
		//	Remove last array
		array_pop($words);

		//	Merge words from array to string
		$content = implode(' ', $words);

		//	Add at the end the ...
		$content .= '...';
	}

	//	Return page excerpt
	return $content;
}

echo get_my_page_excerpt(1101);

The above code will create page excerpt from page content just for one page. For my use, I use array to get page excerpt for a few pages with just one get_posts() call. I removed the array option here but it’s simple to add it.

Do you know a better way of getting page excerpts? Let me know.

Currently it support four shortcodes: tabs, buttons, columns and toggle.

The reason I made this plugin is because I needed a simple and lightweight plugin that doesn’t have lots of options that are never used. Plus, most of the plugins I’ve tested have crappy code and are just bad. :)

For full details on the plugin, shortcodes and the options, click here.

Theme is packed with features and with the theme you will also get all the PSD files that were used to create this theme as well as a full working HTML version of the theme!

For typography the theme uses two from Google Fonts which are available for free.

Here are some of the features:

• Custom menu
• Custom background
• Custom front page
• Full-width and blog templates
• 3 sidebars (all pages, blog posts only and pages only)
• SEO tools for blog posts, pages, tags and categories
• Theme options
• Support for Google Analytics
• Support for Google and Bing ownership verifing
• Support for Microformats and Google Plus profile
• RTL ready
• Translation ready with translation file included
• Support for WordPress editor styles
• Style support for Contact Form 7 plugin
• Custom action and filter hooks

Theme has included 4 shortcodes:

• Columns
• Tabs
• Toggle
• Buttons

Theme has 23 action and 6 filter hooks that you can use to extend the theme easily and quickly.

And comes with two integrated widgets, Extended Recent Comments and Extended Recent Posts.

Theme has a file structure that enables you to extend the functions of the theme without worrying
of losing the updates you made when a new update of the theme is available.

Go and check it out.

To make Javascript strings translatable you need to use the function wp_localize_script.

Here’s a simple example on how to do it with custom Javascript file.

First we need to add our custom Javascript file to theme or plugin using wp_enqueue_script.

function javascript_files() {
	//    Adding custom javascript file to theme or plugin
	wp_enqueue_script('some_handle_name', get_template_directory_uri().'/js/javascript.js');

	//    Create array with values that are going to be used in Javascript file itself
	$translations = array('some_name' => __('Some text'), 'another_key' => '1');

	//    This line is the key:
	//    "some_handle_name" should match the wp_enqueue_script handle
	//    "object" can be named anything, will be used in the Javascript file itself to call the value like: object.some_name
	//    $translations is of course the above array with keys and values
	wp_localize_script('some_handle_name', 'object', $translations);
}
add_action('wp_enqueue_scripts', 'javascript_files');

Then in Javascript file, we can simply call the translated values like this:

console.log(object.some_name); // Will output "Some text"
console.log(object.another_key); // Will output "1"

And that’s it. Really simple thing to do.

Log of all the changes:

Version 1.3.2 (2012/12/11)
 * Fixed the location of the dropdown filter that contains the groups as it was shifted to the left
 * Fixed a few NOTICE bugs in the widget part of the plugin
 * Fixed WARNING bug that basically killed the widget as there was no $wpdb->prepare parameter set. Removed the $wpdb->prepare as there is no need for it
 * Fixed NOTICE bug where an empty variable was sent to $wpdb->prepare for no reason at all, was probably drunk when I added that (not that I drink)

Here’s an example on how to add the hidden buttons to the visual editor.

function ltw_mce_buttons_2($buttons)
{
	//    Add the hidden buttons to the $buttons array
	$buttons[] = 'sup';
	$buttons[] = 'sub';

	return $buttons;
}
add_filter('mce_buttons_2', 'ltw_mce_buttons_2');

What does mce_buttons_2 filter do? Basically it means that the buttons will be added to the second row in the visual editor. You can of course also use: mce_buttons (first row), mce_buttons_2 (second row), mce_buttons_3 (third row) and mce_buttons_4 (fourth row). Easy right?

Here is the full list of buttons that you can show.

Now, I wanted to add a button to the visual editor that will add <code> HTML tags around the selected word. There are two ways, I could add it as a real button which means I need to write the Javascript plugin for TinyMCE (is the editor that the WordPress uses in case you didn’t know that). The second way, the easier and quicker way is to simply add it to the custom styles. So yeah, let’s do the second version. :)

Enable Style Dropdown

First we need to enable the style dropdown in the visual editor. The code to show the style dropdown is basically the same as I have posted it above. But in this case I want the style dropdown at the begining of the second row and for that we need to insert the button as the first item in the array using array_unshift php function.

function ltw_mce_buttons_2($buttons)
{
	array_unshift($buttons, 'styleselect');

	return $buttons;
}
add_filter('mce_buttons_2', 'ltw_mce_buttons_2');

If you load the editor now, you will see that the styles dropdown is shown in the second row and it contains some default style formats.

We need to add our own.

Register Our Own Style Format

Basically we will register our own style format and set some options for it and we need to make it to act as inline element not block element.

Here’s the code:

function ltw_tiny_mce_before_init($init_array)
{
	//	Set the settings.
	//	title = title that will be shown in the dropdown
	//	inline = name of the inline element, this must be valid HTML element
	//	wrapper = means that the element in question is a container, a closing tag will be added after the selected text
	$style_formats = array(
		array(
			'title' => 'code',
			'inline' => 'code', // To make code act as a block element, change 'inline' to 'block'
			'wrapper' => true
		)
	);

	//	TinyMCE uses json for configuration of the buttons so we need to use json_encode
	$init_array['style_formats'] = json_encode($style_formats);

	return $init_array;
}
add_filter('tiny_mce_before_init', 'ltw_tiny_mce_before_init');

As you can see we added a filter called tiny_mce_before_init and set some options for the custom style format.

There are a few extra options like adding class, styles, etc. that I did not use as I don’t need them in this case.

Now reload the editor and you have a code style in the dropdown. Easy, the end. ;)

Let’s get down and dirty right away.

On the screenshot below you can see an example of a page not using CSS3 media queries and the same page that is using media queries.

Left screenshot shows example page on mobile without using media queries and right side uses them. See the difference?

I’m going to use this example page to quickly explain the media queries hence the basic design and layout.

You can also download the full source code of the example page.

Viewport Meta Tag

The first step in making your website to adjust to different devices is to set the meta tag called viewport.

Here is what you should add to the head of the HTML document:

<meta name="viewport" content="width=device-width">

The width property sets the size of the device’s viewport.

There are a few ways of setting the width property. For example, if you have a website that is designed for mobiles only and the site’s width is 320 pixels, you can set the width property to width=320. But the best way to do this is to let the device set the width of the viewport by setting the width property to device-width.

What is the viewport? Basically it’s the screen of the device where all the magic happens. :)

Once you set this meta tag, the next step is to set some CSS media queries.

Media Queries

CSS Media queries allow you to target CSS rules based on screen size, device orientation and so on.. You insert them into your .css file and it looks like this:

@media screen and (max-width: 980px) {
    /* CSS rules inside this block will be used when the size of the viewport is 980 pixels or less */
}
@media screen and (max-width: 830px) {
    /* CSS rules inside this block will be used when the size of the viewport is 830 pixels or less */
}

How to know where to set breakpoints? Well, the most simple way is to load the page in your browser and resize it. When you see that the elements of the page are not as you want them, set media queries.

Looking at the example page you can see that I have set 3 media queries.

The example page has a fixed layout, width set to 980 pixels. That means that the elements need to be fluid when the width of the viewport is 980 pixels or less.

/*
	For 980px or less
*/
@media screen and (max-width: 980px) {
	#wrapper {
		width: auto;
		padding: 0 2px;
	}
	#content_container #content {
		width: 72%;
	}
	#content_container #sidebar {
		width: 25%;
	}
}

That’s it, if you now resize the browser below 980 pixels, you will see that the elements of the page become fluid.

The next breakpoint is set at 830 pixels of width. Why? Because I want to move the header menu below the title and also make the images fluid instead of fixed size.

/*
	For 830px or less
*/
@media screen and (max-width: 830px) {
	#header {
		height: 100%;
	}
	#header #logo,
	#header #menu {
		float: none;
	}
	#header #logo {
		margin-top: 15px;
	}
	#header #menu {
		margin: 15px 0 0 10px;
	}
	#header #menu ul li {
		margin-bottom: 10px;
	}
	#content_container #content img {
		width: 25%;
	}
	#content_container #content img.full_width {
		width: 100%;
	}
}

Since I want to move the menu under title, I need to set the float property to none for the header elements (title and menu).

In this stage, I also set the width property to % instead of pixels so that the images become fluid and resize nicely.

Next and last breakpoint is set at 600 pixels of width.

/*
	For 600px or less
*/
@media screen and (max-width: 600px) {
	#content_container #content {
		width: 100%;
	}
	#content_container #sidebar {
		display: none;
	}
}

In this media query I resize the content area to full width (100%) and hide the sidebar. You could of course move the sidebar below the content but I choose to hide it in this example.

Here are the results in portrait and landscape orientation on mobile.

Showing the example page in mobile in portrait orientation

Showing the example page in mobile in landscape orientation

And that’s it really. Have fun. ;)

So I went searching for a really simple wordpress widget that will show just the title, excerpt and maybe a date also. That’s all I wanted! But I could not find it. All other widgets had loads of extra features that I won’t really ever need so what’s the point?!?!

And voila, a few minutes and here I have a really simple widget that works and does exactly what I want.

And I am calling it Extended Recent Posts.

Check it out in the footer, left side or click the link above for plugin page. ;)

What’s new in this version of CSS tabs? Quite a few things. You can now set multiple tab containers per page, set active tabs by using hash in the link and two new designs.

The demo and source code are available. If you want to go into details on how everything works, keep reading.

HTML

Let’s take a look at a few things that are new in the HTML. I will take only the HTML code of the first tabs as an example.

Having 3 separate tab containers means that an extra div tag needs to be added around the tab and content containers. This container is called tabs_wrapper. Not a must but it helps. ;)

The big new thing that we have here is the rel attribute in the link tag. This rel attribute must match the href attribute and also the id attribute of the content container.

Let’s look at Tab 1 for example. The href and rel attributes in the link have the same word in this case “tab1″. This word needs to be set as an id attribute for the content container div.

Here are the two lines that must match.

<!--    Link href and rel attributes must be the same -->
<li><a href="#tab1" rel="tab1">Tab 1</a></li>
<!--   The id attribute must match the link href and rel attributes -->
<div id="tab1" style="display: block;">

Now you can look at the whole block of code below and as you can see, each tab link has href and rel attributes that match each other and also the id attribute of the content container.

<div class="tabs_wrapper">
	<!-- Original tabs START -->
	<div id="original_tabs">
		<ul>
			<li class="active"><a href="#tab1" rel="tab1">Tab 1</a></li>
			<li><a class="icon_accept" href="#tab2" rel="tab2">Tab with icon</a></li>
			<li><a href="#tab3" rel="tab3">Long name for the last tab</a></li>
		</ul>
	</div>
	<div id="original_tabs_content">
		<div id="tab1" class="tab_content" style="display: block;">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel tortor. Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur nibh quis urna gravida mollis.</p>
		</div>
		<div id="tab2" class="tab_content">
			<p>This tab has icon in it.</p>
		</div>
		<div id="tab3" class="tab_content">
			<p>Suspendisse blandit velit eget erat suscipit in malesuada odio venenatis.</p>
		</div>
	</div>
	<!-- Original tabs END -->
</div>

That’s really the only change when it comes to HTML. It’s still pretty simple.

CSS

The next part is the CSS styles. They are the same as they were before really. Nothing changed apart from the naming as we now have 3 different styles of tabs. We can skip this part.

jQuery

Ah yes, the jQuery time. :) When it comes to jQuery, I have added a few things.

Before I post the code, let me explain that now you can use hash in the URL and the tab will be active. You can even select multiple tabs in different tab container using hash by separating the IDs with a comma. Look at the example and click on the link above the tabs.

Here is the code, I have commented it as much as possible. If something is unclear, do ask.

$(document).ready(function(){
	//	Main function that shows and hides the requested tabs and their content
	var set_tab = function(tab_container_id, tab_id){
		//	Remove class "active" from currently active tab
		$('#' + tab_container_id + ' ul li').removeClass('active');

		//	Now add class "active" to the selected/clicked tab
		$('#' + tab_container_id + ' a[rel="'+tab_id+'"]').parent().addClass("active");

		//	Hide contents for all the tabs.
		//	The '_content' part is merged with tab_container_id and the result
		//	is the content container ID.
		//	For example for the original tabs: tab_container_id + '_content' = original_tabs_content
		$('#' + tab_container_id + '_content .tab_content').hide();

		//	Show the selected tab content
		$('#' + tab_container_id + '_content #' + tab_id).fadeIn();
	}

	//	Function that gets the hash from URL
	var get_hash = function(){
		if (window.location.hash) {
			//	Get the hash from URL
			var url = window.location.hash;

			//	Remove the #
			var current_hash = url.substring(1);

			//	Split the IDs with comma
			var current_hashes = current_hash.split(",");

			//	Loop over the array and activate the tabs if more then one in URL hash
			$.each(current_hashes, function(i, v){
				set_tab($('a[rel="'+v+'"]').parent().parent().parent().attr('id'), v);
			});
		}
	}

	//	Called when page is first loaded or refreshed
	get_hash();

	//	Looks for changes in the URL hash
	$(window).bind('hashchange', function() {
		get_hash();
	});

	//	Called when we click on the tab itself
	$('.tabs_wrapper ul li').click(function() {
		var tab_id = $(this).children('a').attr('rel');

		//	Update the hash in the url
		window.location.hash = tab_id;

		//	Do nothing when tab is clicked
		return false;
	});
});

Note: Because of the lack of support for window.location.hash the tabs do not work in IE7 and below!

You can of course recode that part or throw out the whole hash part of the javascript if you do not need it and the tabs should also work in IE7.

This is a minor update that fixes some of the problems on the latest version of WP.

It should now work without any problems.

Also, donations are welcome (button located on the plugin page, link to it is below), even small ones as it takes a lot of time to keep this plugin alive.

Version 1.3.1 (2012/05/24)

• Fixed minor NOTICE bugs
• 15 testimonials now shown on testimonials list page
• Added the missing “count” field to the groups table
• Fixed the “show in widget” checkbox not working

To update to the latest version, go to your WP admin plugins page or click here for the download link.