Archive for WordPress

How To Get Started With WordPress

I get often asked as to how to get started with making a living in the field of WordPress. In this article I am going to provide links to resources (mostly videos – all free) that are prerequisites if you want to master WordPress.

Stage 1: Learn HTML and CSS

WebDesign.com 2013-05-10 10-52-27

Watch the videos by WebDesign.com here: http://webdesign.com/free/htmlcss

Stage 2: Learn basics of WordPress

WordPress 101 | iThemes 2013-05-10 10-57-54

Watch the videos by iThemes.com here: http://ithemes.com/tutorial/category/wordpress-101/

Stage 3: Learn about WordPress web design and development

Web Developer Training | iThemes 2013-05-10 10-56-42

Watch the videos by iThemes.com here: http://ithemes.com/tutorial/category/web-developer-training/

Stage 4: Learn basics of PHP

In the Woods – Diving into PHP: Video Series 2013-05-10 11-04-36

Watch Diving into PHP video series here: http://blog.themeforest.net/screencasts/diving-into-php-video-series/

Note: You do not need to memorize or take-in everything shown in the above PHP course. Just watch all the videos once to get a understanding and overall idea of how PHP works.

Stage 5: Learn how to customize WordPress themes

Wordpress Theme Development Training Wheels | Wptuts+ 2013-05-10 11-06-23

Go through WordPress Theme Development Training Wheels

The ThemeShaper WordPress Theme Tutorial: 2nd Edition | ThemeShaper 2013-05-10 11-08-27

Read The ThemeShaper WordPress Theme Tutorial: 2nd Edition

Also noteworthy: A Guide To The Options For WordPress Theme Development

Stage 6: Improve your troubleshooting skills by solving WordPress problems

WordPress › Support 2013-05-10 11-10-13

Create a account at http://wordpress.org/ and start helping others (and yourself, actually) by answering the questions asked at http://wordpress.org/support/, especially in “How-To and Troubleshooting” and “Themes and Templates” sections.

If you have followed and done all the above diligently, you should now be at a stage where you can take up theme customization jobs. So the next thing to do is

Stage 7: Take up WordPress jobs

WordPress Jobs 2013-05-10 11-11-07

Head on over to http://jobs.wordpress.net/ and start sending those emails!

Stage 8: Pick a theme or two and become a master

The Exhaustive ManageWP Guide to WordPress Theme Frameworks 2013-05-10 11-12-09

The next stage would be to able to re-create any existing website in WordPress. For this you can either do it from scratch or be smart and use a theme framework. Personally I chose iThemes Builder. Whichever framework(s) you end up choosing, become very good at it. You should be able to

  1. make any design changes in the theme (or the child theme)
  2. take a PSD and convert that to a WordPress site using the framework
  3. re-do a existing site in WordPress using the framework

Stage 9: Start your blog/portfolio site

You need to have at least 1 website of your own where you write about what you learn, share your code snippets and essentially establish yourself as a authority or someone with enough knowledge to inspire confidence in your potential clients to give you work.

If you want an example, check out my BuilderSnippets.com.

Stage 10: Create Plugins

WordPress Plugin Development from Scratch, Part 1:4: Basic Structure 2013-05-10 11-13-12

Once you are comfortable with theme aspect of WordPress, it’s time to be able to create plugins from scratch.

Read WordPress Plugin Development from Scratch

I have not yet reached this stage and am still doing reasonably good financially (at least when compared with a standard IT job in India) just with the knowledge of everything above this stage.

Stage 11: You tell me!

By this time you will be knowing what you are going to do. It could be

  • Offering WordPress web design and development services to clients
  • Your own theme and plugins shop
  • Gathering a team to outsource to and managing everything
  • Setting up a membership site where you offer some WordPress related products or services to clients
  • or something else that no one has come up with so far.

That’s it. If all the above seems like a lot of work, perhaps it is especially if you have never touched HTML or CSS. But note that it is just a matter of spending time, absorbing things and putting it to practice. Luck comes only to those who put in the hard work. So what are you waiting for? Get started today!

How To Set Up a Custom Date Field And Order Posts By This Field’s Value

