Web design

10 WordPress Snippets For Theme Customizations

When you are using WordPress, it is extremely easy to change the look of your website, thanks to themes. There are lots (like a whole bunch) of WordPress themes available both for free or for a premium price. Pick a theme, install it, and you can get a completely new look for your website within minutes.

But beyond giving the look and feel, a WordPress theme can be extended in many ways as well. You can build new functionalities with plugins, but in this post, we’re looking at WordPress functions that can be handy for your theme. You just have to put these functions in the functions.php file of your theme for the effect to take place.

Recommended Reading: How To Manage And Use Code Snippets In WordPress

1. Change The Length Of Excerpt

An excerpt is a short piece of your post that you can see. WordPress, in this case, sets the excerpt to be 55 words long by default. But, WordPress allows us to customize the default length through the excerpt_length filter, as follows.

 function my_excerpt_length( $length )  return 30;  add_filter( 'excerpt_length', 'my_excerpt_length', 999 ); 

The return value refers to the sum of words that will be displayed as an excerpt. In the example above, we display 30 words worth of each post in the excerpt.

2. Reduce Post Revisions

WordPress lets writers and bloggers look back at previous versions of their work. However, as the revisions grow in number, they may also affect a website’s performance as each newly recorded revision adds a new row to the database. This problem will only get worse over time.

To solve this issue, you can set how many revisions you want to save in the database. To do this, open your wp-config.php and add this snippet below. Change the number to limit the number of revisions you want saved.

 define('WP_POST_REVISIONS', 5); 

If you would rather disable WordPress revision, switch the value to FALSE like this:

 define('WP_POST_REVISIONS', false); 

3. Automatically Set Featured Image On A Post

It’s common practice to display a featured image that represents or describes a post. WordPress requires us to set this featured image manually. To make the process more efficient, we can set the featured image automatically by making the first image in the post the featured image. Use the following code snippet.

 function autoset_featured()  global $post; $already_has_thumb = has_post_thumbnail($post->ID); if (!$already_has_thumb)  $attached_image = get_children( "post_parent=$post->ID&post_type=attachment&post_mime_type=image&numberposts=1" ); if ($attached_image)  foreach ($attached_image as $attachment_id => $attachment)  set_post_thumbnail($post->ID, $attachment_id);     add_action('the_post', 'autoset_featured'); add_action('save_post', 'autoset_featured'); add_action('draft_to_publish', 'autoset_featured'); add_action('new_to_publish', 'autoset_featured'); add_action('pending_to_publish', 'autoset_featured'); add_action('future_to_publish', 'autoset_featured'); 

4. Force Minimum Comment Length

Not a fan of the 1-2 word comments like “Nice Post!”, “Good Job!”? Although the comment might not be spam, these are the type of comments that will not typically encourage further discussions. If you want to get your commenters talking, you can set a minimum length of words required before readers can post their comment.

Below is the snippet to set the minimum number of characters or words for comments. Put it in functions.php.

 function minimal_comment_length( $commentdata )  $minimalCommentLength = 20; if ( strlen( trim( $commentdata['comment_content'] ) ) < $minimalCommentLength ) wp_die( 'All comments must be at least ' . $minimalCommentLength . ' characters long.' );  return $commentdata;  add_filter( 'preprocess_comment', 'minimal_comment_length' ); 

$minimalCommentLength value is the minimum number of characters that is required, make your changes to this value to tweak this.

5. Disable Links From User Comments

Links that are included in the comments form will instantly become a clickable link once they are posted and approved. This can be exploited by spammers, encouraging them to flood your comment section with a link to their “spammy” page.

To counter this, you can add this filter to disable the click-ability of the link(s) and retain them simply as plain text.

 remove_filter('comment_text', 'make_clickable', 9); 

6. Remove Class And ID’s From Custom Menus

If you look at the custom menu in WordPress, you will find a bunch of classes and ids on every menu item. Use the snippet below to remove the classes you don’t want and to keep the classes that you need.

 function my_css_attributes_filter($var)  return is_array($var) ? array_intersect($var, array('current-menu-item')) : '';  add_filter('nav_menu_css_class', 'my_css_attributes_filter', 100, 1); add_filter('nav_menu_item_id', 'my_css_attributes_filter', 100, 1); add_filter('page_css_class', 'my_css_attributes_filter', 100, 1);

In the above code, we are keeping the current-menu-item class.

7. Exclude Pages From Search

Doing searches in WordPress will pull results from both pages and posts, sometimes with not much relevance to your search query. To prevent this, you can filter the search results to show only those found in posts. Add this snippet to function.php to do this.

 function SearchFilter($query)  if ($query->is_search)  $query->set('post_type', 'post');  return $query;  add_filter('pre_get_posts','SearchFilter'); 

8. Replace Howdy Text

Bored with the ‘Howdy’ text? If you want to change that to a special salutation on your site, just add this to functions.php and the effect will take place immediately.

 function change_howdy($translated, $text, $domain)  if (false !== strpos($translated, 'Howdy')) return str_replace('Howdy', 'Hello', $translated); return $translated;  add_filter('gettext', 'change_howdy', 10, 3); 

