Here’s the effect we’re going for, as seen in the demo below:

While this isn’t what I would consider a definitive method, it does get the job done, using the :before and :after pseudo-elements and images.

Here’s a demo along with the markup and CSS:

(View on jsFiddle)

Have fun!

The obvious downside to not using a plugin is that the code provided in this tutorial needs to be copied over if you ever change your theme, but it’s still a fairly simple way to achieve the results you need. Note these instructions applies specifically to YouTube and Vimeo embeds.

1. Create the PHP Function

The first step is to open your functions.php file and add the following code:

<?php

if(!function_exists('video_content_filter')) {
	function video_content_filter($content) {
	
        //looks for an iFrame on the page
		$pattern = '/<iframe.*?src=".*?(vimeo|youtu\.?be).*?".*?<\/iframe>/';
		preg_match_all($pattern, $content, $matches);
	
		foreach ($matches[0] as $match) {
			// iFrame found, now we wrap it in a DIV...
			$wrappedframe = '<div class="vid">' . $match . '</div>';
	
			// Swap out the original with our now-encased video
			$content = str_replace($match, $wrappedframe, $content);
		}
	
		return $content;
	
	}
	// Apply it to post or page content areas
	add_filter( 'the_content', 'video_content_filter' );
	
	// Apply it to your sidebar widgets if you like
	add_filter( 'widget_text', 'video_content_filter' );
}

?>

2. Add CSS for Responsiveness

Now that our videos are wrapped in our required <div>, we need to apply some CSS to make it responsive in the viewport. Add the following to your theme’s style.css file:

div.vid {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  margin: 50px 0; /* this is optional */
  clear: both;
}

div.vid iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Now upload your changes in both files to your site’s theme directory (or, if editing in the WordPress theme editor itself, make sure your changes are saved).

Now we’re ready to start adding videos!

Add a Video to Your Page…the Quick ‘n’ Easy Way

Go to a YouTube or Vimeo you want to embed in your post or page.

Copy the URL from the browser (example: http://www.youtube.com/watch?v=UbOSTM3IozY)

In your post/page editor, paste the URL where your want your embed to appear. Note: make sure it is not hyperlinked. If a hyperlink appears after saving your post, remove it.

Save or Publish! Don’t worry if the video appears small in your editor. It’ll look fine on the page when you view it.

Add a Video to Your Page…the Hard Way

Go to a YouTube or Vimeo you want to embed in your post or page.

Right-click in the video player itself and choose ‘Copy embed code’.

Paste the code in your editor, the Text view. Ignore the width and height parameters in the iFrame code. Our CSS will override it.

Save or Publish.

See it in Action

The clip below shows the solution in action. Resize your browser and see the video adapt to the content area of your page. If you’re viewing this on a tablet or smartphone, the video should be fitting nicely already.

Here’s the PHP code that includes three examples of the use of wp_enqueue_script in action, which is added to your functions.php file:

<?php

if(!function_exists('enqueue_all')) {
	function enqueue_all() {
    
    // your theme's stylesheet
	wp_register_style( 'style', get_template_directory_uri() . '/style.css',array(),false,'all');
	wp_enqueue_style( 'style' );
	
	// your common.js file	
	wp_register_script( 'rgallery', get_template_directory_uri() . '/js/responsive-gallery.js',array('jquery'), '1.8.2', true );
    wp_enqueue_script( 'rgallery' );
		
	// your common.js file	
	wp_register_script( 'common', get_template_directory_uri() . '/js/common.js',array('jquery'), false, true );
    wp_enqueue_script( 'common' );
	
	}
}
add_action( 'wp_enqueue_scripts', 'enqueue_all',1 );

?>

Now let’s look at the parameters of the wp_register_script function so we understand how they work using the following as an example:

wp_register_script( 'common', get_template_directory_uri() . '/js/common.js',array('jquery'), false, false );

wp_enqueue_script( 'common' );

$handle – This is the name of the handle for the script to be enqueued. Here we’re using common.

$src – This is the path to the script in your theme directory. The proper we use get_template_directory_uri() . '/js/common.js'.

$deps – These are the dependancies, if any, that your script has. In this case, the file lists the various jQuery functions used on the site so we need to indicate that jQuery is a dependancy. Because jQuery is loaded automatically via the <?php wp_head(); ?> function in your header.php file, we simply use the array('jquery') parameter. If you have no dependancies, array() is the default.

$ver – If your script has a version number, include it here. If you wish to use a version number, you can use something like '1.0.3', or whatever your script’s version number is. Here we aren’t using one, so we use the default false. When you add a value, it’s included in the asset’s path in your browser as follows:

<script src="http://yourdomain.com/wp-content/themes/your-theme/js/script-name.js?ver=1.0.3"></script>

$in_footer – The default is false which means it will load in the <HEAD> section of your page, however in this case we have set it to true because we want the script to load in the footer, which is where you should be placing your .js files whenever possible.

While this article focuses on use of the function for themes, it’s also best practice for your plugins as well.

For more information visit the WordPress codex page.

Configuring Multisite

First thing’s first: backup your WP install! If something goes wrong, then at least you can revert to the backup.

Have you backed everything up? OK, now open up your wp-config.php file.

Copy this line of code:

define('WP_ALLOW_MULTISITE', true);

and scroll down to just above the line that says /* That’s all, stop editing! Happy blogging. */. Paste the code above that comment, as so:

define('WP_DEBUG', false);

define('WP_ALLOW_MULTISITE', true);

/* That's all, stop editing! Happy blogging. */

Save it and upload to your server.

Log back into WordPress and go to Network Setup. You may see some instructions as in the following:

Update your config.php and .htaccess files according to the instructions.

Once that’s done, you can go to Network Settings to enter in the specific settings for Multipress.

Managing Your Sites

Now that your network is up and running, you can manage your sites from your dashboard by clicking Sites.

From there you can add or manage sites. Some things to note:

• When you install a new theme, you need to Network Enable it from your Network Admin dashboard in order for you to activate the theme on any particular site.
• It’s better to activate plugins as you need site by site rather than enabling them across your network, however for certain security and SEO plugins, you may want to activate them across the network.
• As when running any CMS, it’s important to keep your plugins and core install updated as those updates are available.

Enjoy!

1. Enable Post Thumbnails

WordPress allows for featured images for posts and pages out of the box but you have to enable it by opening your theme’s functions.php file and adding the following line of code:

add_theme_support( 'post-thumbnails' );

2. Style Your Images

You can set the size of your thumbnails in the function itself:

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 75, 40, true );//where 70 is the height and 40 the width

…but I don’t like using code to control design whenever possible, so in this case CSS makes more sense. My post thumbnails use the following styling, which I also prefer because it gives me greater control over manipulating my image’s appearance – including media queries – in one file:

.featured img {
  display: inline-block;
  float: right;
  width: 180px;
  height: 180px;
  margin: -10px 0 20px 20px;
  border: 0;
}

3. Call Post Thumbnails in the Loop

We’ve enabled post thumbnails, we’ve added some styling, now we have to set where each featured image is placed in your posts. Open up index.php, single.php, archive.php, and page.php. If your theme doesn’t have an archives.php file, don’t worry about it.

Now we have to place some PHP code inside the loop so we can call our featured image. We’ll take this code:

<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>

…and place it as in this following example from my index.php file. Note here that I’ve used the <figure> element:

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

<article class="snippet">

<figure class="featured"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a></figure>

<h2 class="postTitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

<span class="postDate"><?php the_time('l') ?>, <?php the_time('F') ?> <?php the_time('jS') ?>, <?php the_time('Y') ?> / <a href="<?php comments_link(); ?>"><?php comments_number('No comments', '1 Comment', '% Comments' );?></a></span>

<?php the_content('Read more →'); ?>

</article>

<?php endwhile; ?>
<?php else : ?>

<?php endif; ?>

When you’re done, save your work and upload to your theme directory.

4. Start Posting!

Now when you post a new article or page, you’ll see the Featured Image panel to the bottom-right of your page in your dashboard:

Click the call to action in the panel and you can upload or select an image from your gallery to set as your image.

Happy posting!

There are a few options available to you when using conditional statements. Let’s start with some examples of how you would use them for specific pages and posts. If you’d like to dive in and start working, open up your theme’s header.php file.

First, let’s look at individual uses:

<?php if (is_single()) { ?>
	// your HTML for posts only //
<?php } ?>

<?php if (is_page()) { ?>
	// your HTML for pages only //
<?php } ?>

<?php if (is_page('home')) { ?>
	// your HTML for your home page only, typically your blog's first page of posts or your site's page when that page is named 'Home' //
<?php } ?>

<?php if (is_front_page()) { ?>
	// your HTML for your home page only, when you have assigned a specific page to be your front page under Settings > Reading > Front page displays //
<?php } ?>