In one of the recent WordPress customization tasks I took up, the requirement was for the user to be able to enter a date in the format of yyyymmdd (Ex.: 18760310) which should appear below the post titles as: “Friday, Mar 10th, 1876” plus the posts on the /blog page to be automatically sorted by this date value.

Here’s how I did it.

1) Installed and activated Advanced Custom Fields plugin.

2) Set up the date field (Field Type: Text) in ACF.

2013-03-04 18-11-39

Here is what I entered in ‘Field Instructions’:

Enter date in this format: <strong><span style="color: red;">YYYY</span><span style="color: green;">MM</span><span style="color: blue;">DD</span></strong>

3) Edited Posts and added the custom date field’s values like this: 18760310

2013-03-04 17-49-45

4) Edited theme template files like single.php, index.php and archive.php and used this code wherever the custom date should be displayed:

<?php
	$ref_date = get_field('referendum_date'); 

	if ( !empty($ref_date) ) { echo '<div class="referendum-date"> Referendum Date: ' . date("l, M jS, Y", strtotime("$ref_date")) . '</div>' ; }
?>

to get

2013-03-04 17-54-45

5) To sort the posts by this field’s value in ascending order, added the following above the loop in index.php:

<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; query_posts("order=asc&orderby=meta_value&meta_key=referendum_date&paged=$paged"); ?>

Note: Posts with nothing entered for custom date field will not appear on the Posts page.

How To Show a Custom Field’s Value At the Top Of Every Post Or Page In Genesis

A user on Genesis forum wanted to know a way to have a video whose embed code has been entered in a meta box of a Post/Page to show above that Post/Page’s content.

1) Install Advanced Custom Fields plugin.

2) Set up a Custom Field that you wish to show in Post/Page edit screen.

2013-02-21 14-16-47

Ensure that Formatting of the field is set to “HTML”.

3) Add/edit a Post/Page and enter the embed code of video that you wish to show above the content of that Post/Page.

2013-02-21 14-18-47

4) Install Genesis Simple Hooks plugin.

5) Paste the following in “genesis_before_content_sidebar_wrap” Hook:

<?php if( is_single() || is_page() ) {
if(get_field('vimeo_video')) {
	echo '<div class="video-container my-vimeo-video">' . get_field('vimeo_video') . '</div>';
}
} ?>

Tick “Execute PHP on this hook?”

6) Check the Post/Page on the front-end and add any CSS that’s required to space out the video depending on active child theme.

Ex. in Modern Portfolio theme:

.my-vimeo-video {
	margin-bottom: 2em;
}

#inner {
	padding-top: 1rem;
}

to get

2013-02-21 14-27-45

To make the video stretch fully, we can use

.my-vimeo-video iframe {
	width: 100%;
}

2013-02-21 14-29-59

Resize the browser to see if it is behaving in a responsive manner or not. If it is not, use this CSS or FitVids jQuery script.

How To Use Classic Accordion In WordPress

Classic Accordion is a jQuery plugin that allows you to easily create accordion panels. It costs $6 and can be bought from codecanyon.

One of the members of unofficial WebDesign.com Skype chat group shared it with me so I can show him how to get it working in WordPress.

Live Demo:

Here’s how I set it up:

1) Extracted the downloaded accordion_fluid.zip file and uploaded its contents under /assets/grid-accordion in my site’s root.

Screen Shot 2013-02-15 at 8.48.39 PM

jquery-1.6.1.min.js need not be uploaded as WordPress includes jQuery.

2) Added the following in child theme’s functions.php:

// load javascript in footer
add_action('wp_enqueue_scripts', 'add_my_code');

function add_my_code() {
	wp_enqueue_script( 'classicAccordion', get_bloginfo('wpurl') . '/assets/grid-accordion/js/jquery.classicAccordion.fluid.js', array('jquery'), '1.0', true );

    wp_enqueue_style( 'classic-accordion', get_bloginfo('wpurl') . '/assets/grid-accordion/css/classic-accordion.css' );
    wp_enqueue_style( 'accordion_fluid', get_bloginfo('wpurl') . '/assets/grid-accordion/css/style.css' );

    add_action( 'print_footer_scripts', 'my_footer_script' );
}