9. Add Additional Menu Removal For Particular Roles

You can hide menus that are in the Dashboard, for non-administrators, with this snippet.

 function remove_admin_menus() if(is_user_logged_in() && !current_user_can('administrator')) remove_menu_page( 'index.php' ); //Dashboard remove_menu_page( 'edit.php' ); //Posts remove_menu_page( 'upload.php' ); //Media remove_menu_page( 'edit.php?post_type=page' ); //Pages remove_menu_page( 'edit-comments.php' ); //Comments remove_menu_page( 'themes.php' ); //Appearance remove_menu_page( 'plugins.php' ); //Plugins remove_menu_page( 'users.php' ); //Users remove_menu_page( 'tools.php' ); //Tools remove_menu_page( 'options-general.php' ); //Settings   add_action('admin_init', 'remove_admin_menus'); 

Please note that this just removes the menus from the screen, but does not filter the user’s permission to access these menu. It does not prevent a user from accessing those menus directly through the browser address bar. Remember to add them to your functions.php.

10. Remove Admin Bar Link For Non-Adminstrators

In the WordPress Dashboard, besides the main menu on the sidebar, you will also find a couple of menu links at the top. You can restrict access to this admin bar link from specific roles or users. This snippet below will remove the menu in the admin bar for users who aren’t an Administrator – adjust accordingly.

 function remove_admin_bar_links()  global $wp_admin_bar; if (!current_user_can('administrator'))  $wp_admin_bar->remove_menu('wp-logo'); // Remove the WordPress logo $wp_admin_bar->remove_menu('about'); // Remove the about WordPress link $wp_admin_bar->remove_menu('wporg'); // Remove the WordPress.org link $wp_admin_bar->remove_menu('documentation'); // Remove the WordPress documentation link $wp_admin_bar->remove_menu('support-forums'); // Remove the support forums link $wp_admin_bar->remove_menu('feedback'); // Remove the feedback link $wp_admin_bar->remove_menu('site-name'); // Remove the site name link $wp_admin_bar->remove_menu('view-site'); // Remove the visit site link $wp_admin_bar->remove_menu('updates'); // Remove the updates link $wp_admin_bar->remove_menu('comments'); // Remove the comments link $wp_admin_bar->remove_menu('new-content'); // Remove the new content link $wp_admin_bar->remove_menu('my-account'); // Remove the user details tab   add_action('wp_before_admin_bar_render', 'remove_admin_bar_links'); 



Advertisements
Standard
Web design

Using The TinyMCE Editor In WordPress [Guide]

Although they may not know its name, everyone who uses WordPress is familiar with the TinyMCE editor. It’s the editor you use when you create or edit your content – the one with the buttons for creating bold text, headings, text alignment and so on is. That’s what we’ll be taking a look at in this post, and I’m going to show you how you can add functionality and how you can use it in your plugins.

The editor is built on a platform-independent Javascript system called TinyMCE which is used in a number of projects on the Web. It has a great API which WordPress allows you to tap into to create your own buttons and to add it to other locations within WordPress.

Adding Available Buttons

WordPress uses some options available in TinyMCE to disable particular buttons – such as superscript, subscript and horizontal rules – in order to clean up the interface. They can be added back without too much fuss.

The first step is to create a plugin. Take a look at the WordPress codex on how to do that. In a nutshell, you can get by with creating a folder named ‘my-mce-plugin’ in the wp-content/plugins folder. Create a file with the same name, with a PHP extension: my-mce-plugin.php.

Inside that file paste the following:

<?php
/**
    *Plugin Name: My TinyMCE plugin
    *Description: A plugin for adding custom functionality to the WordPress TinyMCE plugin.
*/

Once done you should be able to select this plugin in WordPress and activate it. All the code from now on can be pasted inside this file.

So, back to enabling some built-in but hidden buttons. Here’s the code that allows us to enable the 3 buttons I mentioned:

add_filter( 'mce_buttons_2', 'my_tinymce_buttons' );
function my_tinymce_buttons( $buttons ) 
    $buttons[] = 'superscript';
    $buttons[] = 'subscript';
    $buttons[] = hr;
    return $buttons;

To know which buttons can be added and what they are called, take a look at the list found in the TinyMCE documentation for controls.

Creating Our Own Buttons

How about creating our own buttons from scratch? Many websites use Prism for code highlighting which uses a very semantic approach to marking up code segments. You have to wrap your code within <code> and <pre> tags, something like this:

<pre><code>$variable = 'value'</code></pre>

Let’s create a button which will do this for us!

This is a three-step process. You will need to add a button, load a javascript file and actually write the content of the Javascript file. Let’s get started!

Adding the button and loading the Javascript file is pretty straightforward, here’s the code I used to get it done:

add_filter( 'mce_buttons', 'pre_code_add_button' );
function pre_code_add_button( $buttons ) 
    $buttons[] = 'pre_code_button';
    return $buttons;

add_filter( 'mce_external_plugins', 'pre_code_add_javascript' );
function pre_code_add_javascript( $plugin_array ) 
	$plugin_array['pre_code_button'] = get_template_directory_uri() . '/tinymce-plugin.js';
	return $plugin_array;

When I see tutorials about this I frequently see 2 problems.

They neglect to mention that the button name added in the pre_code_add_button() function must be the same as the key for the $plugin_array variable in the pre_code_add_javascript() function. We will also need to use the same string in our Javascript later on.

Some tutorials also use an additional admin_head hook to wrap everything up. While this will work, it is not required and since the Codex does not use it, it should probably be avoided.

The next step is to write some Javascript to implement our functionality. Here’s what I used to get the <pre> and <code> tags output all at once.

(function() 
    tinymce.PluginManager.add('pre_code_button', function( editor, url ) 
        editor.addButton( 'pre_code_button', 
            text: 'Prism',
            icon: false,
            onclick: function() 
            var selected = tinyMCE.activeEditor.selection.getContent();
            var content = '<pre><code>' + selected + '</code></pre>';
            editor.insertContent( content + "n" );
            
        );
    );
)();

Most of this is dictated by how a TinyMCE plugin is supposed to be coded, you can find some information about that in the TinyMCE documentation. For now, all you need to know is that the name of your button (pre_code_button) should be used in line 2 and 3. The value of "text" in line 4 will be displayed if you do not use an icon (we’ll take a look at adding icons in a moment).

The onclick method dictates what this button does when it is clicked. I want to use it to wrap selected text within the HTML structure discussed earlier.

The selected text can be grabbed using tinyMCE.activeEditor.selection.getContent(). Then, I wrap the elements around it and insert it, replacing the highlighted content with the new element. I’ve also added a new line so I can easily start writing after the code element.

If you want to use an icon I suggest selecting one from the Dashicons set which ships with WordPress. The Developer Reference has a great tool for finding icons and their CSS/HTML/Glyph. Find the code symbol and note the unicode underneath it: f475.

We’ll need to attach a stylesheet to our plugin and then add a simple style to display our icon. First up, let’s add our style to WordPress:

add_action( 'admin_enqueue_scripts', 'pre_code_styles' );
function pre_code_styles() 
	wp_enqueue_style( 'pre_code_button', plugins_url( '/style.css', __FILE__ ) );

Go back to the Javascript and next to the icon in the addButton function, replace “false” with a class you would like your button to have – I used pre_code_button.

Now create the style.css file in your plugin directory and add the following CSS:

i.mce-i-pre_code_button:before 
	font-family:dashicons;
	content: "f475";

Note that the button will receive the mce-i-[your class here] class which you can use to target and add styles. Specify the font as dashicons and the content using the unicode value from earlier.

Using TinyMCE Elsewhere

Plugins often create textareas for entering longer text, wouldn’t it be great if we could use TinyMCE there as well? Of course we can, and it’s pretty easy. The wp_editor() function allows us to output one anywhere in admin, here’s how it looks:

wp_editor( $initial_content, $element_id, $settings );

The first parameter sets the initial content for the box. This could be used to load an option from the database, for example. The second parameter sets the HTML element’s ID. The third parameter is an array of settings. To read about the exact settings you can use, take a look at the wp editor documentation.

The most important setting is the textarea_name. This populates the name attribute of the textarea element, allowing you to save the data easily. Here’s how my editor looks when used in an options page:

$settings = array( 'textarea_name' => 'buyer_bio' );
wp_editor( get_option('buyer_bio'), 'buyer_bio', $settings );

This is equivalent to writing the following code, which would result in a simple textarea:

<textarea id='buyer_bio' class='buyer_bio'><?php get_option( 'buyer_bio' ) ?></textarea>

Conclusion

The TinyMCE editor is a user-friendly way of allowing users more flexibility when entering content. It allows those who don’t want to format their content to just type it up and be done with it, and those who want to fiddle around with it to spend as much time as they need getting it just right.

Creating new buttons and functionality can be done in a very modular way, and we’ve only just scratched the surface of the possibilities. If you know of a particularly good TinyMCE plugin or use case which has helped you a lot, do let us know in the comments below!

Standard
Web design

Using The TinyMCE Editor In WordPress [Guide]

Although they may not know its name, everyone who uses WordPress is familiar with the TinyMCE editor. It’s the editor you use when you create or edit your content – the one with the buttons for creating bold text, headings, text alignment and so on is. That’s what we’ll be taking a look at in this post, and I’m going to show you how you can add functionality and how you can use it in your plugins.

The editor is built on a platform-independent Javascript system called TinyMCE which is used in a number of projects on the Web. It has a great API which WordPress allows you to tap into to create your own buttons and to add it to other locations within WordPress.

Adding Available Buttons

WordPress uses some options available in TinyMCE to disable particular buttons – such as superscript, subscript and horizontal rules – in order to clean up the interface. They can be added back without too much fuss.

