• About
  • Forum
  • Write For Us
  • Contact
  • Top 50 Photography Blogs
  • Resources
  • Archives

IndustryDev

Web Design & Photography Blog

  • Design
    • Lightroom
    • Photoshop
    • Bridge
    • Camera Raw
  • Development
    • HTML
    • CSS
    • JavaScript
    • PHP
    • Dev Tools
    • WordPress
  • Photography
  • Blogging
    • SEO
  • Technology
    • Hosting
  • Inspiration
    • Interviews
    • Learning
You are here: Home / Archives for Development
Have a question? Ask it and help others in our new discussion forums.

Website Development & Coding Tips, Tutorials & Techniques

The development section includes posts and articles that cover tips, tutorials and best practices for various areas of coding and web development. Discussion includes fundamental and moderately advanced topics in the worlds of PHP, JavaScript, CSS, HTML, WordPress and more. Additional topics include development tools as well as coverage of online communities that assist with the development profession.

WordPress Page & Post Templates

April 16, 2015

WordPress Page & Post Templates

In this post, I’m going to cover a few aspects of static page templates, blog post templates, comment templates along with post formats. Setting these types of templates up is actually a lot of fun. There is a fair amount of flexibility when it comes to how far you can drill down with specificity inside WordPress and the WordPress naming convention is as straightforward as it comes.

Static Page Templates

If you remember back to the WordPress template hierarchy, you’ll recall that there’s a certain flow to how static page templates work. In this section, we’re going to go over some scenarios. But first, let’s look at the applicable area in the hierarchy.

WordPress Page Template Heirarchy

In the default setup, the page.php template is what WordPress uses to display static pages. If you take a look at the above image (click to enlarge), you’ll see that template all the way over to the right. That page has the following code in it:

<?php
/**
 * The template for displaying all pages
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages and that
 * other 'pages' on your WordPress site will use a different template.
 *
 * @package WordPress
 * @subpackage Twenty_Fourteen
 * @since Twenty Fourteen 1.0
 */

get_header(); ?>

<div id="main-content" class="main-content">

<?php
	if ( is_front_page() && twentyfourteen_has_featured_posts() ) {
		// Include the featured content template.
		get_template_part( 'featured-content' );
	}
?>
	<div id="primary" class="content-area">
		<div id="content" class="site-content" role="main">

			<?php
				// Start the Loop.
				while ( have_posts() ) : the_post();

					// Include the page content template.
					get_template_part( 'content', 'page' );

					// If comments are open or we have at least one comment, load up the comment template.
					if ( comments_open() || get_comments_number() ) {
						comments_template();
					}
				endwhile;
			?>

		</div><!-- #content -->
	</div><!-- #primary -->
	<?php get_sidebar( 'content' ); ?>
</div><!-- #main-content -->

<?php
get_sidebar();
get_footer();

If you read the comment at the top of the code, you’ll see that this page.php code comes from the Twenty Fourteen theme. If you’d like to see source code like this and from other WordPress files and themes, you can check out this site.

In the broadest sense, when you set up a basic WordPress install and have a broad based theme, the page.php template is what you’ll see for all your static pages. If you want to narrow down and display more specific layouts for various pages on your site, you could do that by creating new pages that are named differently. Of course, you must follow WordPress’ naming convention, but like I said above, that’s easy.

I’m going to use this very website as an example for this post. As of this writing, I have five static pages up in the top navigation bar. They’re called, About, This Website, Resources, Sites I Like and Contact. Right now, I’m using the standard page template that came with the theme I’m using and haven’t altered anything. It works fine for my purposes, but what if I wanted to add some special functioning or layout to the About page that I couldn’t achieve with the standard page.php template? Well, I could solve my problem a few ways.

Creating Static Page Template Files

Page ID Method – The first way I could create a stand alone template for my About page is to go in the admin area and click to edit that page. Once I’m in the editor area, I can look to the URL bar to see what “post” the page has been assigned to. In this case, my About page is under post 591. So, with that knowledge, I can make a copy of my page.php file and name the new file, page-591.php. After I do this, WordPress will begin using the page-591.php template – only for my About page. All other static pages will still use the page.php template. If you refer to the hierarchy image above, you’ll see that the page-591.php template follows the naming convention of the red box directly to the left of the blue page.php box. In the image, it says page-$id.php. Now, if I wanted to, I could change the code in page-591.php any way I wanted to.

Page Slug Method – The second way I could create a stand alone template for my About page is to go back to the edit page area and take a look what the slug of the page is. Since the name of my page is “About”, I kept the slug the same, but lowercase. By the way, if you don’t know what a slug is, read below:

—

A slug is a few words that describe a post or a page. Slugs are usually a URL friendly version of the post title (which has been automatically generated by WordPress), but a slug can be anything you like. Slugs are meant to be used with permalinks as they help describe what the content at the URL is.

Example post permalink: http://wordpress.org/development/2006/06/wordpress-203/

The slug for that post is “wordpress-203”.

Reference

—

Now, if you refer back to the hierarchy image above, you’ll see a red box to the left of the first red box I just talked about. This new red box has page-$slug.php written in it. Everything that I just wrote above applies to this new file that you can create – just the naming of the file is different. If I wanted to go this route instead of the page-591.php route, I would name my file page-about.php. This would create a special template specifically for the About page. Remember, these naming conventions are valid for any static pages, not just my About page.

Custom Template Method – Let’s say that the reason I wanted to create a different About page template was because I wanted to display that particular page at full width. If I was sure that only the About page would ever show at full width, it would be reasonable to make custom About page templates the way I just described above. But, what if I thought I’d be adding more full width pages in the future? Since that’s a fairly generic change, I could simply create a custom full width template and apply any page I wanted to that template. Then, as I make full width pages in the future, I could use that template for all of them. The way to create a custom template in WordPress is to create a new file named pretty much anything you want. In this case, I’ll call this file, page-full-width.php. That will keep things clear as I’m browsing the files during development.

If you’ll notice in the code below, I copied the standard page code over to this new template to be edited later. The important addition to take notice of is the comment at the top. The “Template Name: Full Width” comment will tell WordPress that there’s a new custom template available. As I’m editing or creating a page, I could click the drop-down box to the right of the page editor (Page Attributes) and choose the “Full Width” template. This way, any page that I applied this template to would be using the same code.

<?php

/*
    Template Name: Full Width
*/

get_header(); ?>

<div id="main-content" class="main-content">

<?php
	if ( is_front_page() && twentyfourteen_has_featured_posts() ) {
		// Include the featured content template.
		get_template_part( 'featured-content' );
	}
?>
	<div id="primary" class="content-area">
		<div id="content" class="site-content" role="main">

			<?php
				// Start the Loop.
				while ( have_posts() ) : the_post();

					// Include the page content template.
					get_template_part( 'content', 'page' );

					// If comments are open or we have at least one comment, load up the comment template.
					if ( comments_open() || get_comments_number() ) {
						comments_template();
					}
				endwhile;
			?>

		</div><!-- #content -->
	</div><!-- #primary -->
	<?php get_sidebar( 'content' ); ?>
</div><!-- #main-content -->

<?php
get_sidebar();
get_footer();

What if I had a custom About page template and a custom Full Width template available? What if I chose to use the Full Width template for my About page? Well, the Full Width page template would override the About template because it’s more specific. The rule is, the most specific template is the one that gets used.

If you’re looking for more information on WordPress page templates, here’s a really great tutorial put out by Elegant Themes.

Single Post Templates

If you look back up to the top hierarchy image, you’ll notice that the template used for single blog posts is single.php. I’ll give you an example of the Twenty Fourteen single.php code here:

<?php
/**
 * The Template for displaying all single posts
 *
 * @package WordPress
 * @subpackage Twenty_Fourteen
 * @since Twenty Fourteen 1.0
 */

get_header(); ?>

	<div id="primary" class="content-area">
		<div id="content" class="site-content" role="main">
			<?php
				// Start the Loop.
				while ( have_posts() ) : the_post();

					/*
					 * Include the post format-specific template for the content. If you want to
					 * use this in a child theme, then include a file called called content-___.php
					 * (where ___ is the post format) and that will be used instead.
					 */
					get_template_part( 'content', get_post_format() );

					// Previous/next post navigation.
					twentyfourteen_post_nav();

					// If comments are open or we have at least one comment, load up the comment template.
					if ( comments_open() || get_comments_number() ) {
						comments_template();
					}
				endwhile;
			?>
		</div><!-- #content -->
	</div><!-- #primary -->

<?php
get_sidebar( 'content' );
get_sidebar();
get_footer();

Unfortunately here, we don’t have some of the naming and customization flexibility that we had when dealing with custom page templates in WordPress. We do, however, have more broad customization options. We could, for instance, create custom single post types for specific categories or specific authors. In a later post, I’ll go over how to set these templates up, but for now, just remember that the single.php template controls general single blog posts.

Comment Templates

The layout of the comment section for posts and pages can be found in the comments.php template file. I’ll show you some example Twenty Fourteen code below:

<?php
/**
 * The template for displaying Comments
 *
 * The area of the page that contains comments and the comment form.
 *
 * @package WordPress
 * @subpackage Twenty_Fourteen
 * @since Twenty Fourteen 1.0
 */

/*
 * If the current post is protected by a password and the visitor has not yet
 * entered the password we will return early without loading the comments.
 */
if ( post_password_required() ) {
	return;
}
?>

<div id="comments" class="comments-area">

	<?php if ( have_comments() ) : ?>

	<h2 class="comments-title">
		<?php
			printf( _n( 'One thought on &ldquo;%2$s&rdquo;', '%1$s thoughts on &ldquo;%2$s&rdquo;', get_comments_number(), 'twentyfourteen' ),
				number_format_i18n( get_comments_number() ), get_the_title() );
		?>
	</h2>

	<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : ?>
	<nav id="comment-nav-above" class="navigation comment-navigation" role="navigation">
		<h1 class="screen-reader-text"><?php _e( 'Comment navigation', 'twentyfourteen' ); ?></h1>
		<div class="nav-previous"><?php previous_comments_link( __( '&larr; Older Comments', 'twentyfourteen' ) ); ?></div>
		<div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;', 'twentyfourteen' ) ); ?></div>
	</nav><!-- #comment-nav-above -->
	<?php endif; // Check for comment navigation. ?>

	<ol class="comment-list">
		<?php
			wp_list_comments( array(
				'style'       => 'ol',
				'short_ping'  => true,
				'avatar_size' => 34,
			) );
		?>
	</ol><!-- .comment-list -->

	<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : ?>
	<nav id="comment-nav-below" class="navigation comment-navigation" role="navigation">
		<h1 class="screen-reader-text"><?php _e( 'Comment navigation', 'twentyfourteen' ); ?></h1>
		<div class="nav-previous"><?php previous_comments_link( __( '&larr; Older Comments', 'twentyfourteen' ) ); ?></div>
		<div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;', 'twentyfourteen' ) ); ?></div>
	</nav><!-- #comment-nav-below -->
	<?php endif; // Check for comment navigation. ?>

	<?php if ( ! comments_open() ) : ?>
	<p class="no-comments"><?php _e( 'Comments are closed.', 'twentyfourteen' ); ?></p>
	<?php endif; ?>

	<?php endif; // have_comments() ?>

	<?php comment_form(); ?>

</div><!-- #comments -->

Just so you are aware, this particular code displays one comment form for for when someone is logged in, another comment form for when someone ins’t logged in and the comments themselves. If you’d like to customize any portions of these areas, you would do so in this file. In general, the comment area isn’t something people mess too much with, but if you do decide to, you can start off with one of WordPress’ generic templates and customize that code. As I mentioned earlier in this post, you can find code for multiple WordPress themes here.

Post Formats

Ill admit, it took me a while to figure out what WordPress post formats were. For years, I’d see the radio buttons to the right of my post editor that say, “Aside” and “Gallery” and “Link.” I’d ask myself, “Who wants to post a link?” Really, who wants to post a link? As a post?

But after some research today, I think I’ve got the whole idea squared away. Post formats give you an opportunity to display your site differently than a traditional WordPress site would display.

Say you’d like to setup your homepage to look like a Twitter page. If you choose the “Aside” post format, you could write some short text and then that message would display on your homepage. The thing is, what you just posted won’t have a link to the full post. There is no full post – it’s just that short message that displays. That’s what I think I was having trouble with. Grasping the fact that WordPress is actually responding to the Twitter and Tumblr competition out there.