<?php if (is_page('about')) { ?>
	// your HTML for your about page only //
<?php } ?>

Or, if you’d like to extend the statement to include content for various content or post types:

<?php if (is_page('home') ) { ?>
	// your HTML for your home page only, typically your blog's first page of posts or your site's page when that page is named 'Home' //
	
<?php } elseif ( is_page('about') ) { ?>
	// your HTML for your about page... //
	
<?php } elseif ( is_page() ) { ?>
	// your HTML for pages only... //

<?php } elseif ( is_single() ) { ?>
	// your HTML for blog posts only... //
	
<?php } elseif ( is_single() ) { ?>
	// your HTML for blog posts only... //

<?php } else { ?>
	// your HTML for every other page //

<?php } ?>

Including Files in Conditional Statements

Suppose you want to show content for a specific page but would rather include a file in your theme (a non-template file, that is) with the content rather than place it in the statement directly:

<?php if (is_page('home')) { ?>
	<?php include('your-include-file.php'); ?>
<?php } ?>

Or, if you want to use an include file for your home page and another include file for another:

<?php if (is_page('home') ) { ?>
	<?php include('your-include-file.php'); ?>
<?php } else { ?>
	<?php include('your-other-include-file.php'); ?>
<?php } ?>

However, WordPress has a function called get_template_part, which is more suitable than the above example and has more flexibility. Your theme development should use this method.

Here’s one way to use the function, where ‘filename’ loads filename.php:

<?php if (is_page('home')) { ?>
	<?php get_template_part('filename'); ?>
<?php } ?>

Note that this method would be the way to go if you wanted to use it in other template files in your theme other than header.php.

We can also use this with the if/else method:

<?php if (is_page('home') ) { ?>
	<?php get_template_part('filename'); ?>
<?php } else { ?>
	<?php get_template_part('otherfilename'); ?>
<?php } ?>

Make sure that the files you’re including are placed in your theme’s root directory.

Have fun!

1. Register Your Widget

First, open up your theme’s functions.php file and add the following code:

// Register the main nav menu
$args = array(
	'name'          => __( 'Nav Menu' ),
	'id'            => 'sidebar-nav-menu',
	'description'   => '',
	'class'         => '',
	'before_widget' => '',
	'after_widget'  => '',
);
register_sidebar( $args );

If your file is empty, remember to add the the tags to the beginning and end of your file:

<?php

//end functions
?>

It should then look like this:

<?php

// Register the main nav menu
$args = array(
	'name'          => __( 'Nav Menu' ),
	'id'            => 'sidebar-nav-menu',
	'description'   => '',
	'class'         => '',
	'before_widget' => '',
	'after_widget'  => '',
);
register_sidebar( $args );

//your other functions here...

//end functions
?>

Save the file and close it.

2. Call Your Widget in Your Theme

Next, open up your header.php file and where you want the menu to display, add the following:

<?php dynamic_sidebar('sidebar-nav-menu'); ?>

Save the template and close it.

3. Create Your Menu

If you don’t already have your menu created, go to Appearance > Menus in your WordPress dashboard.

Create a new menu, let’s call it Nav Menu. Press the Create Menu button.

Add your nav items from the Pages panel to the left, or use the Custom Links panel to manually create your nav items (the former being the easiest if you’re only linking to existing pages on your site).

Save your menu when you’re done.

4. Assign Your Menu

Go to Appearance > Widgets. To the right you should see your menu widget displayed. Open it up.

Drag the Custom Menu widget from the left over to the right and drop it in the menu widget area. Your Local Menu should be defaulted in the dropdown once it appears. If not, choose it from the select menu. Hit the Save button.

View your web site and you should see your new menu widget in action!

Begin by copying and paste the following in your site’s <HEAD> tag:

<!-- Google+ and Facebook -->
<meta property="og:title" content="Your Site Title Goes Here | Your Site Name">
<meta property="og:url" content="http://yoururl.com">
<meta property="og:type" content="website">
<meta property="og:image" content="http://yoururl.com/images/google-fb-card.png">
<meta property="og:description" content="Your site's description here...">
<meta property="og:site_name" content="Your Site Title Goes Here | Your Site Name">

<!-- Twitter card -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="TwitterUsernameHere">
<meta name="twitter:creator" content="twitterUsernameHere">
<meta name="twitter:url" content="http://yoururl.com">
<meta name="twitter:title" content="Your Site Title Goes Here | Your Site Name">
<meta name="twitter:description" content="Your site's description here...">
<meta name="twitter:image" content="http://yoururl.com/images/twitter-card.png">