The first step is to create a plugin. Take a look at the WordPress codex on how to do that. In a nutshell, you can get by with creating a folder named ‘my-mce-plugin’ in the wp-content/plugins folder. Create a file with the same name, with a PHP extension: my-mce-plugin.php.

Inside that file paste the following:

 <?php /** *Plugin Name: My TinyMCE plugin *Description: A plugin for adding custom functionality to the WordPress TinyMCE plugin. */ 

Once done you should be able to select this plugin in WordPress and activate it. All the code from now on can be pasted inside this file.

So, back to enabling some built-in but hidden buttons. Here’s the code that allows us to enable the 3 buttons I mentioned:

 add_filter( 'mce_buttons_2', 'my_tinymce_buttons' ); function my_tinymce_buttons( $buttons )  $buttons[] = 'superscript'; $buttons[] = 'subscript'; $buttons[] = hr; return $buttons;  

To know which buttons can be added and what they are called, take a look at the list found in the TinyMCE documentation for controls.

Creating Our Own Buttons

How about creating our own buttons from scratch? Many websites use Prism for code highlighting which uses a very semantic approach to marking up code segments. You have to wrap your code within <code> and <pre> tags, something like this:

<pre><code>$variable = 'value'</code></pre>

Let’s create a button which will do this for us!

This is a three-step process. You will need to add a button, load a javascript file and actually write the content of the Javascript file. Let’s get started!

Adding the button and loading the Javascript file is pretty straightforward, here’s the code I used to get it done:

 add_filter( 'mce_buttons', 'pre_code_add_button' ); function pre_code_add_button( $buttons )  $buttons[] = 'pre_code_button'; return $buttons;  add_filter( 'mce_external_plugins', 'pre_code_add_javascript' ); function pre_code_add_javascript( $plugin_array )  $plugin_array['pre_code_button'] = get_template_directory_uri() . '/tinymce-plugin.js'; return $plugin_array;  

When I see tutorials about this I frequently see 2 problems.

They neglect to mention that the button name added in the pre_code_add_button() function must be the same as the key for the $plugin_array variable in the pre_code_add_javascript() function. We will also need to use the same string in our Javascript later on.

Some tutorials also use an additional admin_head hook to wrap everything up. While this will work, it is not required and since the Codex does not use it, it should probably be avoided.

The next step is to write some Javascript to implement our functionality. Here’s what I used to get the <pre> and <code> tags output all at once.

 (function()  tinymce.PluginManager.add('pre_code_button', function( editor, url )  editor.addButton( 'pre_code_button',  text: 'Prism', icon: false, onclick: function()  var selected = tinyMCE.activeEditor.selection.getContent(); var content = '<pre><code>' + selected + '</code></pre>'; editor.insertContent( content + "n" );  ); ); )(); 

Most of this is dictated by how a TinyMCE plugin is supposed to be coded, you can find some information about that in the TinyMCE documentation. For now, all you need to know is that the name of your button (pre_code_button) should be used in line 2 and 3. The value of "text" in line 4 will be displayed if you do not use an icon (we’ll take a look at adding icons in a moment).

The onclick method dictates what this button does when it is clicked. I want to use it to wrap selected text within the HTML structure discussed earlier.

The selected text can be grabbed using tinyMCE.activeEditor.selection.getContent(). Then, I wrap the elements around it and insert it, replacing the highlighted content with the new element. I’ve also added a new line so I can easily start writing after the code element.

If you want to use an icon I suggest selecting one from the Dashicons set which ships with WordPress. The Developer Reference has a great tool for finding icons and their CSS/HTML/Glyph. Find the code symbol and note the unicode underneath it: f475.

We’ll need to attach a stylesheet to our plugin and then add a simple style to display our icon. First up, let’s add our style to WordPress:

 add_action( 'admin_enqueue_scripts', 'pre_code_styles' ); function pre_code_styles()  wp_enqueue_style( 'pre_code_button', plugins_url( '/style.css', __FILE__ ) );  

Go back to the Javascript and next to the icon in the addButton function, replace “false” with a class you would like your button to have – I used pre_code_button.

Now create the style.css file in your plugin directory and add the following CSS:

 i.mce-i-pre_code_button:before  font-family:dashicons; content: "f475";  

Note that the button will receive the mce-i-[your class here] class which you can use to target and add styles. Specify the font as dashicons and the content using the unicode value from earlier.

Using TinyMCE Elsewhere

Plugins often create textareas for entering longer text, wouldn’t it be great if we could use TinyMCE there as well? Of course we can, and it’s pretty easy. The wp_editor() function allows us to output one anywhere in admin, here’s how it looks:

wp_editor( $initial_content, $element_id, $settings );

The first parameter sets the initial content for the box. This could be used to load an option from the database, for example. The second parameter sets the HTML element’s ID. The third parameter is an array of settings. To read about the exact settings you can use, take a look at the wp editor documentation.

The most important setting is the textarea_name. This populates the name attribute of the textarea element, allowing you to save the data easily. Here’s how my editor looks when used in an options page:

$settings = array( 'textarea_name' => 'buyer_bio' );
wp_editor( get_option('buyer_bio'), 'buyer_bio', $settings );

This is equivalent to writing the following code, which would result in a simple textarea:

<textarea id='buyer_bio' class='buyer_bio'><?php get_option( 'buyer_bio' ) ?></textarea>

Conclusion

The TinyMCE editor is a user-friendly way of allowing users more flexibility when entering content. It allows those who don’t want to format their content to just type it up and be done with it, and those who want to fiddle around with it to spend as much time as they need getting it just right.

Creating new buttons and functionality can be done in a very modular way, and we’ve only just scratched the surface of the possibilities. If you know of a particularly good TinyMCE plugin or use case which has helped you a lot, do let us know in the comments below!



Standard
Web design

20 “Coming Soon” WordPress Themes Worth Waiting For

So you’re looking to give your WordPress site a new look and are trying to work out the kinks in time for 2015; or you have a new app, product, company or album you want to release and you’re hoping to generate some hype by putting up a Coming Soon site first. Then, you’re going to need yourself a cool Coming Soon or Under Construction theme.

Create some buzz online about your brand or product, intrigue visitors, and collect some email subscribers while you’re at it, with these 20 Coming Soon WordPress theme. Just to cover all the bases, I’ve put together 20 free and premium Coming Soon themes that will cater to most, if not all, of your professional needs.

Almost all of these themes are packed with progress bars or countdown timers to help visitors keep track of your progress while waiting for the final launch.

Free Themes

Felice Theme by Bluchic. The Felice WordPress theme has an attractive, light look. It lets you showcase text and images along with a progress bar (the color is customizable), email form and social media buttons. [Get it here]

Coming Sssoon Page by Creative Tim. Ssson is a free WordPress theme. Use it to create a group of users before your site is launched. It is suitable for any creative agency or for personal usage. It comes in two variants: image background and video background. [Get it here]

Ego Cafe by Anish Trehan. Ego Cafe is a responsible theme that can be used for a cafe or cooking blog. Just change the headings, background image and social media buttons to personalize the theme. [Get it here]

Professory Under Construction Mobile Website Template by w3layouts. This theme is simple and will fit in any business company. It contains a creative counter to show when your website is going to be online. [Get it here]

Trendy Divaa by Anish Trehan. Trendy Divaa is a simple, responsive coming soon page that is designed for fashion sites. [Get it here]

Fotos Website Launching Soon by w3layouts. Let your users know that you’re going to launch soon with this photographic theme. It’s suitable for photographers and any other creatives who work with images and illustrations. [Get it here]

Coming soon Under Construction by w3layouts. This under construction page looks festive and fancy. You may use it to show your visitors that your site is redesigning or some changes are going to be done. [Get it here]

Wifindly Coming Soon Theme by Web Success. This theme has an eye-catching background image and a message for your users placed at the top. [Get it here]

Launcher WordPress by MyThemeShop. This coming soon theme absolutely rock(et)s! The rocket shows that you’re working on site redesign and will probably "launch" soon. The rocket shakes a little when one mouses over it. [Get it here]

Glacier by Web Success. Glacier is a clean, minimal and responsive theme optimized for desktop and mobile. It contains a cool background photo, email subscription form and social media buttons. [Get it here]

Premium Themes

Start by Pixininja. Start is a high-quality WordPress theme with a background image and creative counter. It not only notifies users about your launching, but also has a working contact form, is Mailchimp ready and can carry a Twitter feed. [Get it here – ]

MUMM | The Splitted by Madeon08. The key feature of this theme is unusual divided scrolling. The left part of the screen moves up and the right one moves down while scrolling – that makes MUMM an ultra-cool solution. [Get it here – ]

Panara by themezaa. This theme was carefully designed with attention to detail to provide unbelievable user experience. The Full-screen slideshow background and bold counter will definitely impress your visitors and make them come back when you’re finally ready to go live.

[Get it here – ]

MyCountdown by TeslaThemes. The coolest part of this WordPress theme is its countdown. It’s designed in the form of tubes with colored liquids that depict the days, hours, minutes and seconds to your launch. Although, for some reason, the tubes fill up as you get closer to the launch date. [Get it here – ]

Bianco by Serhii Korzin. An awesome stamp logo, cool black and white photograph on the background and a simple counter make this theme stand out from the crowd. It will be suitable for any photographer, designer or artist. [Get it here – ]

Caelus by oxygenna. Here is one more rocket theme in this collection. It’s available in two gorgeous styles with four beautiful font combinations that look great on the iPhone, iPad and any desktops. It has a stunning retro look and the stars on the background move on mouseover. [Get it here – ]

Glance by aThemes. This theme is fully responsive with sticky menu and awesome color scheme. It can be used for any business purpose as well as for creative needs. [Get it here – ]

Working by aThemes. This is super-clean responsive theme with a countdown script and attractive background slider. [Get it here – ]

Malooka by NestoLab. Malooka is a responsive template featuring 8 different background options including video, slideshow, pattern and even a map option. [Get it here – ]