The same goes for the “Gallery” format and the “Link” format and the “Status” format. These types of posts don’t actually link through to anything (well, the gallery links to pictures). They simply display kind of on-the-fly type messages. Much like many social networks do out there.

So, what is the list of available post formats? Here they are:

Aside – No title. Sort of like a Facebook update.

Gallery – Image gallery. Shortcode with image attachments.

Link – Outside link. There are a few different ways to set this up in the post editor.

Image – A single image.

Quote – A quotation.

Status – Looks like a Twitter status update.

Video – Single video or playlist.

Audio – Audio file or playlist.

Chat – Chat transcript.

Unlike the template files in the hierarchy I talked about above, post formats have their own set of files. If you look in a standard WordPress theme, such as Twenty Fourteen, you’ll see files named, content-aside.php, content-audio.php, content-link.php, etc… Each of these files is named after each post format. If you click into each of these files, you’ll see the code it uses to run that particular format.

If you take a look inside the Twenty Fourteen single.php template, you’ll see a line of code that looks like this:

get_template_part( 'content', get_post_format() );

This is the code that calls whichever post format you chose to run. The way WordPress chooses the correct template to run is built into this line of code. The ‘content’ part of the above code tells WordPress that the file it’s looking for is partially named, content. The get_post_format() part of the above code tells WordPress which post format you’ve chosen. So if it’s the aside format you want, the file name WordPress would use is content-aside.php. Again, this isn’t in the WordPress hierarchy, but it’s a WordPress naming convention nonetheless.

WordPress doesn’t always make all post formats automatically available. The post formats that you’d like to see in your editor will depend on which ones are coded into the functions.php file. In the Twenty Fourteen theme, here is the line that defines which formats would be available:

add_theme_support( 'post-formats', array(
	'aside', 'image', 'video', 'audio', 'quote', 'link', 'gallery',
) );

A few aren’t in this list, but if you were building your own theme or wanted to include the missing ones, you’d have to code those into this line.

Once you take a few minutes to go over what exactly post formats are and how they can be used, things become much more clear. In the case it doesn’t, I’ve listed a few resources that will help out tremendously. These are actually the references that taught me what’s going on with post formats.

– Post Formats at the WordPress Codex

– What is Post Format in WordPress? How to use Post Formats

– How To Create WordPress Post Formats by Elegant Themes

– Post Formats Inside and Out by Tuts+ Code Article

– Twenty Eleven Post Formats – What Are They and Why Should I Care?

Filed Under: Development Tagged With: WordPress


Starting With CSS Basics

April 15, 2015

Starting With CSS Basics

What is CSS?

CSS is an acronym. It stands for Cascading Style Sheets. I know that doesn’t do that much for you so I figure I’ll give you a more useful definition. Very simply speaking, CSS can be thought of as the style side of a web page. It’s the language designers and developers use to make the page background blue, or the font size 16px, or the line height 175%. It’s a language that cascades down upon itself, meaning, if I write one style for an element near the top of a style sheet and then redefine it down towards the bottom, the bottom style will override the top.

Style sheets allow you to set web page margins and position elements. They create the “responsive” in responsive web design. They are the power behind flipping through WordPress themes as fast as you can download them. Style sheets are powerful and fun and CSS is what everyone wants to learn. It’s offers some of the biggest bang for the buck and the wow factor that makes the amateur ask, “Did I do that?”

What’s the Difference Between HTML and CSS?

I’ve read and heard this a million times, but if you’re here to learn about what things are, I think it’s worth repeating. If you consider HTML as your skeleton or the structure of a building, you can think of CSS as your skin and hair or the shell of that building. HTML is a markup language – one that defines what things are and what they mean, while CSS is what gives that structure presentation. CSS formats structure.

For example, if you wanted to put a headline on your webpage, you’d most likely tell the page that it was a headline by using an HTML header tag. If you did that and stopped there, you would have a somewhat plain looking page that was functionally correct. You explained to the browser and humans and search engines that what you put on the page was a header. But what if you were the type of person who wanted that header to look nice? What if you wanted to make it red and really big and have a margin that would space it apart from all other text? If you used CSS to accomplish this, not only would you have a well structured document, you’d also have a well presented one. Now, imagine adding CSS to all your structured elements, such as paragraghs, images and so forth. By using CSS to define your page layout, you could really let your imagination fly.

If you’d like to learn more about the basics of CSS, I suggest you read this post by SitePoint. And if you want to check out a really cool tutorial that will help you get started with CSS, take a look at this set of pages by MDN (Mozilla Developer Network).

What if You Have No Style Sheet?

Did you know that even if you don’t use a style sheet to take advantage of your own look and feel, your web page will still have styles applied to it? That’s right – every browser uses internal styles that they’ve built in. The problem is, not all styles are created equally. Internet Explorer may treat the H1 element differently than Chrome does and Firefox may treat the UL element differently than Opera does. To deal with this, many developers “reset” default browser styles with a separate style sheet that overrides all styles and sets them to zero. Others “normalize” their styles with a normalize file. This file simply created continuity among browsers. The most popular of these types of files can be found here. This file is maintained by Nicolas Gallagher and is widely used across the web.

If you’d like more information on default browser styles, I suggest you take a peek at the resources I’ve listed below.

– Default Browser Styles by Dev-HQ

– What Is A CSS Reset? by CSS Reset

And if you’d like to take a look at some of those default browser styles themselves, browse this post:

– User Agent Style Sheets: Basics and Samples by Jens Meiert

Now, what’s the reason a developer might want to take advantage of normalizing or resetting browser default styles? Well, the reason is because as CSS files are created and grow, styles held within them may affect default styles differently. Sometimes small differences across browsers may occur, but sometimes specific areas may not work as intended at all. It’s because of these unknowns and odd behaviors that developers have chosen to create a baseline.

The Syntax of CSS

I think it’s high time to stop talking about CSS and start seeing what CSS looks like. I’m going to offer up some short code below:

h1 {font-family: Arial, Helvetica, sans-serif;
    font-size: 3em;
    color: red;
    }

In the above example, we have two important areas to look at. The first area is what’s called, the selector. Selectors in CSS target which elements on the page to format and style. In the case above, the selector is the h1 element and in this case, headers that are on a page that uses this specific style sheet would take on the appearance that is specified in the next part of the above code, which is called the declaration. The declaration gives the formatting instructions to the selector.

To learn about the various types of selectors and the rules that apply to them, take a look at these pages:

– CSS Selectors Reference by W3Schools

– The 30 CSS Selectors you Must Memorize by Tuts+ Code Tutorial

– Selectors – Web developer guide by MDN

To continue on with the example I gave above, I’m going to talk about the declaration. In this area of the code, you can see three rules. The first rule instructs which font to display by using the Ariel, Helvetica, sans-serif value for the font-family property. In the second rule, the font-size property was given the value of 3em and in the third rule, the color property was given the red value. So to summarize, each rule in CSS has a property and a value.

Selector Types

There are a few major types of selectors that really should be covered. These selectors will handle the majority of your code, so it’s wise to understand them. I’m going to break them up into sections to make things as clear as possible.

Element Selectors

The element selector selects all elements with the specified element name. It’s a broad type selector that can cover a good portion of your entire site. I’ll give you an example of the element selector syntax below and then some examples of element selector in action.

element {
    declarations;
}

If you take a look at the long list of HTML elements, you can easily see why these types of selectors are so powerful. Say you want to style your paragraphs across your entire site to look a certain way. All you would need is some code that looks like this in your CSS file:

p {
    color: red;
    line-height: 150%;
}

It’s that simple. If you wanted more style, you would add more declarations. Be careful though because, like I said above, element selectors go a long way. When naming an element selector, all you need to do is use the tag name without the greater than / less than symbols. If you notice above, I use just the p as the selector. The same is true for h1, ul, li, etc…

Now, just to make things super clear, I’ll give you a quick example of a paragraph in an HTML file so you can see the p element.

&amp;amp;lt;p&amp;amp;gt;This is a sentence.&amp;amp;lt;/p&amp;amp;gt;

You can see that the p selector in the CSS code in the first example is selecting the p from the paragraph element in the second example.

Class Selectors

If you’d like to narrow down somewhat and not touch every single element of a certain type across your entire website, you can create class selectors. Here is what class selectors look like:

.class {
    declarations;
}

The way class selectors work is like this – say you know you’re going to have an introduction paragraph and a secondary introduction paragraph on every page of your website and you know you want these particular paragraphs to look a certain way. In this case, you could apply a class to that particular type of paragraph. In HTML, the element and class would look like this:

&amp;amp;lt;p class=&amp;amp;quot;introduction&amp;amp;quot;&amp;amp;gt;First introduction paragraph.&amp;amp;lt;/p&amp;amp;gt;

&amp;amp;lt;p class=&amp;amp;quot;introduction&amp;amp;quot;&amp;amp;gt;Second introduction paragraph.&amp;amp;lt;/p&amp;amp;gt;

Now, you can select that class in your CSS file, no matter how many times it’s used on a page and no matter how many pages it’s used on your site. In your file, it may look like this:

.introduction { 
    color: blue;
}

This would give all classes with the name introduction on your pages the text color of blue.

Here’s something interesting. Say you wanted to use that introduction class on other sections of your pages besides just the intro paragraphs, such as asides or navigation, but wanted to select just the paragraphs for some special styling. If this was the case, you can write code like this to limit those particular styles:

p.introduction { 
    color: blue;
}

Notice how I placed the p in front of the .introduction. That limits the styling to the p elements with the introduction class. Lastly, when writing a class selector, you start the class name with a period.

ID Selectors

ID selectors display a hash, or an # in front of their names when used in a CSS file. ID selectors look like this:

#id {
    declarations;
}

While you can have multiple classes on a page, you can only have one ID. IDs are meant for something specific, such as a top content area or something like that. Here is what an ID in HTML may look like:

&amp;amp;lt;div id=&amp;amp;quot;top&amp;amp;quot;&amp;amp;gt;

Top content code goes here.

&amp;amp;lt;/div&amp;amp;gt;

And this is what the ID selector in your CSS file might look like:

#top {
    background-color: grey;
    padding-top: 50px;
}

If we put the classes and IDs together into a working HTML file and then selected them in our CSS file, we might have something that looks like this:

HTML

&amp;amp;lt;div id=&amp;amp;quot;top&amp;amp;quot;&amp;amp;gt;

&amp;amp;lt;h1&amp;amp;gt;Our Page Top Content&amp;amp;lt;/h1&amp;amp;gt;

&amp;amp;lt;p class=&amp;amp;quot;introduction&amp;amp;quot;&amp;amp;gt;First introduction paragraph.&amp;amp;lt;/p&amp;amp;gt;

&amp;amp;lt;p class=&amp;amp;quot;introduction&amp;amp;quot;&amp;amp;gt;Second introduction paragraph.&amp;amp;lt;/p&amp;amp;gt;

&amp;amp;lt;/div&amp;amp;gt;

CSS

#top {
    background-color: grey;
    padding-top: 50px
}

.introduction { 
    color: blue;
}

Descendant Selectors

Descendant selectors target all elements that are descendants of, or within a, specified element. This is fairly simple. Let’s take a look at some HTML code:

&amp;amp;lt;h1&amp;amp;gt;Our Page Content&amp;amp;lt;/h1&amp;amp;gt;

&amp;amp;lt;div&amp;amp;gt;

&amp;amp;lt;p&amp;amp;gt;First introduction paragraph.&amp;amp;lt;/p&amp;amp;gt;

&amp;amp;lt;p&amp;amp;gt;Second introduction paragraph.&amp;amp;lt;/p&amp;amp;gt;

&amp;amp;lt;/div&amp;amp;gt;

&amp;amp;lt;p&amp;amp;gt;Third paragraph.&amp;amp;lt;/p&amp;amp;gt;

Say we wanted to select only the p elements that are contained inside the div element for some special styling. We don’t want to alter the third paragraph in any way. In order to do this, we could write some CSS code that looks like this:

ancestor-element descendant-element {
    declarations;
}

Or more specifically:

div p {
    color: blue;
}

The above CSS code would only target the first two paragraphs – the descendant elements – contained within the div element – the ancestor element. It would not affect the third paragraph.

In between the two selectors, we use something called a combinator, or “something that explains the relationship between selectors.” In this case, the combinator is a space, because we’re dealing with a descendant selector.

Grouping Selectors

Let’s say that, for some reason, you wanted to add a left margin of 10 pixels to all elements in our example code. So to refresh your memory of what that code is, I’ll show you again:

&amp;amp;lt;h1&amp;amp;gt;Our Page Content&amp;amp;lt;/h1&amp;amp;gt;

&amp;amp;lt;div&amp;amp;gt;

&amp;amp;lt;p&amp;amp;gt;First introduction paragraph.&amp;amp;lt;/p&amp;amp;gt;

&amp;amp;lt;p&amp;amp;gt;Second introduction paragraph.&amp;amp;lt;/p&amp;amp;gt;

&amp;amp;lt;/div&amp;amp;gt;

&amp;amp;lt;p&amp;amp;gt;Third paragraph.&amp;amp;lt;/p&amp;amp;gt;

Instead of writing three duplicate declarations like this:

h1 {
    margin-left: 10px;
}

div {
    margin-left: 10px;
}

p {
    margin-left: 10px;
}

We could group our selectors together using a comma as a separator, like this:

h1, div, p {
    margin-left: 10px;
}

Now, our code is DRY (Don’t Repeat Yourself) and our code is lean, but still has the same effect.

HTML & CSS Best Practices

The final area I’d like to discuss in this post has to do with the best practices you should follow when coding your HTML and CSS. While many styles of coding may “get the job done,” a well thought out and foresighted approach will be well worth your efforts.

While much of what James Williamson discussed in the class I’m taking currently (CSS Fundamentals) had to do with how to best use classes and IDs in HTML and selectors in CSS, I’d like to go a bit further. Instead of only discussing the areas where HTML and CSS intersect, I figure a more broad overview of coding HTML and CSS would be helpful. I did some poking around online and came across a few referral pages that I think would help if looking into this area. They are:

– 30 HTML Best Practices for Beginners by Tuts+ Code Tutorial

– Writing Your Best Code by Learn to Code HTML & CSS

– Front-end Code Standards & Best Practices

– 20 HTML Best Practices You Should Follow by Six Revisions

– HTML5 (and Some CSS) Best Practice by CodeProject

I hope those references help. There’s a lot to learn when it comes to coding and getting on the best practices bandwagon early on is the way to go.

—–

That’s it for this post. I think I covered some good areas. If you’re interested, keep your eye on the CSS category here because I’m going to continue my discussions on CSS and beyond. Up next, something about WordPress page templates.

Filed Under: Development Tagged With: CSS


HTML5 Semantics

April 13, 2015

HTML5 Semantics

In this post, I’m going to talk about HTML5 and semantics. I’ll cover a description of what the study of semantics is and why it’s important. I’ll also touch on meaning itself and how it can make our web pages and sites make a heck of a lot more sense.

Now, while my intro to this post sounds very formal, really, I think I’m simply going to attempt to scratch the tipity top of the surface of what’s new in HTML5 as compared to regular old HTML – or HTML4. You know, the HTML we’ve all been coding with since – a long time ago. The buzz these days is all about HTML5 and semantics and making your pages mean something. Your pages need to express themselves semantically so they are easily understood. The question I have is – to who? Who cares if I use a div tag instead of an aside tag or a – well, another div tag instead of a nav tag? In this and my following posts, I’m going to try to get to the bottom of it.

What are Semantics?

When we talk about semantics, we’re talking about the study of the meaning of things. Linguistic semantics is the study of how we best deal with trying to convey, accurately, how we feel, what we mean, why something matters – everything. If we’re attempting to describe one of the many thoughts that are bouncing around in our heads daily to someone, we’re subconsciously using the results of the study of semantics to get our points across.

In HTML, semantics means much the same thing. It’s just more rudimentary. We’re still in the early days of attempting to accurately convey our thoughts via code. In the yesteryear of HTML, we didn’t necessarily, for example, have a great way to differentiate between paragraphs. Sure, we could assign some ids to them to offer some styling, but as far as telling machines and humans what we’re trying to tell them – let’s just say, it’s been a long road.

Since the onset of HTML5 in October 2014, we developers have been handed a few more tools to help make our web pages mean something. Now, we can offer those who care, bits of code that tells them what something is, with more definition. Whether it be a quote from another website, an emphasized piece of text or an area of a page that spans across all pages. No longer are we relegated to using only two categories of elements, inline and block, for everything. Now, we can spice things up – and possibly be rewarded for it. Ah, more categories with their very own content models.

Semantics & HTML

Everything we use in HTML, we use for a reason. The creators of the markup didn’t just slap a bunch of elements together and tell us to start typing them willy nilly. They created these things in an effort to help us make sense of our code and to allow our HTML to connect to and work with other languages, such as JavaScript and CSS. While I don’t plan on getting into too many specifics in this post, I will tell you that the evolution of HTML has seen much more of an integrated approach, as opposed to a stand alone one. And that idea matters. These days, when writing HTML, you need to keep an eye on how the element you’re typing into your text editor will be used down the road.

I’m going to offer a few references here to cover some ideas regarding HTML5 and semantics. The authors of these articles have done a really great job at explaining what things are and where they’re headed.

– HTML5 Semantics by Smashing Magazine

– What Does it All Mean by Dive into HTML5

– Let’s Talk about Semantics by HTML5 Doctor

HTML5 Content Models

I’m taking the “HTML5: Structure, Syntax, and Semantics” class with James Williamson on Lynda.com right now and he’s starting to talk about content models in HTML. Now, I’ll be the first to tell you that during all those years I used to make websites, I never gave such things much thought. I mean, I knew what the header area looked like and I knew what body tags and p tags were meant to do, but I didn’t quite give consideration to what was supposed to be where and why. Well, apparently there is a rhyme to the reason and there is a structure to follow. And even if you already know what to use on a day to day basis, understanding the new content models can assist you in making decisions of what’s best to go where and when.

First off, if you’d like to read the official documentation on HTML5 content models from the W3C, you can do that here. I’ll warn you though that while that page is a great reference and one you should definitely bookmark, a few folks out there in interland have picked its pieces apart and made them more easily understandable. Below are a some of those references:

– Content Models in HTML by Divya Manian

– Understanding HTML5 Content Models by Vanseo Design

– HTML Content Models by Schools of Web

I guess the best way to explain content models in HTML is to compare them to those weird Russian dolls that grandma used to have. You know the ones – there’s one sitting on a table somewhere and after you pick it up to play around with it, you realize that it splits in half and then in half again. Basically, there’s a big one and that big one encloses a smaller one and that encloses a smaller one and so on. It’s the same thing with HTML content models. Some big elements have smaller elements that reside inside them. Some elements don’t enclose any other elements though and it’s those types of things you have to concern yourself with.

I’ll take a small snippet of information from this site to demonstrate how content models are situated in HTML5.

Each element in HTML falls into zero or more categories that group elements with similar characteristics together. The following broad categories are used in this specification:

– Metadata content
– Flow content
– Sectioning content
– Heading content
– Phrasing content
– Embedded content
– Interactive content

If you click through from the link above to the website, you’ll see an interactive image that you can roll over. As you roll over each category, certain elements will display – elements that work together in such a way as to give the page you’re working on meaning. It sort of looks just like this one:

HTML Element Categories

In the next few posts, I’ll go over some specifics on document structure, grouping content and other ways to truly give meaning to your web pages and site as a whole. Stick around and check my HTML category for those updates.

Filed Under: Development Tagged With: HTML


JavaScript Types & Objects

April 12, 2015

JavaScript Types & Objects

Boy, I feel like I just wrote about types and objects. Oh wait, that’s because I did. That post is right over here, if you’re interested in reading the PHP version. If you’re more interested in JavaScript, you’re in the right place.

Arrays

In order to learn about arrays, it might be wise to first get familiar with JavaScript variables, as they are very similar in their construction. While variables hold one value, arrays are able to hold multiple values. This is part of the reason arrays are so powerful when programming in JavaScript.

To get the ball rolling here, I’ll give you an example of a variable:

var sampleVariable;
sampleVariable = 100;

or

var sampleVariable = 100;

Now, I’ll give you an example of an array:

var sampleArray = [];

Notice the square brackets in the array example. That’s what tells you that you’ve got an array. It’s called an “Array Literal.”

If you want your array to hold values, you need to tell it what you want. In order to do that, you would specify the key and then the value right after that.

var sampleArray[0] = &quot;car&quot;;

You can also add additional values by specifying one for each key that follows:

var sampleArray[0] = &quot;car&quot;;
var sampleArray[1] = &quot;bus&quot;;
var sampleArray[2] = &quot;train&quot;;

It’s important to remember, it’s up to you which data type you’d like to use in your arrays. I chose to include strings, but feel free to use integers, booleans, etc… Also remember that arrays use a zero based index, so your first value will have a key of 0.

If you want to display the output of a particular value in an array, you would write code that looks like this:

console.log(sampleArray[1]);

And your output would be this:

bus

Arrays in Shorthand

In the examples I gave above, the method the arrays were written in was longhand. There is a shorthand method to write these in and that would look like this:

var sampleArray = [&quot;car&quot;, &quot;bus&quot;, &quot;train&quot;];

If you’ll notice, we only had to name the array once, which saves time in typing. Also, the values in the array are separated by commas and the key for each value is implied. JavaScript will assign each value to a key position that starts at zero.

If you would like to take advantage of the multiple ways you can write arrays, take a look at these other (equivalent) variations:

var sampleArray = new Array(&quot;car&quot;, &quot;bus&quot;, &quot;train&quot;);

var sampleArray = Array(&quot;car&quot;, &quot;bus&quot;, &quot;train&quot;);

If you’re curious about the length of your array, or more simply put, the number of keys your array has, you can use the JavaScript length property.

var sampleArray = [&quot;car&quot;, &quot;bus&quot;, &quot;train&quot;];
console.log(sampleArray.length);

For the example above, the output would be:

3

That’s the number of values in the array.

Array Methods

You can use array methods to manipulate your arrays.

If we use the same example from above, and attach a built in array method to it, the output will be different.

var sampleArray = [&quot;car&quot;, &quot;bus&quot;, &quot;train&quot;];
var reverseSampleArray = sampleArray.reverse();
console.log( reverseSampleArray.join() );

In the first line of the example above, I created an array named “sampleArray.” I gave it three values. Then, in the second line, I created another array. This time, I named it “reverseSampleArray” and gave it the value of my first array, but in reverse. The “reverse” method that’s built into JavaScript. All this does is output the reverse of what’s in your initial array.

Lastly, I output the values of the reverseSampleArray as one string. I did this by using the JavaScript “join” method. The join method joins all values of an array into a single value. The output of all this would be:

train,bus,car

Numbers

If you look back to my post on Data Types in PHP, you’ll see that PHP recognizes multiple types of numbers. One type is the integer and another type is the float, or floating type number. Those two types are differentiated in PHP, but they aren’t in Javascript. In JavaScript, a number is a number, no matter if there is a decimal place in it or not.

When dealing with numbers in JavaScript, there are a few somewhat confusing areas you need to be aware of. I’ll go over them below.

Let’s say you have two variables. Both variable values are numbers. In your code block, you want to add both of these numbers together. Easy enough.

var firstNumber = 25;
var secondNumber = 35;
console.log(firstNumber + secondNumber);

The output would be:

60

Now, lets change those number values to string values by adding quotes around them.

var firstNumber = &quot;25&quot;;
var secondNumber = &quot;35&quot;;
console.log(firstNumber + secondNumber);

In this case, since JavaScript can’t add the two strings as numbers anymore, it adds them as if they were just elements. It concatenates them. It simply puts them together and the output would be:

2535

Just as if it combines two strings, which it does. This is fine for some numbers that should be taken and placed together literally, but not when it comes to addition.

NaN

Now, if you try to use another type of operator in JavaScript – one that can’t add or concatenate, your result would look different.

var firstNumber = &quot;25&quot;;
var secondNumber = &quot;35&quot;;
console.log(firstNumber * secondNumber);

In the case above, we are attempting to multiply the two strings. In doing this, we would get the following result:

NaN

That stands for Not-a-Number. If you were truly interested in having the values of the variables above actual numbers, you could turn them into them by using the Number() function in JavaScript. Let’s play around with the example from above again.

var firstNumber = &quot;25&quot;;
var secondNumber = &quot;35&quot;;
var makeFirstNumber = Number(firstNumber);
var makeSecondNumber = Number(secondNumber);
console.log(makeFirstNumber * makeSecondNumber);

By using the Number() function that’s built into JavaScript, we can make real numbers from numbers that are treated as strings. In the case above, the output would be:

875

If there really is a string of letters or some other characters that can’t be converted into numbers, you’ll end up with NaN again.

Even after you attempt to turn your string number into a real number, there is a way to test whether or not you’ve really got a number. This is helpful in many cases, such as web form submissions. To test your variable, you can use the isNaN() function.

if (isNaN(makeFirstNumber) {
    console.log(&quot;Sorry. You do not have a number.&quot;);
}

In the above example function, I’m using the isNaN() function to test whether or not the makeFirstNumber variable is a number or not. If it isn’t, then we’ll get a response that says, “Sorry. You do not have a number.” If it is a number, nothing will happen. We can also write the function above to include an else statement to get a response if it is a number.

if (isNaN(makeFirstNumber) {
    console.log(&quot;Sorry. You do not have a number.&quot;);
} else {
    console.log(&quot;Great! You do have a number.&quot;);
}

Now, if it really is a number, we’ll receive the output, “Great! You do have a number.”

Math Object

In JavaScript, you can use the Math Object to manipulate numbers. Here are a few examples with outputs below.

var myNumber = 25.1;
var roundNumber = Math.round(myNumber);

The output would be rounded up and is 26.

Math.min(3, 200, 50, 70, -100);

This one would return the smallest number, or -100.

Math.max(3, 200, 50, 70, -100);

This one would return the largest number, or 200.

You can view more like this here.

Strings

In JavaScript, strings are sequences of text.

Quotes

Strings are enclosed in quotes and those quotes are either single or double. You can’t mix the two. Here’s an example of a string in quotes:

var myName = &quot;Jay&quot;;
var myName = 'Jay';

Strings can’t look like this:

var myName = &quot;Jay';

Notice the double and single quote surrounding the value.

Escaping Characters

If you have a special case where you run into an issue because you need to enclose quotes inside your string, you can escape those characters like this:

var myName = &quot;My name is Jay and I've always said, \&quot;I don't care what you think.\&quot;&quot;;

By escaping the double quotes above, I indicated that I don’t want the quotes inside my string to be misinterpreted as actually closing the string. If I had used single quotes to surround my string, I could have left the double quotes unescaped and just escaped the single quotes like this:

var myName = 'My name is Jay and I\'ve always said, &quot;I don\'t care what you think.&quot;';

It’s the same exact thing. I just reversed the quotes.

Properties & Methods

Since strings are objects and can be treated as arrays of characters, properties and methods are available to them. To take a look at these, please check out this page. There are quite a few listed. I’ll give you a few examples below:

var myName = &quot;My name is Jay.&quot;;
console.log(myName.length);

The output to the console would be:

15

An example of a method would be something like this:

var myName = &quot;My name is Jay.&quot;;
console.log( myName.toUpperCase() );

The output here would be:

MY NAME IS JAY.

String Comparison

When comparing two strings with the same text in them, the case matters. For example, if you had these two strings:

var myName1 = &quot;My name is Jay.&quot;;
var myName2 = &quot;my name is jay.&quot;;

They would not be considered equal because the “M” and the “J” are of two different cases. If you wanted to make both strings equal, you would need to use either the toLowerCase() method or the toUpperCase() method to equalize them. To learn a bit more about comparing strings, check out this page.

Dates

When working with dates in JavaScript, you have a few options. You can set the Date() function to years, months, days, hours, minutes, seconds and milliseconds. I’ll give you a few examples below:

var now = new Date();

The above example will output the current date and time.

If you’d like, you can pass in your own date. That would look like this:

var newDate = new Date(2000,0,1);

This will output the first day of the first month of the year 2000. Notice how the month is zero based, but the day is not.

JavaScript Date Methods

Date methods are used when you would like to get only a certain section of the date. Here are some examples of that:

var now = new Date();
now.getMonth();

This would return a digit for the current month.

var now = new Date();
now.getFullYear();

This would return the digits for the full year, such as 2015.

For more information on the methods used for dates, please take a look at this page.

Similar to the get methods used for the date() function, we also have set methods available to us. If you’d like to see some of them, simply click the link above and scroll down on the page a bit. The set methods are there for you to see.

Here are a few examples for you:

var now = new Date();
now.setFullYear(2015);

This will set the full year for you.

var now = new Date();
now.setDate(5);

This will set the day of the month in integers between 1 and 31.

Objects

In almost every class I’ve ever taken on JavaScript, objects in programming have been described as very similar to objects in the physical world. Both types of objects have properties and characteristics. Now, I know that doesn’t help much because we need to see what an object in programming looks like. Describing it as a car isn’t going to cut it.

In this post, we’ve already gone over objects. Arrays are objects and so are dates. You can apply methods to both of them. Think of objects as variables that can contain many values. Here’s an example of an object in JavaScript:

var bicycle = {type:&quot;BMX&quot;, model:&quot;Mongoose&quot;, color:&quot;White&quot;};

In the example above, all I did was create an object that has three properties, or name value pairs. I enclosed them in curly braces, which indicates the object itself. I separated the name value pairs by commas and enclosed the strings in quotes. The example I gave above is written in shorthand. If you’d like to learn more about creating objects written in longhand, take a look at this page.

If we’d like to output a specific piece of data from the above object, we could do that:

console.log(bicycle.type);

The output would be BMX.

I’m not going to go further into objects right now because I plan on writing posts exclusively covering them. They are quite involved – the way you can create methods for them and associate them with functions. If you’re interested in those future posts, check out the JavaScript category up above.

—–

That’s it for now. Like I said, there’s a lot to JavaScript and this barely scratched the surface. I’ll be going into much more depth in future posts. Up next, more WordPress template files.

Filed Under: Development Tagged With: JavaScript


PHP Data Types

April 10, 2015

PHP Data Types

Do you remember back when I talked about variables in PHP? If not, you really should check out my post as I covered a lot of ground. If you don’t have the time, I’ll give you a very quick refresher here.

Variables are containers to store data. It’s like you carve out spaces in your computer’s or server’s memory for your variables to reside. When you’re ready, you can add data to those variables, basically filling the containers. It’s the data, and what those types of data are, that we’re going to talk about in this post. But really, check out my PHP post to get some background. You can even browse the “Variables” section of my latest JavaScript post as I go over very similar information in that post as well.

Data Types

There are multiple data types in PHP that offer ways for variables to store data. I’ll list them here:

– Strings (strings of characters)
– Integers (whole numbers)
– Floats (fractional numbers)
– Booleans (true or false objects)
– Arrays (stores multiple data types)
– Objects (the root of object-oriented programming – complex variables)
– NULL (represents a variable with no value)
– Resources (not PHP data – reference to functions / resources external to PHP)

To read about PHP data types right from the source, you can check out the page in the PHP Resource.

Now that I’ve shown the PHP data types, let’s go over some of these in more detail.

Integers

Integers are simply whole numbers. They can be positive or negative, but can’t contain decimal points. An integer must contain at least one digit and include no spaces or commas. Integers can be specified as decimal, hexadecimal, or octal.

I’m going to show you a working example of integers in PHP.

<?php
$one = 1; 
$two = 2;
$three = 3;

echo $one;
echo $two;
echo $three;
?>

On a web page, the output of these three “echos” would be:

1
2
3

That’s pretty simple.

There is a confusing area surrounding integers in PHP, though, and this area is when you enclose your integers in quotes. So, if we use the same example from above, but surround the last variable in quotes, we should see this:

<?php
$one = 1; 
$two = 2;
$three = "3";

echo $one;
echo $two;
echo $three;
?>

The output would be this:

1
2
3

It’s the same output, but really, it isn’t.

If we use PHP’s built in gettype() function, we’ll see that the data types in the above example are actually different.

<?php
$one = 1; 
$two = 2;
$three = "3";

echo gettype($one);
echo gettype($two);
echo gettype($three);
?>

The output for this example would be:

integer
integer
string

The built in PHP function of gettype() doesn’t display what’s held in the actual variable – it displays the type of data held in the variable. It gets the type of a variable.

What if you wanted to complete a calculation by using variables? You can do that. Take a look at this next example:

<?php
$one = 1; 
$two = 2;
$three = 3;

echo $one;
echo $two;
echo $three + $two;
?>

The output of this example would be:

1
2
5

As you can see, the last echo displayed the $three variable and the $two variable being added to each other. To do this, we used one of PHP’s arithmetic operators. More specifically, it was the addition operator.

Floats

In PHP, floats are considered to be floating point numbers. They have other names, such as doubles or real numbers and can be specified with the following syntax:

<?php
$first = 6.674; 
$second = 4.5e7; 
$third = 9E-42;
?>

Basically, floats in PHP are numbers that use decimal points.

Let’s go over an example of some PHP code where we use floating point numbers.

<?php
$distanceOne = 6.9; 
$distanceTwo = 7.2;

echo $distanceOne;
echo $distanceTwo;
echo $distanceOne + $distanceTwo;
?>

Much like the examples used for the integer data type, this example will output the value of the first two variables as well as the sum of the two variables added together. It would look like this:

6.9
7.2
14.1

Can you mix data types, such as integers and floating point numbers? Yes, you can. If we added a third variable of the integer data type and added it to the other two floats, it would return a float as a result.

<?php
$distanceOne = 6.9; 
$distanceTwo = 7.2;
$distanceThree = 10;

echo $distanceOne;
echo $distanceTwo;
echo $distanceOne + $distanceTwo + $distanceThree;
?>

The output for this example would be:

6.9
7.2
24.1

Strings

A string is a collection of characters enclosed in quotes. These quotes can be either single or double. Here’s an example of a string:

<?php
$name = "Jay Gaulard";
?>

or

<?php
$name = 'Jay Gaulard';
?>

Notice how I changed the quotes from double to single. They both work.

If I wanted to create a string variable and then echo its value, it would look like this:

<?php
$greeting = "Hi. My name is Jay.";
echo $greeting;
?>

The output would be:

Hi. My name is Jay.

Let’s say that we want to return just one letter from our greeting variable. The way we would do this is to add curly braces right after the echoed variable and put the location of the zero base indexed letter we would like to return. It would look like this:

<?php
$greeting = "Hi. My name is Jay.";
echo $greeting{0};
?>

And it would return this:

H

Since the index we use is zero based, the location of each letter would be relative to that. The first “H” is at location “0” and the next “i” is at location “1” and so on. Basically, to return a specific letter, all you need to do is put the location of that letter in those curly braces after your variable.

You can also change a specific letter in your greeting variable if you wanted to. Let’s say you want to change the letter of my first name. You want my name to be Zay instead of Jay. In order to accomplish this, you would need to alter your variable.

<?php
$greeting = "Hi. My name is Jay.";
$greeting{16} = "Z";
echo $greeting;
?>

In order to change the letter of my first name, I counted over, starting at 0, to see what position the “J” was in. It was in position number 16. Then, I included the same variable as I had before ($greeting) and said, “I want to change the character in position number 16 to “Z.” The output should be this:

Hi. My name is Zay.

If you’d like to add a second string variable that says something else and would like it to echo on its own line upon returning it, you’d need to add an escape sequence to your first string. In this case, to create a new line, your escape sequence would look like this:

<?php
$greeting = "Hi. My name is Jay.\n";
$secondLine = "I love practicing Jiu-Jitsu.";
echo $greeting;
echo $secondLine;
?>

Do you see how I added the backslash and the “n” at the end of my first string? In this case, the output should look like this:

Hi. My name is Jay.
I love practicing Jiu-Jitsu.

To learn more about PHP escape sequences, take a look at this page.

Booleans

Boolean values are simply true or false. They are used during conditional testing in coding. When questions need to be answered and acted upon, a boolean can become invaluable. Is his hair red? If so, then do something. Does he have a diver’s license? If so, do something. To define something as a boolean true or false, you would use the keyword “true” or “false” when defining your variable. I’ll include some examples of booleans below.

$x = true;
$y = false;

Here’s a good working example from one of my classes at Treehouse:

$bool = TRUE;
var_dump($bool);
$bool = FALSE;

This should output:

bool(true)

Now, what we’re going over here is the order of operations in PHP and then asking for a confirmation to see if what we did is working. First, we set the variable “$bool” to true. Then, we asked PHP if that was working by taking advantage of the “var_dump()” function. Since we ran the var_dump() function directly after the first variable, it returned as true. It hadn’t hit the next variable yet. If we ran the var_dump() function one more time, after the second variable, then we’d get a different output:

$bool = TRUE;
var_dump($bool);
$bool = FALSE;
var_dump($bool);

The output would look like this:

bool(true)
bool(false)

For a more extensive overview of the var_dump() function, check out this page.

It’s important to remember that anything in PHP with a value greater than 0 would be considered true. If the value is 0 or an empty string, it would be considered false. To see some great examples of boolean true and false values, take a look at this page.

If you’d like to test something in PHP to see if you’ve got a true or false value, you can use type casting. I’ll give you an example of what that looks like:

<?php
var_dump((bool) "");
var_dump((bool) 0);
var_dump((bool) 0.0);
var_dump((bool) array());
?>

The output of these four test above would be:

bool(false)
bool(false)
bool(false)
bool(false)

If you updated the values of the tests above to actually have values like this:

<?php
var_dump((bool) "Jay");
var_dump((bool) "14");
var_dump((bool) 0.1);
var_dump((bool) -1);
?>

You would get an output that looked like this:

bool(true)
bool(true)
bool(true)
bool(true)

This is because all the values above are something. They have value – even the negative integer.

Constants

Similar to variables, constants hold values. Unlike variables, constants cannot change their value or become undefined throughout a program. Once set, constants become global across the entire script.

Naming a PHP constant is much like naming a variable or a function – it follows the same rules. A valid constant name starts with a letter or underscore, followed by any number of letters, numbers, or underscores.

In order to create a constant in PHP, you need to use the define() function. Within the define() function, reside a few parameters.

name: The name of the constant.
value: The value of the constant.
case-insensitive: Whether the constant name should be case-insensitive. Default is false.

I’ll give you a few examples of constants below:

define("YEAR", 2014);

In the example above, the name of the constant is “YEAR” and the value is “2014.” When naming a constant, it’s common to use all caps. Also, if you notice, the name of the constant doesn’t begin with the dollar sign symbol, like variables do.

Here is an additional example:

define("YEAR", 2014);
define("JOB_TITLE", "Teacher");

In this example, the second constant name is two words and they are connected by an underscore. If we left a space between the two words, the constant would be invalid. Also notice how the value in the second constant is enclosed in quotes. That’s because it’s a string. The YEAR constant’s value was an integer, so it doesn’t need the quotes.

One final word about the above – constants are generally defined at the very top of a page, before any HTML code. I’ll show you how to echo them below.

If we’re interested in displaying the value of a constant on our page, we can simply echo it:

echo YEAR;

Which will display the following:

2014

Arrays

In PHP, arrays are variables that hold multiple values. In order to create an array, you would need to use the array() function. Here’s what an array might look like:

$array_example = array();

If we use the print_r() function to check out some information about our variable, we’ll find an empty array.

print_r($array_example);

Here is our output:

Array
(
)

Like I said, an empty array.

If you’d like to write an array using shorthand, you can do that like this:

$array_example = [];

If I used the print_r() function to look at the array’s information again, I would end up with the same exact information as the previous example gave me.

If you wanted to populate your array, you could do so with any data type. You can use strings and integers and all the rest. I’ll give you a populated array example here:

$car_types = array("Ford", "Chevy", "Dodge");

Notice how I put my data in between the parenthesis and surrounded each string with quotes. You can either use single or double quotes inside your array. Also, I separated each piece of data with a comma.

If we want to see our array’s information again by using the print_r() function, we can do it. We’ll most likely find a different output.

$car_types = array("Ford", "Chevy", "Dodge");
print_r($car_types);

The output would look like this:

Array
(
[0] => Ford
[1] => Chevy
[2] => Dodge
)

What we’re looking at here is very straightforward. For each car type I put into the array, I was returned a value, which is the car type. On the same line as the value, is the key. A key is the position the value resides in the array. Since keys begin at 0, the first value has a 0 key. The second has a key of 1, etc… Together, the keys and values are called key value pairs.

If we want to access and display only one value in our array, we could write code like this:

echo $car_types[0];

Since we’re echoing and we’re only choosing one value – the value in the 0 position of our array, our output will look like this:

Ford

Ford is the value at key number 0.

In order to change a value in your array, you would need to write some code that would identify the array, then identify which value you’d like to change by giving the key and then give the new value in quotes. It looks like this:

$car_types[1] = "Mazda";

In the example above, I just changed the value “Chevy” (which had a key of 1) to “Mazda.”

Like I mentioned above, you can use any data type in an array. Below, I’m going to give an example of an array like that.

$ford_car = array("Silver", 2015, 36.5, TRUE);
print_r($ford_car);

And if we used the print_r() function again, like we did above, this would be our output:

Array
(
[0] => Silver
[1] => 2015
[2] => 36.5
[3] => 1
)

What we have here is the:

Color of Silver (string)
Year of 2015 (integer)
Tire Pressure of 36.5 (float)
Power Door Locks or Not (Boolean)

If you’d like to add an additional value to an array, you would write code like this:

$ford_car[] = "Bucket";
print_r($ford_car);

The empty brackets indicate a new key and a value. This is case, if we call for the array information again, it would look like this:

Array
(
[0] => Silver
[1] => 2015
[2] => 36.5
[3] => 1
[4] => Bucket
)

Associative Arrays

Like arrays, associative arrays are variables that contain multiple values. The difference between the two, though, is that associative arrays are arrays that give you the ability to create your own keys. You may assign these keys as string (or other data type) values and you are able to name them.

I’ll give you an example of an associative array below. If we start off by reviewing our original array, things will look like this (reorganized slightly):

$car_types = array(
    "Ford", 
    "Chevy", 
    "Dodge"
    );
print_r($car_types);

And the output of the print_r() function will look like this (same as a few examples ago):

Array
(
[0] => Ford
[1] => Chevy
[2] => Dodge
)

If we wanted to assign our own key to each on of these values, we can do that. We would have to modify our code though.

$car_types = array(
    "Florida" => "Ford", 
    "Texas" => "Chevy", 
    "Nebraska" => "Dodge"
    );
print_r($car_types);

If you’ll notice above, I added a string (enclosed in quotes) and an equal sign (=) along with a greater than symbol (>) before each of our existing values. The first string in each line will serve as our key and the second string in each line will serve as our value. In the example above, I chose to display the state each car dealer is located as the key and the brand of vehicle they sell as the value.

Now, if we look at the modified output of our print_r() function, it should look like this:

Array
(
[Florida] => Ford
[Texas] => Chevy
[Nebraska] => Dodge
)

Notice how each key has changed.

If you’d like to pull out and display only one value of your associative array, you can write code that looks like this:

echo $car_types["Florida"];

Your output should look like this:

Ford

If you’d like to modify your array, like we did in an earlier example, you can do it this time, like this:

$car_types["Florida"] = "Datsun";

This will update the “Florida” key with a new value. In this case, the new value for the car dealer in Florida is Datsun. The output for the above should look like this:

Datsun

If you’d like to add an entirely new key and value to your array, you can write code that looks like this:

$car_types["Georgia"] = "BMW";

What we did here was to type our array name, followed by the name of the key we’d like to create. Then, we gave that key a value.

If we use the print_r() function to see how our array looks now:

print_r($car_types);

It should look like this:

Array
(
[Florida] => Datsun
[Texas] => Chevy
[Nebraska] => Dodge
[Georgia] => BMW
)

Notice how the value for the Florida key changed to “Datsun” and how the new key and value appeared. Good stuff.

—–

That’s all I’m going to write for now. Up next, working with types and objects in JavaScript.

Filed Under: Development Tagged With: PHP


WordPress Homepage Templates

April 8, 2015

WordPress Homepage Templates

In WordPress, you have a few options when it comes to displaying your homepage. You can either display a static one or you can display a dynamic one, such as a page that displays your latest posts. To make the settings according to which one you would like to see, you can either use “Settings > Reading” from the stock WordPress admin area or you can use the “Appearance > Customize” menu, if available to you.

Here is a screen shot of the WordPress admin settings page:

WordPress Admin Homepage Settings

And this is what the “Customize” settings page looks like:

WordPress Customize Settings Page

Which Page to Use

When using the static home page setting, you’ll be using the front-page.php file in “wp-content > themes > your-theme >.” Under this setting, your blog listings page will use the home.php file in same directory.

If you decide that you would like to have your homepage to show your latest blog posts, then the home.php file I mentioned above will be used for that and the front-page.php file will be ignored.

Which Files to Create

When creating a theme, you need to remember the cascading nature of how WordPress theme files operate. If you are in the midst of putting together your file structure and neglect to construct a front-page.php file and you decide that you would like to set your homepage to use a static page, WordPress will fall back to the page.php file. Whether this is ideal, is up to you, but if you want specialized functionality for your homepage, using the front-page.php file would be better suited.

The same is true if you would like to display your latest blog posts as your homepage and neglect to create a home.php file. In this case, under this setting, WordPress will cascade down to utilize the index.php file for your homepage. Again, if this is not ideal, it would be advisable to create a home.php file.

You can learn all about static front page options in the WordPress Codex.

Filed Under: Development Tagged With: WordPress


The Syntax of JavaScript

April 7, 2015

The Syntax of JavaScript

Like any language, JavaScript needs to be written in a specific manner in order to be understood. There’s a certain “syntax” that’s required. And like any language, if the syntax gets sloppy or is written incorrectly, you end up with either inefficient code or even worse, code that doesn’t work.

In this post, I’m going to go over some of the syntax JavaScript uses. I’ll also discuss a few golden pieces of information you need to remember while coding in JavaScript.

Nuggets of Information

First, JavaScript is an interpreted language, meaning its instructions are executed on the fly. They don’t need to be compiled into something else first, in order to operate.

Many of the languages you’ll write today are interpreted languages, so this isn’t something you really need to concern yourself with, especially if you’re like me, who is dabbling in some of the more popular web programming languages. It’s good to know though.

Next, JavaScript is case sensitive. It matters what case you code things in. For example:

var x = 5;
var y = 6;

is not the same as:

var X = 5;
var Y = 6;

Notice how I capitalized the “X” and the “Y” in the latter two variables. Since one set of variables is lowercase and the other is uppercase, they can be used in the same program, but will apply to different things. Also, if you’re using one of the built-in functions of JavaScript and you alter the case of the function, it will not work.

I mentioned this in my previous post about PHP and the idea is similar to the one in JavaScript – Many programming languages, such as JavaScript, use statements, which are instructions to be executed by the web browser. These statements do things and are obviously necessary.

JavaScript statements end in a semicolon. Here is an example of that:

a = 20;
b = 40;
c = a + b;

When it comes to whitespace, the same rules that I wrote about in my PHP post apply to JavaScript. And to go over them once more, I’ll tell you that JavaScript doesn’t care about whitespace in its statements, but it does within its strings. Here is an example of whitespace use in JavaScript:

var name = "Jay Gaulard";

The above example is the same as this one below.

var name="Jay Gaulard";

But, both of those examples are different than this one:

var name = "Jay    Gaulard";

Notice the space usage around the equal sign in the first two examples and then in between my first and last name in the final example.

Commenting JavaScript is very similar to commenting in PHP. I’ll give you a few examples here:

// this is my name
var name = "Jay Gaulard";

It’s common to comment directly above a statement. Or, in the example below, you can comment directly after a statement.

var name = "Jay Gaulard"; // this is my name

Or, you can use multi-line comments.

/*
in the line
below, you will
see my name
*/
var name = "Jay Gaulard";

Writing JavaScript

When writing JavaScript, you can either write it inline, in between your HTML code or write it in an external file and call it into your HTML. Generally speaking, it’s standard practice you write your code in an external file, but there is some disagreement with that. I’m going to write some pros and cons for each method below.

Inline

– Reduces the number of HTTP requests because no extra file is called.
– Performance may be better if inline JavaScript is short.
– Easier to write inline if testing code.

Here is an example of inline JavaScript:

<script>
alert("My name is Jay.");
</script>

External

– Greater performance because external file can be easily cached by browsers.
– Easier to maintain because all JavaScript is in one file as opposed to the same code being spread out across multiple HTML files.
– Special characters in JavaScript can cause issues if run inline with HTML.
– If the same JavaScript runs across multiple HTML pages, you have duplicate code.

And here is how you would include a JavaScript file into an HTML page:

<script src="javascript-file.js"></script>

When including your external JavaScript file into your HTML page, you have a choice of whether to place your code at the top of the page or at the bottom. I remember years ago, all I would see is the inclusion of JavaScript at the top of the page, in the head section. Now though, I am seeing it at the bottom more and more. The reason for this is because of the way JavaScript code is parsed. If you include it at the top of the page, your JavaScript will run before the entire page is loaded. If there’s an error somewhere, your page won’t load at all. And as far as where you can place your script tags at the bottom – they generally go right above your closing body tag.

Variables

JavaScript variables are simply containers for data. The way to define a variable is actually quite simple. Here’s an example of a variable:

var name;

Like PHP, there are a number of rules to follow when defining a variable. You can either follow this link to read more about JavaScript variables or read on below. I’ll list those rules here:

All JavaScript variables must be identified with unique names.

These unique names are called identifiers.

Identifiers can be short names (like x and y), or more descriptive names (age, sum, totalVolume).

The general rules for constructing names for variables (unique identifiers) are:

– Names can contain letters, digits, underscores, and dollar signs.
– Names must begin with a letter.
– Names can also begin with $ and _ (underscore).
– Names are case sensitive (y and Y are different variables).
– Reserved words (like JavaScript keywords) cannot be used as names.

Identifying a variable by itself is simply reserving a space for data to reside. It’s only when you assign your variable a value is it equal to something. Otherwise, your variable is left undefined.

If you’d like to assign a value to your variable, you need to set it with an equal sign (the assignment operator). Please be aware that while this looks like the same equal sign that we’re all used to from math class, it isn’t. This equal sign assigns a value to a variable, it doesn’t make the value equal to the variable. Those are two very different things.

There are two ways to assign a value to a variable:

var name;
name = "Jay";

or

var name = "Jay";

In the first example above, I first defined the variable (reserving a space for data to reside) and then I set some data to it. In the second example, I defined the variable and set the value of “Jay” to it all in one line. Either way is fine, but the second is more common.

When setting data to variable, there are a few things to watch out for. First, you are allowed to set integers to a variable, such as:

var number = 200;

You are also allowed to set boolean (true or false) values to a variable, such as:

var question = true;

var question = false;

You may also set a string to a variable, such as:

var name = "Jay";

var name = 'Jay';

It is up to you whether or not you want to use single or double quotes when using a string. The rule is, don’t mix them. Choose one or the other.

Conditional Statements

Asking questions using JavaScript can be fairly straightforward. If you’d like to know if one number is greater than another, you can do that. You can also discover whether one number is greater than or equal to another number. If you’d like one section of code to run if one condition is met, that’s cool – and if you’d like another section of code to run if that same condition isn’t met, that’s cool too.

Below, I’m going to discuss some conditional statements that you can use in JavaScript. If you’ve programmed at all, you’ve most likely heard of these, but if you haven’t, they aren’t too challenging to pick up on.

if Statement

This is, very simply put, a statement that allows a block of code to run if a condition is true.

if (condition) {
    code that is executed if condition is found to return a true value
}

I’ll give you an example of what it looks like:

if (age > 18) {
    response = "Wow, you are older than I am.";
}

In the code above, you’re asking if someone’s age is greater than 18 years. If it is, a response will be generated that says, “Wow, you are older than I am.” If their age is less than 18, nothing will happen because no code will be executed.

else Statement

Let’s say that, instead of nothing happening if someone’s age is not greater than 18, you wanted a response to be generated. In that case, you’d have to use the else statement.

if (condition) {
    code that is executed if condition is found to return a true value
} else {
    code that is executed if condition is found to return a false value
}

Here’s an example of what that looks like:

if (age > 18) {
    response = "Wow, you are older than I am.";
} else {
    response = "Wow, you are the same age or younger than I am.";
}

Now, if the person’s age is anything other than greater than 18, a response will be generated that says, “Wow, you are the same age or younger than I am.”

else if Statement

Here’s a question – What if the person’s age is equal to 18 and you wanted to generate a response for just that? In the examples above, the first generated response was returned only if the age was greater than 18. The second generated response would return if the age was less than or equal to 18. We have yet to program the ability to generate a response for the age being equal to 18 years.

In order to generate a response for a third condition, we’ll need to use the else if statement.

if (condition) {
    code that is executed if the first condition is found to return a true value
} else if {
    code that is executed if the first condition is found to return a false value and the second condition is found to return a true value
} else {
    code that is executed if both the first and second conditions are found to return false values
}

Here’s a simple example of an else if statement, building off the first two examples:

if (age > 18) {
    response = "Wow, you are older than I am.";
} else if (age < 18) {
    response = "Wow, you are younger than I am.";
} else {
    response = "Hey, we are the same age!";
}

Now, if someone’s age is the same as ours, a response will be generated that says, “Hey, we are the same age!”

Operators

Operator are the tools, or symbols, we use to manipulate values in JavaScript. The values we use operators to manipulate are called operands. An easy example of an operator is the plus (+) symbol. This symbol will add two operands together. Another easy one might be the less than (<) symbol. This symbol performs a check to see if the value of the left operand is less than that of the right. JavaScript supports many types of operators. I'll link to a few websites that have excellent pages that go into decent depth regarding JavaScript operators. - JavaScript Operators at W3Schools

– JavaScript Operators at Tutorials Point

The reason I link to the above sites is because they’ve already compiled everything I would have written here. I actually began writing it and then discovered that I would have been duplicating everything they already have.

Besides simply being aware of the existence of JavaScript operators, you also need to be aware of the precedence they follow in relation to each other.

result = 5 + 5 * 10;

In the example above, the multiplication operator takes precedence over the addition operator, so, in this case, the numbers 5 and 10 will be multiplied before the first 5 will be added to anything. A nice reference for operator precedence can be found here. by the way, the above result is 55.

Now, if you wanted to add the two 5 values together before the 10 was multiplied like it was above, you would add parenthesis around the addition operands.

result = (5 + 5) * 10;

This would change the order of operations and give you a result of 100.

Loops

In JavaScript, a loop can execute a block of code a number of times. This is especially helpful when there is something you need automated, such as a counter or when you’re working with arrays. In order to create loops, you’ll need to utilize a variety of statements. These statements are the driving force behind loops and are:

– for – loops through a block of code a number of times (reference)
– for/in – loops through the properties of an object (reference)
– while – loops through a block of code while a specified condition is true (reference)
– do/while – also loops through a block of code while a specified condition is true (reference)

I’ll go over each type of loop and then give an example of each.

for Loop

You can include three expressions in this loop. They are enclosed in parentheses and separated by semicolons (;). The expressions are followed by a code block that includes a statement or statements to run.

for ([initialization]; [condition]; [final-expression])
   statement

for (var i = 0; i < 9; i++) {
   console.log(i);
}

for/in Loop

This loop iterates over the enumerable properties of an object, in random order. For each distinct property, statements can be executed.

for (variable in object) {...
}

var obj = {a:1, b:2, c:3};
    
for (var prop in obj) {
  console.log("o." + prop + " = " + obj[prop]);
}

// Output:
// "o.a = 1"
// "o.b = 2"
// "o.c = 3"

while Loop

Creates a loop that executes a specified statement as long as the test condition evaluates to true. The condition is evaluated before the loop is run.

while (condition) {
  statement
}

var n = 0;
var x = 0;

while (n < 3) {
  n++;
  x += n;
}

do-while Loop

This loop executes a statement until the condition it’s looping returns a false value. The loop has to occur at least once for the condition to be evaluated.

do
   statement
while (condition);

var i = 0;
do {
   i += 1;
   console.log(i);
} while (i < 5);

Beyond the statements I explained above, there are two others that are worth mentioning. They are break and continue.

break – jumps out of a loop (reference)

continue – jumps over one iteration in the loop (reference)

break

for (i = 0; i < 10; i++) {
    if (i === 3) { break; }
    text += "The number is " + i + "<br>";
}

continue

for (i = 0; i < 10; i++) {
    if (i === 3) { continue; }
    text += "The number is " + i + "<br>";
}

Functions

The final area of JavaScript I’m going to discuss today is functions, which are a series of statements that have been grouped together to perform a specific task. When you call a function, you execute it.

I’m going to give you an example of what a function looks like and then I’ll go through its parts.

function exampleFunction (number1, number2) {
    return number1 + number2;
}

In the above example, “exampleFunction” is the name of the function. When naming a function, there are some rules to follow. Luckily, the rules are the same as when naming variables, so if you’re interested in what those are, please see the top of this post.

The parts of a function are the “function” keyword, then the name (exampleFunction), the two parentheses. Within these parenthesis, you can hold parameters (number1, number2). Those parameters are separated by a comma. Lastly, the code you’d like to run is placed within two curly braces. In the case of the example above, the code we would like to execute is “return number1 + number2;.”

Now, it’s important to remember that functions don’t need to have data passed into them. You can keep those parenthesis empty, unlike the example above. If you create your function this way, it’ll simply run without any arguments.

Let’s say we have a similar function to the one above, but we don’t have any parameters. It’ll look something like this:

function exampleFunction () {
    // code i'd like to run
}

By itself, this function wouldn’t do anything. It’s not until you call it that it would execute the code inside it. To call a function, you use its name, the parenthesis and end your line with a semicolon.

exampleFunction ();

If we did want to pass in the parameters to make the first example work, we would call it like this:

exampleFunction ( 2, 5 );

The output of that first function when called with those arguments would be “7.” All we’re doing is saying, “I’m giving you the parameters you are asking for as arguments in a function call and you are running the function code block and giving me back the result.

—–

I’m going to stop there. In my next JavaScript post, I’m going to talk about Objects and Data Types. Until next time!

Filed Under: Development Tagged With: JavaScript


Editing Code in Sublime Text

April 5, 2015

Editing Code in Sublime Text

From what I’ve heard and read, programmers love to code quickly. If you’ve ever had the chance to watch an experienced programmer at work, you know what I’m talking about. Even tutorials on Youtube sometimes include someone who’s flying around at the speed of sound. That style isn’t great for teaching, but it sure is good for getting things done.

Sublime has many features to assist in speeding up the editing of files. Speeding up editing means speeding up work – and that means finishing projects with the most efficiency possible.

In this post, I’m going to go over some techniques programmers use to code like it’s, well, their jobs. It’s good stuff.

Selection

I’m going to quickly discuss the “Selection” menu in Sublime Text. There are many handy tools you can use to speed up your selecting of text and code in your files. I’ll show the keyboard shortcut and then explain what each does.

Ctrl+A – Select everything in the file.

Ctrl+D – Select the word your cursor is on.

Ctrl+L – Select the line your cursor is on.

Ctrl+Shift+A – First, selects the contents of a tag your cursor is in. If you continue hitting the “A,” your selection will expand to include the tags themselves, then their containing tags and eventually the entire page of code.

Ctrl+Shift+M – Selects the contents of a set of brackets. If you continue to hit the “M” key, your selection will expand to include the brackets themselves, their parents, and onward. Brackets are considered parentheses, square brackets and curly braces.

Ctrl+Shift+J – Selects the indented area your cursor resides (and indented children). If you start at a multiple indented piece of code and continue to hit the “J” key, your selection will expand upward to cover the each parent. So, if you start at the furthest child indentation, it will step up to cover each parent, but if you start at the highest parent, you will select all children at once.

Ctrl+Shift+Space – Selects everything within a certain scope. If you have colored code in Sublime and your cursor is residing in some of it, you will select all the colored code in that scope.

Expand Selection to Paragraph – Select the paragraph your cursor is in. Paragraphs are considered blocks of code that have an empty line before them and after them. They needn’t be real paragraphs. Currently, there is no keyboard shortcut assigned to this, but you can get there by “Selection > Expand Selection to Paragraph” in the top menu.

Alt+Left or Right Arrow – Instead of moving one letter at a time, your cursor moves one word at a time.

Alt+Shift+Left or Right Arrow – Instead of only moving one word at a time, your cursor selects each word you move to, progressively.

Transposing & Swapping

Ctrl+T – If you place your cursor between two letters, you can transpose them with each other. They will simply switch positions.

Ctrl+Shift+Up or Down Arrow – If you would like to move an entire line up or down through your code, use these keys. Also works for any chunk of code you highlight. You can move the whole chunk.

Bookmarking

Under the “Goto” menu, you can find a Bookmarks side menu. I’ll go over some bookmarking features below.

Ctrl+F2 – This will create a bookmark (small arrow) in the left gutter of the line your cursor resides. If you are on a laptop like I am, and you have to click a “Fn” key to select your “F” keys, you will need to hit Ctrl+Fn+F2. It works just the same.

F2 – This will move you to your next bookmark.

Shift+F2 – This will move you to your previous bookmark.

Ctrl+Shift+F2 – This will clear all your bookmarks.

Alt+F2 – This will select all your bookmarks.

Just as a side note, once you create a bookmark, the line it’s on will appear in the “Goto > Bookmarks” menu. Clearing them will make them disappear from that menu.

Goto Anything

Ctrl+P – Will pull up the Goto Anything menu. From there, you can search files in your project. If you want to just browse each file in the menu, hit the up and down arrows.

# – If you type the # symbol while the Goto Anything menu is open, you will enter fuzzy matching mode. You should see many items appear in Various rows. You can either click on one of those items or start typing any letters in the text you would like to find. If the word “dog” appeared in your code somewhere, you would simply need to type “#dg.” If you wanted to find “bird,” you would simply need to type “#bd.”

Partial File Name+# – If you have a project open and would like to search a specific file for something, you would only need to type a partial file name (until that file shows in your search bar) in the Goto Anything menu and then the # symbol.

:+Line Number – If you would like to search for a specific line number in the GotoAnything menu, simply type a “:” and then the line number and you will jump right to that line number.

Partial File Name+:+Line Number – If you’d like to take a glance at a line in a file that’s not open, in the Goto Anything menu, type the partial file name and then “:” and the line number. You would jump right to that line without opening the file.

Command Palette

Ctrl+Shift+P – This palette offer a list of all available commands. Accepts fuzzy matching for searches of those commands. Basically, if you would like to quickly search for a command, open this menu and start typing what you think the name of it is. Your choices will be filtered as you type and the closer you get, the clearer your choices will become.

Multiple Selection

If you’re reading this post, you’ve most likely seen the multiple selection feature of Sublime Text. If you’re like me, your mouth probably dropped open when you saw it. It’s one of those really, really neat things to be able to do.

Ctrl – To make multiple selections with your cursor, simply place your cursor where you would like your first selection and then hold down the “Ctrl” key. Then, click each next spot you would like to select. When you are finished, you should have multiple blinking cursors.

Ctrl+Alt+Up or Down – Instead of clicking each area you’d like your additional cursor to be, you can simply click the first one again and then click the Ctrl+Alt+Up or Down keys to trail your cursor in either direction. When you’re finished, you should have the same as above – multiple blinking cursors.

Ctrl+Shift+L – If you’d like a different way to make multiple selections, you could highlight the lines you’d like to make your selections in and then split those lines. Once your lines are highlighted, click “Ctrl+Shift+L” and you’ll see your cursor blinking at the end of each line. Just hit the left arrow to move your cursors to the beginning of each line and then the space bar to the spot you’d like to make your edits. You may also click the “Alt+Left or Right Arrows” to jump by word.

—–

That’s all I’m going to write for this post. There were actually a few more sections that I wanted to cover, but I’m beginning to realize that in order to keep the same level of detail, I’m going to have to write separate posts for each section. I”ll leave that for another day.

Filed Under: Development Tagged With: Dev Tools


The Anatomy of Your WordPress Theme

April 4, 2015

The Anatomy of Your WordPress Theme

Every WordPress theme has a common set of files to ensure a functioning website. While some of these files, which are considered “core,” are not required, others are absolutely necessary. In this post, I’m going to discuss a few of both types of files, while offering commentary regarding each.

STYLE.CSS

We all know what stylesheets do. They control the presentation – the visual design and layout of a website. While this may be true, WordPress also uses the primary stylesheet (style.css) to identify the meta details pertaining to your theme via a comment block located at the top of the file.

While I won’t discuss styling CSS here, because it’s really beyond the scope of this post, I will offer an example of the header comment I referred to above. And since it’s probably the first task you’re going to complete when putting your custom theme together, it’s important to understand.

Parent Theme Meta Data

/*
Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/themes/twentythirteen
Author: The WordPress Team
Author URI: http://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: twentythirteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

I took this example from the WordPress Codex page (slightly modified). If you’re interested, you can see that page here.

Now, there are two different versions – or actually one version and another modified version of this meta data area at the top of your CSS file. If you have a parent theme, or just one theme version on your site, you’d use something similar to what I just posted. If you have a child theme that’s built off of a parent theme, you would need another style.css file in that child theme directory, along with another comment meta data area at the top of that file. Your child theme meta data area would look something like this:

Child Theme Meta Data

/*
 Theme Name:   Twenty Thirteen Child
 Theme URI:    http://wordpress.org/themes/twentythirteenchild
 Description:  Twenty Thirteen Child Theme
 Author:       http://wordpress.org/
 Author URI:   http://wordpress.org/
 Template:     twentythirteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twentythirteenchild
*/

The above code came from the WordPress Codex Child Theme page (slightly modified).

Below, I’m going to go over each part of the parent and child theme meta data areas.

Breaking Down the Meta Data

Theme Name: This is the name of your theme. It should be descriptive and easily recognizable.

Theme URI: Where is your theme located? This area should identify that.

Author: This area is where you name the author of your theme. You can name a specific person or a group, such as a company.

Author URI: Building off the last field, you would offer the web address of the theme creator(s).

Description: How would you describe your theme to someone else? If a parent theme, be descriptive of its features. If a child theme, be sure to inform users of what parent this is a child of.

Version: Are you distributing this theme? Are to modifying it in house? If so, it may be a good idea to keep the theme’s version on file.

License: If you are selling this theme, if would be a good idea to describe its license here. Both parent themes and child themes should have the same license.

License URI: Display the URI of your theme license. Similar to above, both parent and child themes should display the same license URI.

Tags: If you plan on making this theme searchable in a theme index, good descriptive tags are important.

Template: If you are creating a child theme, you would include the name of the parent theme’s folder here. The child theme would inherit much of the parent theme.

Text Domain: My understanding is that this field is for various languages. If you are familiar with this field and its use, please explain in the comment section below.

Using Your Parent Theme’s CSS

The old word for this was “import.” The new one is “enqueue.” Instead of using the outdated process of importing the parent stylesheet into the child’s:

@import url("../twentythirteen/style.css");

You would now enqueue it in your child theme’s functions.php. In order to do this, you would need to create a functions.php in your child theme directory and place the following code in it:

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

INDEX.PHP

The index.php file is a good one to have because it provides as a backup for all other templates. You can learn more about this by checking out my “Working With WordPress Templates” post.

If you decide that you aren’t going to do much customizing or engage in a lot of granular control of many other WordPress template pages on your site, you’ll likely want to keep the coding of your index.php file fairly high level, so it’ll capture all the necessary functions of every available page you plan to have on your website. Remember, if you only have your index.php file, it’s going to be responsible for the functionality of all pages. Although this isn’t the most ideal setup, it certainly is possible to have your website operate this way.

Here is an example of some code you might have in your index.php file:

<?php get_header(); ?>

    <div class="page">

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

          <div class="title"> 
            <h1><?php the_title(); ?></h1>
          </div>


        <?php the_content(); ?>

      <?php endwhile; else: ?>

        <div class="title"> 
            <h1>No Data Found</h1>
          </div>

          <p>Unfortunately, there is no content on this page.</p>

      <?php endif; ?>

      </div>

      <?php get_sidebar(); ?>

<?php get_footer(); ?>

The above code will check to see if you have any content, and if you do, it’ll display it on your page. If not, visitors will receive the message of “Unfortunately, there is no content on this page.”

HEADER.PHP

If you take a look at the top portion of the code above, you’ll see a snippet that looks like this:

<?php get_header(); ?>

This function calls the header.php file and includes it into the index.php page. To learn more about WordPress functions, you can visit this page in the codex.

Since the index.php page will include the header.php, I thought it would be a good idea to show you an ultra stripped down version of a header.php file.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?php wp_title(); ?></title> 

    <?php wp_head(); ?>

  </head>

  <body <?php body_class(); ?>>

    <div class="navigation">
      <!-- navigation goes here -->    
    </div>

In the section above, you can see the very first function is wp_title() up in the title area. This pulls in the title you input in the back end admin area. The next function is the wp_head() function, which pulls the data you enqueued in your functions.php file. Such data might be your css and js files. The body_class() function adds CSS class names for the HMTL body tag and is dynamic, depending on which page you’re on. Of course, you can have many more functions in this file, but like I said above, I stripped things down for simplicity’s sake. Just know, the header.php file gets pulled into most files by using the get_header() function. WordPress automatically knows which file to pull in because it’s part of their naming convention.

FOOTER.PHP

Similar to the header.php file, the footer.php file gets pulled into index.php using the get_footer() function. You can see this above as well.

There potentially isn’t much to this file. There are a few reasons for it to exist though. The first reason is to simply close any markup that was opened, or initiated, in header.php. If you take a look above, you’ll see that we opened up the <html> and <body> tags and then in the example below, we closed them.

    <footer>
        
      <!-- footer information goes here -->
        
    </footer>

    <?php wp_footer(); ?>
    
  </body>
</html>

Another common item found in footer files is the wp_footer() function. This function doesn’t output anything by itself, but is often used by developers as a hook to reference JavaScript files. If you don’t have this code in your footer.php file and someone attempts to load a plugin or the equivalent, it won’t work, if it relies on those referenced JavaScript files. Lastly, this function should be coded in right before the closing body tag.

SIDEBAR.PHP

Sidebars on WordPress installs are generally active areas. They hold all sorts of navigation, sign up forms and advertising. Primarily, when coding the sidebar.php file, you’d want to make it widget friendly because those widgets are the things that folks use to include the items I just mentioned. I’ve written some sample sidebar code below:

<div class="sidebar">
  <?php if ( ! dynamic_sidebar( 'primary' ) ): ?>
  <!-- sidebar information goes here -->
  <?php endif; ?>
</div>

As you can see, that’s pretty straightforward. Basically, all we’re doing is calling in the primary sidebar, if it exists, using the dynamic_sidebar() function. If it doesn’t exist, you could certainly add a bit of text there that says something to that effect. It would be up to you whether it’s hard coded or dynamic.

—–

Well, that’s it for today. My fingers are tired and now I’ve got to go through this post to edit it and add some links to all the WordPress functions and other items I talked about. Until next time!

Filed Under: Development Tagged With: WordPress


PHP Variables, Statements, Comments & Whitespace

April 3, 2015

PHP Variables, Statements, Comments & Whitespace

I’m going to cover a plethora of topics today, including some basic areas of beginning PHP. I think these are important to understand because, if you’re into this programming language, this is your foundation. Every day you code with PHP, you’ll use each of what I’ve included in the title of this post. You can’t get away from them so it’s critical to embrace the basics and make them your own.

PHP Variables

What is a PHP Variable?

I’ve been taught this time and time again. I believe the very first occasion was with Simon Allardice over at Lynda, and then during multiple courses, multiple places. In the most basic sense, a variable is a container to store data. The container has been described as a box and the data has been described as what you place in the box. I’ll give you a simple example.

<?php
$name = "Jay Gaulard";
?>

In the example above, the container, or variable, is $name and the data is Jay Gaulard. Also, if you remember from my previous PHP post, this variable and piece of data are enclosed inside PHP delimiters. Those delimiters are <?php to open and ?> to close PHP. If you’re interested in learning more about PHP syntax, you can check out a great resource here.

One more short example just to build on the last and pummel this idea home.

<?php
$name = "Jay Gaulard";
$x = 5;
$y = 10;
?>

As you can see, all I did was to simply add two more variables with their accompanying data. Now, we have the $name variable, as well as an $x variable and a $y variable.

PHP Variable Rules

When writing PHP variables, there are a few rules to follow. They aren’t terribly challenging to grasp or to remember, but they sure are important. If you fail to obey one of these rules, you’re going to have a bit of trouble attempting to get your program to work. You can either read these rules over here, or just read them below. They are the same no matter where you look.

Rules when writing PHP variables:

– A variable starts with the $ sign, followed by the name of the variable.
– A variable name must start with a letter or the underscore character.
– A variable name cannot start with a number.
– A variable name can only contain alpha-numeric characters and underscores (A-z, 0-9, and _ ).
– Variable names are case-sensitive ($dog and $DOG are two different variables).

Working With PHP Variables

I’m going to start working with some PHP variables in this section to give a background on how things look in a real HTML web page. You’ll get a chance to see how fun and powerful PHP variables can be.

<?php
$name = "Jay Gaulard";
?>

<!DOCTYPE html>
<html>
  <head>
  	<meta charset=utf-8>
  	<title><?php echo $name ?></title>
  </head>
  <body>
      <h1>What's My Name?</h1>
      <p>Hi. My name is <?php echo $name ?>.</p>
  </body>
</html>

In the example above, you can see that we’ve got a real, working (yet simple) HTML page. I’ve written a PHP variable up above the beginning of the HMTL. Since the server will use this PHP variable before any of the HTML is rendered, having the variable there will in no way impact the HTML.

The $name variable is set to Jay Gaulard. If you continue to follow the page down, you’ll see that the title of the web page will be titled, “Jay Gaulard.” That’s simply the output of the $name variable. Also, after the heading in the page that asks, “What’s My Name?,” the output will be, “Hi. My name is Jay Gaulard.”

Now, if we wanted to spice things up a bit, we could easily add a second variable to the code block up at the top of the code. Let’s add a color variable to set my favorite color. Then, we’ll add that color to the sentence on the page.

<?php
$name = "Jay Gaulard";
$color = "Blue";
?>

<!DOCTYPE html>
<html>
  <head>
  	<meta charset=utf-8>
  	<title><?php echo $name ?></title>
  </head>
  <body>
      <h1>What's My Name and Favorite Color?</h1>
      <p>Hi. My name is <?php echo $name ?> and my favorite color is <?php echo $color ?>.</p>
  </body>
</html>

I think you get the idea. Now, the output of the sentence on the page will be, “Hi. My name is Jay Gaulard and my favorite color is Blue.”

Order of Operations

Let’s say, for some wild reason, I wanted to change my name that’s displayed on this webpage to my nickname. Some people call me Bob. But let’s also say that, for some reason, I don’t have access to the HTML part of the code. All I’m able to do is to edit the PHP code block up at the top. Well, in order to make my nickname (Bob) appear as my name on the page, all I’d have to do is create another PHP variable called $nickname and set it to Bob. Then, I’d take advantage of the order of operations in PHP.

<?php
$name = "Jay Gaulard";
$color = "Blue";
$nickname = "Bob";
$name = $nickname;
?>

<!DOCTYPE html>
<html>
  <head>
  	<meta charset=utf-8>
  	<title><?php echo $name ?></title>
  </head>
  <body>
      <h1>What's My Name and Favorite Color?</h1>
      <p>Hi. My name is <?php echo $name ?> and my favorite color is <?php echo $color ?>.</p>
  </body>
</html>

As you can see above, I adjusted the PHP code block at the top of the page. I added the $nickname variable and then set the $name variable to that. The original $name variable was overwritten by the new data. Now, every place $name is called on the page, my nickname will appear and I didn’t have to change any of the code, besides the PHP code block up at the top.

Commenting PHP Code

There are many reasons why programmers comment code. The one reason I hear most frequently is that coding gets hairy at one point or another so commenting is a way to remember what the heck is going on. Sure, by the time you start writing code, you should have the skills to read it, but many folks prefer to avoid wasting unnecessary time on interpreting what they may have written (sloppily) years ago and simply get to the point. Also, if you’re working on a team, your logic may differ from a team member’s. It sure would be nice if you added a few comments here and there to give them a clue as to what was going through your head at the time of writing. So, what are some good reasons for clearly commenting your code?

Reasons For Using Comments in PHP

– To assist in remembering what you wrote years, months, days ago.
– To assist team members in understanding what you wrote or intended to happen.
– To keep code readable and understandable over multiple files.
– To help the public (who may have purchased a template or otherwise from you) read and understand your code.
– To comment out test code you may be working on.
– To offer a description (at the very top of your code – header comment) of what your code does.
– To explain what large chunks of code are meant to do…and so on.

Types of PHP Comments

In the example below, I’m going to add a comment above each variable, to explain what the variable is. These variables are probably already obvious, but I’m sure you can imagine more challenging areas of code that would call for some slick commenting.

<?php
// This is my full name
$name = "Jay Gaulard";

// This is my favorite color
$color = "Blue";

// This is my nickname
$nickname = "Bob";

// Overwriting full name with my nickname
$name = $nickname;
?>

So, this type of comment uses two // (forward slashes). Everything on the line after those slashes is considered a comment by the PHP interpreter and is not displayed on the page.

If you wanted to, you can also comment out a line of code. Say you were testing things out and getting creative and you just wanted to see what you happen if that line wasn’t run. You could add two slashes before that line of code.

<?php
$name = "Jay Gaulard";
$color = "Blue";
$nickname = "Bob";
// $name = $nickname;
?>

In the above example, I commented out the last variable, so any $name variable in my HTML code would revert back to the original full name I used above. The PHP order of operations that I wrote about above would not apply. Everything after the two slashes would be ignored.

If you’d like to write a multi-line comment, you could either write two forward slashes at the beginning of each line (not recommended) or you could use a proper multi-line comment. Here’s what that looks like:

<?php

/*
These variables are meant
to define my name, my
favorite color and my
nickname
*/

$name = "Jay Gaulard";
$color = "Blue";
$nickname = "Bob";
$name = $nickname;
?>

So, as you can see, everything in between the forward slash and the asterisk and vice-versa at the end, is ignored. You can even use a multi-line comment to comment out an entire block of code, like this:

<?php

/*

$name = "Jay Gaulard";
$color = "Blue";
$nickname = "Bob";
$name = $nickname;

*/

?>

Now, all my variables will be ignored.

If you enjoy learning about PHP comments, I encourage you to check out the official PHP documentation page on just that.

PHP Statements

Statements in PHP are lines that end in a semicolon. Take a look at the following example:

<?php
// This is my full name
$name = "Jay Gaulard";

// This is my favorite color
$color = "Blue";

// This is my nickname
$nickname = "Bob";

// Overwriting full name with my nickname
$name = $nickname;
?>

In the above code, lines 3, 6, 9 and 12 are statements. These are the lines that end in semicolons. Think of statements in PHP as lines or sections of code that are run or executed. They matter and they alter what’s going to happen on a page. If you have a single line of PHP mixed in with some HTML code and there is no semicolon, it’s still considered a statement because it’s a line of code that’s going to run and change what’s happening, or could potentially happen on the page.

Whitespace in PHP

In general, whitespace that is outside of quotes in PHP is ignored. Here is an example of that:

<?php
$name = "Jay Gaulard";
$color = "Blue";
$nickname = "Bob";
$name = $nickname;
?>

The code above will be interpreted exactly the same as the code below.

<?php

$name = "Jay Gaulard";

$color = "Blue";

$nickname = "Bob";

$name = $nickname;

?>

The spaces in between the variables in the above example will not be interpreted as something that matters. Also, whitespace before and after pieces of a statement are ignore. So if I add a bunch of spaces before and after the equal sign in the first variable, it doesn’t matter.

<?php
$name      =      "Jay Gaulard";
$color = "Blue";
$nickname = "Bob";
$name = $nickname;
?>

Now, there is an area where whitespace does matter and that’s inside a string. In the above example, strings are “strings” of characters inside the quotes. So, if we add some spaces inside the quotes of the first variable, it will alter the output.

<?php
$name = " Jay Gaulard ";
$color = "Blue";
$nickname = "Bob";
$name = $nickname;
?>

If we now run the code from our first example:

<?php
$name = " Jay Gaulard ";
?>

<!DOCTYPE html>
<html>
  <head>
  	<meta charset=utf-8>
  	<title><?php echo $name ?></title>
  </head>
  <body>
      <h1>What's My Name?</h1>
      <p>Hi. My name is <?php echo $name ?>.</p>
  </body>
</html>

It would output looking like this:

“Hi. My name is  Jay Gaulard .”

Notice the spaces before and after my name. Whitespace inside strings is taken literally.

—–

Wow, that was a lot of writing. I hope you enjoyed my post on PHP variables, statements, comments and whitespace. I’m learning a tremendous amount over at Treehouse and if you’re interested in this type of thing, I encourage you to get over there to begin your journey. If you do decide to sign up, you might also want to create a blog of your own to do something similar to what you see here. Enjoy!

Filed Under: Development Tagged With: PHP

  • « Previous Page
  • 1
  • 2
  • 3
  • 4
  • 5
  • Next Page »

Connect With Me

  • Facebook
  • Google+
  • Instagram
  • Pinterest
  • RSS
  • Twitter

RECEIVE MY POSTS BY EMAIL!

Interested in receiving my posts by email? This is your chance! Simply place your email address in the box below and I'll deliver each and every post I write directly to your inbox.

Follow Us on Facebook!

IndustryDev

Check Us Out on Instagram!

Load More…Follow on Instagram

Recent Posts

  • How to Set Your Canon Rebel Camera For Continuous Shooting February 18, 2019
  • How to Use the Noise Reduction Feature in Adobe Lightroom February 16, 2019
  • Using the Dust & Scratches Filter to Clean Up a Photograph February 15, 2019
  • Use a Focus Rail For Better Macro Photography February 11, 2019
  • How Do Lens Aperture Sizes Affect ISO Values? February 9, 2019

Most Popular Posts

  • How to Export Video From Adobe Photoshop How to Export Video From Adobe Photoshop
  • How to Set the Photo Quality in your Canon Rebel DSLR Camera How to Set the Photo Quality in your Canon Rebel DSLR Camera
  • How To Stop the Flash From Popping Up On Your Canon Rebel DSLR Camera How To Stop the Flash From Popping Up On Your Canon Rebel DSLR Camera
  • How to Speed Up & Slow Down Video in Adobe Photoshop How to Speed Up & Slow Down Video in Adobe Photoshop
  • How to Resize & Save Files From Adobe Bridge Using Image Processor How to Resize & Save Files From Adobe Bridge Using Image Processor

About IndustryDev

IndustryDev is an online publication that focuses primarily on lovers of the digital world. We write articles that cast a wide net, including those that discuss website development, design and WordPress. We also post, daily, about the image related aspects of the web, including photography and illustration, along with other topics like blogging and SEO.

Read More

RSS IndustryDev Discussion Forum

  • How Can I Set My Canon Rebel T3i to Continuous Shooting Mode? February 19, 2019
  • American Goldfinch Bird Photography Nature Greeting Card with Envelope February 19, 2019
  • Can I Get Rid of Grain in My Photos With Adobe Lightroom? February 18, 2019
  • 6 Incredible Tips For Awesome Black & White Photography February 18, 2019
  • 7 Awesome (and Easy) Landscape Photography Tips February 18, 2019

Tags

Bridge Camera Lenses Camera Raw Camera Settings Channels CSS Dev Tools Graphic Design Hosting HTML Interviews JavaScript Learning Lightroom Macro Photography Masking Night Photography Photoshop Photo Tips PHP Post Processing Selections SEO Shapes Smart Objects Video WordPress

Recent Comments

  • Jay Gaulard on 7 Search Engine Optimization Tips For Small Business: “You are very correct, Mike. I wrote this post a while ago, but it's interesting to follow the trajectory of…” Feb 18, 17:24
  • Mike Khorev on 7 Search Engine Optimization Tips For Small Business: “Onsite SEO is important, but only one piece of the puzzle... It's funny, 10 years ago you would've had…” Feb 18, 16:24
  • Jay Gaulard on How to Reset Edit Settings Back to Default in Adobe Camera Raw: “Hi Charleen, I'm assuming you are talking about the small circle identifier that appears in Adobe Bridge after…” Feb 11, 15:57
  • charleen smith on How to Reset Edit Settings Back to Default in Adobe Camera Raw: “Hi Jay, Your instructions for returning a dng to its original settings were very clear. I…” Feb 11, 15:20
  • Jay Gaulard on How to Export Video From Adobe Photoshop: “Hi Mayur, I've actually had this happen. I just need to remember what was causing it. I'll reply…” Feb 5, 08:13

ARCHIVES

  • 2019: Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec
  • 2018: Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec
  • 2017: Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec
  • 2016: Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec
  • 2015: Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec

Copyright © 2019 · IndustryDev.com Web Design & Photography Blog · About · Write For Us · Contact · Privacy / Terms · Archives