Now change the placeholder text in each applicable tag.

Note that for the two images referenced, make the Google+/Facebook image at 100×100 pixels and the Twitter one at 120×120 pixels then upload to your server.

Modifying the Social Cards for Your WordPress Site

It’s pretty simple to have the titles, descriptions, and URLs reflect the post or page you’re on in your WordPress site. Follow the same steps above by pasting and modifying the tags in your theme’s header.php file, replacing the TITLE, DESCRIPTION, and URL tags with the following:

<meta property="og:title" content="<?php wp_title(); ?> | <?php bloginfo('name'); ?>">
<meta name="twitter:title" content="<?php wp_title(); ?> | <?php bloginfo('name'); ?>">

<meta property="og:description" content="<?php bloginfo('description'); ?>">
<meta name="twitter:description" content="<?php bloginfo('description'); ?>">

<meta property="og:url" content="<?php the_permalink() ?>">
<meta name="twitter:url" content="<?php the_permalink() ?>">

<meta property="og:title" content="<?php wp_title(); ?> | <?php bloginfo('name'); ?>">
<meta name="twitter:title" content="<?php wp_title(); ?> | <?php bloginfo('name'); ?>">

<meta property="og:description" content="<?php bloginfo('description'); ?>">
<meta name="twitter:description" content="<?php bloginfo('description'); ?>">

<meta property="og:url" content="<?php the_permalink() ?>">
<meta name="twitter:url" content="<?php the_permalink() ?>">

If you’re using post excerpts in WordPress and would like your shared posts to use them instead of a generic site description, replace each DESCRIPTION tag with the following:

<meta property="og:description" content="<?php if ( is_single() ) { the_excerpt(); } else { bloginfo('description'); } ?>">
<meta name="twitter:description" content="<?php if ( is_single() ) { the_excerpt(); } else { bloginfo('description'); } ?>">

Happy sharing!

Method 1: Modifying Your Post Template

If you’re comfortable with PHP, you can modify the /wp-includes/post-template.php file in your WordPress core, which contains the following code, which is on line 1217:

function get_the_password_form() {
	global $post;
	$label = 'pwbox-' . ( empty($post->ID) ? rand() : $post->ID );
	$output = '

	
' . __("This section is for authorized members only. Please enter your password to continue. If you're having trouble, contact us for assistance.") . '
	
' . __("Password:") . '  

	';
	return apply_filters('the_password_form', $output);
}

I don’t recommend this method because you may lose your changes when you update WordPress and there’s the potential here to break something, which could mean either a minor or major headache for you. Bottom line: try never to have to modify your core files if you can help it, especially when there’s a better solution to the problem.

Method 2: Modifying Your Functions.php File

Which takes us to this second option, which is really the best way to go.

First, open up your theme’s functions.php file. If your theme doesn’t have one, create it and store it in the root of your theme’s directory.

Next, paste in the following code:

	
' . __("This is where you can change your text.") . '
	
' . __("Password:") . '  

	';
  return $output;
}

?>

Upload it to your server and then visit your protected page to see the changes.

Removing the ‘Protected’ Title from the Login Page

When you password protect a page in WordPress, it automatically adds ‘Protected’ to the beginning of your page title. Suppose you want to remove that? No problem, paste this code into your functions.php file:

But, of course, our custom functions need to be formatted correctly, so if you’re using both of these tricks, let’s bundle both of them up in our functions.php file:

	
' . __("This is where you can change your text.") . '
	
' . __("Password:") . '  

	';
  return $output;
}

//removed 'Protected' from protected page titles
add_filter('protected_title_format', 'blank');
function blank($title) {
       return '%s';
}

?>

Save, upload, and refresh your protected page. Voila.

1. Have A Portfolio

I don’t maintain a personal portfolio at the moment because I don’t freelance all that often. Projects I work on are owned by the agency I work for and their respective clients, BUT if you’re a freelancer or an agency that has something to show off, do it! When I meet talented web designers and developers who haven’t taken the time to create at least a simple portfolio site (it happens!), my first reaction is to tell them what they’re losing by not openly demonstrating what they can do. Get yourself a domain name, slap together a portfolio site that includes information about you, your offering, samples of your best work, and contact information. This is perhaps far more effective than simply tweeting what you know about what you do and relying on word-of-mouth to acquire new business.

2. Blog, Blog, Then Blog Some More

Blogging has been one of the biggest drivers in my own growth as a professional and I can’t stress enough how useful it can be. My blog is pretty much centered on tutorials, tips, and general advice related to what I do best and I always do what I can to include the efforts of others in my ramblings and recommendations. It’s part of the sharing and learning process. Blogging and offering demos or screenshots of your work can be very effective but other tactics can be just as effective as well, such as including guest bloggers, podcasting, screencasts, contests, giveaways, and challenges to your peers to take your initial concept and bring it to the next level. Documenting a successful case study can also pay off in helping you establish yourself or otherwise make you known to a segment of your target client base that would otherwise not have noticed you.

Here are just a few of the web designer/developer blogs that have achieved success by using blogging in both an educational and collaborative way:

• CSS Tricks
• Codrops
• Freelance Switch
• NetTutsPlus
• Paul Lund
• Smashing Magazine
• Tutorialzine
• WebAppers
• Web Design Ledger
• Web Designer Depot

More can be found on my blogroll.

3. Submit to Design Galleries and Code Repositories

Web professionals submit to galleries and repositories for various reasons. Mostly it’s because we like the feeling of sharing something we’re proud of but often we’re seeking not just potential work but also feedback from our peers that would otherwise not be possible. Sharing your projects, experiments, or concepts to a large audience is valuable for every creative and practical reason. Make use of them.

If you’re looking for some places to start, I suggest this sampling:

• Codepen
• CSS Mania
• Design Newz
• Dribble
• GitHub
• Script & Style

4. Use Social Media

A no-brainer, right? True, one could say that even listing this is almost redundant but it’s important to remember that many or even most of your Twitter followers and Facebook fans & friends are in your industry or otherwise benefit from your expertise. Promote yourself! Post a quick tip, a thought on a creative problem or trend, or a link to your latest project or blog post. This is one of the quickest and most effective ways to be seen and heard. If your social media circles aren’t including colleagues both locally and abroad, make a point of connecting with them and don’t be shy. Show what you can do and what you’ve done!

On the flip side, if someone has taken the time to promote you, whether through sharing your links, or re-tweeting or sharing, then it’s good form to thank them for it. If you’re so successful that you have 1,000 people sharing your links, well, that may be difficult to respond to, but as a rule of thumb it’s good form to show appreciation for those who have helped promote you.

5. Get Involved in Group Projects

Chances are you or one of your peers has this great idea for a new project but can’t do it alone. Why not offer some of your time to help them get it off the ground? Collaborative projects are fun, educational, and can be a great way to get your name out there while offering some proof in the pudding at the same time. One popular activity, especially amongst the startup community, is to find a location, private or public, and as a group create and launch a project from start to finish, whether in an afternoon or weekend. The energy can be inspiring and even serve as an antidote for creative wheel-spinning.

6. Give a Presentation, In Person or Online

Giving talks or workshops in your local area isn’t difficult to set up. You can connect with organizers and submit a presentation outline for consideration, or you can speak with some of your peers about putting together an informal series of presentations and book it on Eventbrite.

Don’t have a venue? Give a talk online. Start a podcast, screencast, or a series of videos of your speaking on various topics related to your expertise and share them through your social networks. Get it out there. Don’t wait to be invited to speak in front of a crowd.

If your schedule and budget allows, attend many of the conferences that run year-round, like Future of Web Design, WebExpo, or An Event Apart. More conferences can be found at Conference Roundup. This gives you the opportunity to network, learn new things, and see how presenters deliver their talks as you hone your own presentation skills.

7. Volunteer Your Time

Giving back to the community is simply the right thing to do but it can also offer some rewards beyond feeling like you’re helping those around you make a difference. I’m not necessarily suggesting providing $10,000 worth of your time for nothing (although that’s generous of you!), but I do encourage you offering what you can. Reach out to your community and you’ll be able to find the right gratis project for you. Maybe someone needs a logo, or perhaps a WordPress of Shopify theme for their blog or online store. Maybe they need some assistance with integrating social media on to their existing site. Only offer what you’re comfortable with in terms of your time and be sure to follow through when you commit to it. Those utilizing your skills are likely in a pinch and almost certainly in a financial crunch and with the trust given to you to make good on your offer, so you’d better deliver. Don’t feel pressure to give more than you can but consider giving something.

What’s Missing?

This is but a sample of options but I’m curious as to what tactics or tools you’ve used to up your exposure game. Leave a comment with your suggestions!