Verde by CreaboxThemes. Verde is a creative under construction theme. If you’re working on a new site or redesigned, this clean minimalistic theme is just for you. [Get it here – ]

Standard
Web design

20 "Coming Soon" WordPress Themes Worth Waiting For

So you’re looking to give your WordPress site a new look and are trying to work out the kinks in time for 2015; or you have a new app, product, company or album you want to release and you’re hoping to generate some hype by putting up a Coming Soon site first. Then, you’re going to need yourself a cool Coming Soon or Under Construction theme.

Create some buzz online about your brand or product, intrigue visitors, and collect some email subscribers while you’re at it, with these 20 Coming Soon WordPress theme. Just to cover all the bases, I’ve put together 20 free and premium Coming Soon themes that will cater to most, if not all, of your professional needs.

Almost all of these themes are packed with progress bars or countdown timers to help visitors keep track of your progress while waiting for the final launch.

Free Themes

Felice Theme by Bluchic. The Felice WordPress theme has an attractive, light look. It lets you showcase text and images along with a progress bar (the color is customizable), email form and social media buttons. [Get it here]

Coming Sssoon Page by Creative Tim. Ssson is a free WordPress theme. Use it to create a group of users before your site is launched. It is suitable for any creative agency or for personal usage. It comes in two variants: image background and video background. [Get it here]

Ego Cafe by Anish Trehan. Ego Cafe is a responsible theme that can be used for a cafe or cooking blog. Just change the headings, background image and social media buttons to personalize the theme. [Get it here]

Professory Under Construction Mobile Website Template by w3layouts. This theme is simple and will fit in any business company. It contains a creative counter to show when your website is going to be online. [Get it here]

Trendy Divaa by Anish Trehan. Trendy Divaa is a simple, responsive coming soon page that is designed for fashion sites. [Get it here]

Fotos Website Launching Soon by w3layouts. Let your users know that you’re going to launch soon with this photographic theme. It’s suitable for photographers and any other creatives who work with images and illustrations. [Get it here]

Coming soon Under Construction by w3layouts. This under construction page looks festive and fancy. You may use it to show your visitors that your site is redesigning or some changes are going to be done. [Get it here]

Wifindly Coming Soon Theme by Web Success. This theme has an eye-catching background image and a message for your users placed at the top. [Get it here]

Launcher WordPress by MyThemeShop. This coming soon theme absolutely rock(et)s! The rocket shows that you’re working on site redesign and will probably "launch" soon. The rocket shakes a little when one mouses over it. [Get it here]

Glacier by Web Success. Glacier is a clean, minimal and responsive theme optimized for desktop and mobile. It contains a cool background photo, email subscription form and social media buttons. [Get it here]

Premium Themes

Start by Pixininja. Start is a high-quality WordPress theme with a background image and creative counter. It not only notifies users about your launching, but also has a working contact form, is Mailchimp ready and can carry a Twitter feed. [Get it here – ]

MUMM | The Splitted by Madeon08. The key feature of this theme is unusual divided scrolling. The left part of the screen moves up and the right one moves down while scrolling – that makes MUMM an ultra-cool solution. [Get it here – ]

Panara by themezaa. This theme was carefully designed with attention to detail to provide unbelievable user experience. The Full-screen slideshow background and bold counter will definitely impress your visitors and make them come back when you’re finally ready to go live.

[Get it here – ]

MyCountdown by TeslaThemes. The coolest part of this WordPress theme is its countdown. It’s designed in the form of tubes with colored liquids that depict the days, hours, minutes and seconds to your launch. Although, for some reason, the tubes fill up as you get closer to the launch date. [Get it here – ]

Bianco by Serhii Korzin. An awesome stamp logo, cool black and white photograph on the background and a simple counter make this theme stand out from the crowd. It will be suitable for any photographer, designer or artist. [Get it here – ]

Caelus by oxygenna. Here is one more rocket theme in this collection. It’s available in two gorgeous styles with four beautiful font combinations that look great on the iPhone, iPad and any desktops. It has a stunning retro look and the stars on the background move on mouseover. [Get it here – ]

Glance by aThemes. This theme is fully responsive with sticky menu and awesome color scheme. It can be used for any business purpose as well as for creative needs. [Get it here – ]

Working by aThemes. This is super-clean responsive theme with a countdown script and attractive background slider. [Get it here – ]

Malooka by NestoLab. Malooka is a responsive template featuring 8 different background options including video, slideshow, pattern and even a map option. [Get it here – ]

Verde by CreaboxThemes. Verde is a creative under construction theme. If you’re working on a new site or redesigned, this clean minimalistic theme is just for you. [Get it here – ]



Standard
Web design

Top 8 Features Of WordPress 4.1 Twenty Fifteen Theme (Reviewed)

By the time you are reading this WordPress 4.1 is near release (or has been) and it will carry a new default theme, Twenty Fifteen. I actually like this theme so much that I changed my personal website to it as soon as the first preview came out.

In this article I want to show you my favorite features of Twenty Fifteen and why I think it is a worthy addition to WordPress. To me Twenty Fifteen is a “back to basics” theme in a good way. It showcases all the great features of WordPress without adding bloat, or features which really should be added by plugins, not themes. Themes are meant to style functionality not to add them; in this sense Twenty Fifteen is spot on.

1. Overall Design

I was not a fan of the overly-busy Twenty Fourteen. In comparison the new default theme is a breath of fresh air. I enjoy the very light default color scheme – it provides enough contrast but doesn’t overwhelm. It is easy on the eyes and well-placed featured images provide splashes of color where it is needed. There is plenty of white space and the text is easily readable.

Noto Serif and Noto Sans are great choices for fonts. They remain legible at small sizes and they are nice and elegant on desktop-sized screens.

2. Content Focus

The design and structure of the theme focus heavily on content. More importantly, they focus on quality content. My feeling with Twenty Fourteen was that it tried to do too much, the focus was on quantity, not quality.

The sidebar does give you great opportunities to cross-promote content but the main section gets the most attention. This is ideal for bloggers or casual writers.

If you have an online store this theme is of course not for you, but that was never the intention. Keep in mind that default themes are for showcasing default functionality, not to cater to all plugins out there.

3. Social Icon Menu

The social icons you see on the screenshot above have been added using the regular old menu editor. Just add the URLs of your social services along with the names and the theme will automagically convert them to the correct icons.

One issue I have here is that this functionality isn’t terribly obvious. I’ve been working with WordPress for quite some time so to me this came naturally but for casual users or newcomers this feature may be completely overlooked.

4. Static Sidebar

The sidebar scrolls with the content while there is content but remains stationary when content runs out in the sidebar. This means that you never see an empty strip next to your content.

This allows authors to put more thought into their sidebars and in general it shortens unnecessarily long asides. It forces you to think about what is important and what isn’t and this will result in a more organized, better streamlined site.

5. Featured Image Flexibility

The featured image doesn’t give you a huge number of options but the way it is presented offers enough flexibility to make your site look good with a large variety of images. You can go with no featured image, a high featured image, or perhaps just a small strip. Depending on the image used you can make the site look upbeat and fun (like in the first example image), or more polished and elegant, like below:

6. Customization

You won’t find a powerhouse of options at your disposal like you might with a premium theme, but Twenty Fifteen gives you just enough control to make it your own. The two most important controls allow you to specify the background of the sidebar and the content sections. This provides a surprising amount of variation:

7. Responsiveness

Responsiveness in Twenty Fifteen is beautifully executed. The menu is neatly tucked away behind a button (which is easy enough to do) and when it is displayed it remains easy to browse and will get you where you need to be (which isn’t easy to do at all). Even child pages are intuitive to access – kudos to the theme team on this one!

Images, galleries and post meta sections all look great and readability is maintained on every page. Reading a website running Twenty Fifteen on a mobile phone is a genuine pleasure.

8. Overall Harmony

This one is probably the most subjective one on the list. To me the theme looks like a harmonious whole which radiates simplicity. The theme looks “properly put together”, it seems well thought out and deliberate. It’s obvious that a lot of thought was put into the direction both visually and feature-wise and I think it really shows in the end result.

Conclusion

As with any other theme there will be people who love it and people who will hate it. I think the key element to think about is: is this theme right for me?

Twenty Fifteen is for those of us who enjoy writing on a minimal interface. It won’t appeal to everyone and you may disagree with some of my points above. Thats perfectly ok, the point is that Twenty Fifteen is right for a lot of people. If you think another theme does the job better, let us know in the comments!



Standard
Web design

How To Create Your Own WordPress Shortcodes

Shortcodes are a very powerful feature of WordPress. In essence a shortcode is a placeholder for some other content. A well-known shortcode is the built-in gallery shortcode. Just type into the WordPress editor and it will be replaced by a gallery of images taken from media uploaded to the post.

Although the media uploader gives you a nice interface to create a gallery, behind the scenes however, a shortcode is built, something like this: . Depending on your theme this may look different on your installation but one possible output would be something like this:

The HTML you would need to write to make this happen is pretty hefty; using the shortcode makes it considerably faster. If you need to do any repetitive tasks in the post editor or you need a specific HTML format which takes a while to mark up, you may find that your own shortcode can help.

In this article I’ll show you how shortcodes work and how you can create your own through some easy examples.

The Basics Of Shortcodes

As I mentioned, shortcodes essentially get replaced by some other content you define. Let’s take a look at the basics through an example. Let’s assume that throughout your post you want to reference the owner of the website.

"According to our company’s owner – Daniel Pataki – the main goal of the website is to generate lots of money. Daniel Pataki thinks that sharing is also important."

Instead of writing "Daniel Pataki" we could use a shortcode.

"According to our company’s owner – [owner] – the main goal of the website is to generate lots of money. [owner] thinks that sharing is also important."

This would allow us to change the name of the owner in one location, so in the event that the owner changes, all instances of our shortcode would use the new name.

Coding this is actually pretty simple. We’ll need to use the add_shortcode() function to tell WordPress about our shortcode, and then create our function to handle the output:

add_shortcode( 'owner', ‘owner_output' );
    function owner_output() 
    return ‘Daniel Pataki';

Note that this code should be added to your theme’s functions.php file or your plugin’s files. If you are using a third party theme I recommend using a child theme.

The add_shortcode function requires 2 parameters: the first parameter is the shortcode WordPress tries to match — this is what you write between the square brackets — the second parameter is the name of the function which handles the output, which is completely up to us.

Inside our output handling function we need to return the output that we want to replace our shortcode.

Shortcode Attributes

It is important to be aware that our shortcodes can use attributes as well. For instance, if you want to make sure that the owner of the website is shown in bold, you can make this happen by creating a attribute named "bold" and when that is set to true, the appropriate HTML tags will be added.

add_shortcode( 'owner', ‘owner_output' );
function owner_output( $atts ) 
    $atts = shortcode_atts( array(
        ‘bold' => false
    ), $atts );
    if( $atts[‘bold'] == true  ) 
        return ‘<strong>Daniel Pataki</strong>';
    
    else 
        return ‘Daniel Pataki';
    

This looks a lot more intimidating, but in reality it’s fairly straightforward. First of all, start out with visualizing how your shortcode would be used. When typing your shortcode you would do this:

[owner bold='true']

We now know that we’re going to have an attribute named "bold".

In our output handling function we use the shortcode_atts() function to parse out all the attributes and give some of them default values. We are making sure that if you don’t specify what the value of "bold" is, then it is set to false.

Next we just take a look at the value of the bold attribute. If it is true we return the name of the owner in a strong tag, otherwise we just return it as is.

Shortcode Content

Shortcode content is usually used when a bit of content needs to receive special HTML formatting. Let’s assume that your website uses fancy titles like this:

<h1><span class="fa fa-check"></span>My Title</h1>

This is a special title which is a level one heading and contains an icon as well. We could create this as a shortcode using the following formatting:

[title icon='check']My Title[/title]

Note that we’re using an opening shortcode tag which has some parameters and a closing shortcode tag. The content within (My Title) is passed to our output generating function as the second parameter.

add_shortcode( ‘title', ‘title_output' );
function title_output( $atts, $content ) 
    $atts = shortcode_atts( array(
        ‘icon' => ‘pencil'
    ), $atts );
    return ‘<h1><span class="fa fa-' . $atts[‘icon'] . '">' . $content . ‘</h1>';

As you can see, the default icon is "pencil", unless it is defined in the shortcode. The content is passed as the second parameter and is used as the content inside the level one heading.

Practical Uses

There are a great number of uses for shortcodes from placing sliders and galleries into posts, to countdown timers and other dynamic content. These usually require some Javascript and CSS to work well. In these cases it is up to your imagination and your coding chops.

There are a number of things you can do to make your life easier (even as a non coder), such as to simplify the editing and writing process. Let’s say you write game reviews and in each one you need to enter a table like this:

<table>
<tr>
    <th>Title</th>
    <th>Developer</th>
    <th>Genre</th>
    <th>Price</th>
    <th>Our Verdict</th>
</tr>
<tr>
    <td>Never Alone</td>
    <td>Upper One Games</td>
    <td>Indie Casual Adventure</td>
    <td>.99</td>
    <td>5/5</td>
</tr>
</table>

Even if you copy-paste this from article to article, it’s a fair amount of mucking about compared to the amount of content you are adding. You could use a simple shortcode to get the job done:

[final_table title="Never Alone" dev="Upper One Games" genre="Upper One Games" price="14.99" rating="5"]

Your shortcode output function would be responsible for adding the whole table and other bits of content around this information, something like this:

add_shortcode( ‘final_table', ‘final_table_output');
function final_table_output( $atts ) 
return ‘
<table>
<tr>
    <th>Title</th>
    <th>Developer</th>
    <th>Genre</th>
    <th>Price</th>
    <th>Our Verdict</th>
</tr>
<tr>
    <td>' . $atts[‘title'] . '</td>
    <td>' . $atts[‘dev'] . '</td>
    <td>' . $atts[‘genre'] . '</td>
    <td>$' . $atts[‘price'] . '</td>
    <td>5/' . $atts[‘rating'] . '</td>
</tr>
</table>
';

The Christmas Easter Egg

So you got this far and it’s nearing Christmas time so I thought I’d include a little easter egg. The Christmas Countdown Widget is a plugin which gives you the opportunity to add a Santa-themed Christmas countdown to your website as a sidebar widget or as a shortcode.

Install, activate and use [countdown] anywhere in your post content to add Mr. Clause to your post.

Conclusion

I think shortcodes are great because they allow non-coders to simplify their workflows and can increase in complexity as you expand your coding knowledge. I suggest trying to create a shortcode here and there as you have more complex needs.

For a list of all default shortcodes take a look at the Shortcode section in the WordPress codex. For more information take a look at the Codex, and you may also want to bookmark the Shortcode Generator which can save you a few keystrokes when creating your generator functions.

Standard