// Add jQuery to footer

function my_footer_script() { ?>
    <script type="text/javascript">

    	var accordion;

        jQuery(function($) {

            $('.grid-accordion').classicAccordion({width:'100%', height:'100%', slideshow:true});            

        });
    </script>
<?php }

3) Added the following at the end of child theme’s style.css:

.grid-accordion-container {
	height: 354px;
	margin-bottom: 1em;
}

ul.grid-accordion {
	margin-left: 0;
}

In the above, 354px is the height of smallest (height-wise) image amongst the ones that are going to be shown in the accordion.

4) Added this HTML code in this Post:

<div class="grid-accordion-container">
<ul class="grid-accordion">
    <li>
        <img src="http://websitesetuppro.com/assets/grid-accordion/images/1.jpg" />
    </li>
    <li>
        <img src="http://websitesetuppro.com/assets/grid-accordion/images/2.jpg" />
    </li>
    <li>
        <img src="http://websitesetuppro.com/assets/grid-accordion/images/3.jpg" />
    </li>
    <li>
        <img src="http://websitesetuppro.com/assets/grid-accordion/images/4.jpg" />
    </li>
    <li>
        <img src="http://websitesetuppro.com/assets/grid-accordion/images/5.jpg" />
    </li>
    <li>
        <img src="http://websitesetuppro.com/assets/grid-accordion/images/6.jpg" />
    </li>
    <li>
        <img src="http://websitesetuppro.com/assets/grid-accordion/images/7.jpg" />  
    </li>
    <li>
        <img src="http://websitesetuppro.com/assets/grid-accordion/images/8.jpg" />
    </li>
    <li>
        <img src="http://websitesetuppro.com/assets/grid-accordion/images/9.jpg" />
    </li>
</ul>
</div>

That's it!

Getting Easy FancyBox To Work Properly When WP Supersized Is Active

Scenario:

FancyBox is enabled for ‘Images & Inline content’ at Settings -> Media.

A Page or a Post shows WordPress gallery using this sample shortcode:

[gallery ids="729,728,727,676" link="file"]

WP Supersized is active.

As long as Supersized is not used on this above Page/Post having the gallery of linked thumbnails, clicking on any thumb will bring up the bigger image in FancyBox just fine.

But if Supersized is used on the galleried Page/Post, the following problem comes up:

2013-02-15_16-50-53

RavanH, author of Easy FancyBox wrote:

the conflict seems related to the jquery.animate-enhanced from wp supersized and the jquery.easing used in my plugin.

Searching for jquery.animate-enhanced in wp-content/plugins/wp-supersized/includes/WPSupersized.php shows:

wp_register_script('jquery_animate_enhanced', content_url().'/plugins/wp-supersized/js/jquery.animate-enhanced.min.js',array('jquery'),self::supersized_jquery_animate_enhanced_version);

In order to disable jquery.animate-enhanced, we can use wp_deregister_script() like so:

Add the following at the end of child theme’s functions.php (before closing PHP tag, ?> if any):

add_action('wp_enqueue_scripts', 'add_my_code');

function add_my_code() {
  wp_deregister_script('jquery_animate_enhanced');
}

Now clicking on linked thumbs will work fine as expected.

2013-02-15_17-06-37

Full Screen Background Slideshow In WordPress

WP Supersized allows you to display a resizable full screen background slideshow on pages/posts of your choice.

There are at least 3 plugins that claim to do what WP Supersized does, but none can match its features, versatility and price (it’s free).

I am going to use WP Supersized only on this particular post and not on other pages of this site.

Here is what I have done:

  1. Installed and activated WP Supersized plugin
  2. Went to plugin’s settings page and changed ‘Slide interval’ from the default 3000 to 5000. 3000 feels a little fast.
  3. Display -> Entered the ID of this post in ‘Post ID where Supersized will be used’
  4. Created a directory named ‘supersized-slides’ under wp-content directory and uploaded images.

That’s it. All other settings are at their defaults.

Below are screenshots from the plugin’s settings page: