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.

In photography, details are oftentimes lost because of either too much light or too little light in the scene. If there’s too much light, parts of the photo can be washed out looking. If there’s too little light, parts of the photo can be hidden by shadows. If there is both too much and too little light in the same scene, things can get tricky. Oftentimes the details of whatever it is that’s being photographed are still available in the picture, it’s just that they need to be revealed by a talented editor. In general, it’s easier to pull the original scene out of RAW images as opposed to JPEG images because RAW images capture a lot more data than their lower quality counterparts.

Oftentimes, haze, fog, snow or other similar phenomenon has the potential to alter the look of an image. Adobe Camera Raw has done a very good job at combating this type of distraction with their Dehaze tool, but in reality, many other preexisting tools can do a very good job of clarifying what it is you originally took a photo of. And many times, applications like Camera Raw can make a photo looks a lot better than reality.

In today’s post, I’d like to focus on bringing back details to a photo. I have the perfect one in mind too. The image I’ll be working on is almost completely covered in snow, from the ground to the sky. I played around with the image before I began writing this post and I’m fairly happy with how much I was able to restore. For this post, I’ll be using only the Basic panel in Adobe Camera Raw to accomplish my goal. I think you’ll be impressed with the results.

Original Photo

This is the original photo I’ll be working on today. I’m sure you’ll agree that, while looking very interesting as it is, it can use some work in the “recovery of details” department.

When attempting to determine the look you’re going for, think about this type of photo hanging on a wall somewhere. Would you purchase it? If not, why not? Personally, I’d like to see some more differentiation between the snow on the ground and the darkness of the sky. While I understand that there’s snow everywhere, I wouldn’t want to spend money on something where there’s not enough contrast.

The Histogram

I’ve discussed histograms many times on this site before, so I don’t want to go too far into the topic. What I would like to tell you about is how you can alter the positions of some sliders in the Basic panel by simply clicking and dragging the histogram itself.

Take a look at the histogram in the screenshot above. If you look closely, you’ll see a very light vertical band going up and down it’s right side. In Camera Raw, there are five of these bands contained in the histogram and each one controls a different slider in the Basic panel (you can see the bands by simply rolling over the histogram with your mouse). If I were to click and drag this currently active band to the left or to the right with my mouse pointer, I’d be moving the Highlights slider down below. From left to right (darker to lighter), these bands control the Blacks, Shadows, Exposure, Highlights and Whites of the image. It’s important to take advantage of the histograms in cases such as the one I’m up against today because it can reveal glaring situations. As you can see, I have a highlights and whites issue. The entire histogram is slanted towards that side. Since this image is mostly dark sky, believe it or not, I’d like to see the histogram leaning much more the other way. Not all the way, but more than it is now. I need to darken that sky.

Balancing the Histogram

My first goal is to balance out the histogram, which shouldn’t be much of an issue. To accomplish this, I’ll click and drag each section of it until I see more of a uniform curve. Here’s the result of this effort.

This is the resulting photo after this first change.

This first change, in my mind, was merely a correction. Now that this is completed, I think the photo looks much better, but can still use more in the way of making it actually look good. This is where I like to push the limits. By the way, by balancing out the histogram, the only sliders that moved more than slightly were the Exposure and the Blacks. Both moved to the left to lessen the brightness and to add black, respectively.

Making Further Changes

As I go about pushing the sliders in the Basic panel, I have to keep in mind that as I push one, I may need to push another in the opposite direction. For example, I just mentioned that by clicking and dragging the histogram, the Exposure slider was nudged to the left to lessen the overall brightness of the image. Well, from experience, I know that moving the Highlights slider far to the left results in a gain of detail in brighter images. The thing is, when I push that Highlights slider, the overall picture becomes too harsh looking. It’s only when I increase the exposure that things look more normal. So the point is, there’s give and take with this process. Don’t become rigid during it and don’t think anything is ever set in stone.

As it turns out, I ended up increasing the warmth a bit by pushing the Temperature slider slightly to the right for a value of +5. I also reduced the Exposure, increased the Contrast, reduced the Highlights, increased the Shadows, increased the Whites and decreased the Blacks. I also increase both the Clarity and Dehaze. And after all of that, I increased the Vibrance slightly as well. Here’s a quick view of the Basic panel sliders (I took this screenshot before I moved the Vibrance slider).

This is the final image.

I think that looks a lot better. I like the way there’s distinction between the field and the sky now and I also like the way I can see the snow blowing around in the atmosphere. In my opinion, I’d much prefer this image hanging on my wall than the original.

——

I hope I clearly explained how to use Adobe Camera Raw to increase the clarity of an image while attempting to recover details. If you have any questions regarding this post, please let me know in the comment section down below. Thanks for reading!

CSS3 has introduced many really neat features to the playing field, many of which were once (and still are) handled by image editors or JavaScript. And after toying with much of what CSS is now capable of, I have to say, the lines are getting fairly blurred. It’s almost like “coding” an image editor, if that makes any sense.

In this post, we’re going to take a look at some of these features, many of which relate to text, borders, boxes, fonts, media queries and gradients.

Text Shadows

In order to take a first look at text shadows in CSS, I’ll give a code example below and then I’ll discuss what’s happening beneath that.

.text-shadow {
text-shadow: 5px 5px 2px #CCC;
}

Basically, as the name implies, the text shadow property applies shadows to text. The coding of this property in CSS is actually quite similar to giving text shadow values in Photoshop. In both cases, a few things need to be defined.

In the example above, I created a class called, “text-shadow” and applied the text-shadow property to it. I also defined four values of the property. The first two specified properties are required. They define the “X” offset and the “Y” offset, meaning, how far the shadow will appear away from the text in both directions (X is left right and Y is up down).

The next two values are optional. The first is “blur radius,” meaning how soft the shadow will appear. The second is “color,” meaning what color the shadow will display. Like I said, these two values are optional. If the blur radius is not defined, it will default to a zero length value and if the shadow color is not defined, it will inherit the text color value.

So again, in the code example above, the order of the values are x-offset, y-offset, blur radius and shadow color. The first three values are length values and the last one is a color value.

Below, you can find some resources that cover the text-shadow property in CSS:

Box Shadows

Box shadows in CSS are similar to text shadows in that they add shadows to elements. In this case though, the shadow will appear around a box, as opposed to around text.

Again, I’ll give a code example to get started and then I’ll discuss what’s going on beneath that.

.box-shadow {
box-shadow: 10px 10px 15px 20px rgba(0, 0, 0, 0.5);
}

In the example above, the first two values are required. They are, again, the X offset and the Y offset. Both use length values and determine the horizontal and vertical distance of the shadow from the element it’s shadowing.

The third length value is blur-radius and is optional. Just like the text-shadow property, if no blur-radius is defined, it will be set to zero by default.

The fourth value is new to these examples and is called, “spread-radius.” This length value determines how large the shadow can grow or shrink in relation to its element. If this value is left out, it will be set to zero by default.

The fifth value in this example specifies the color of the shadow and is slightly different than the color value of the text-shadow in the first example. In this case, we’re using the rgba color value instead of the hex color value. If you’re interested in how the rgba color value works in CSS, please visit my previous post. Simply scroll down to the “Color Data Types” section.

There is one other value that I didn’t mention in the above example. That value is called, “inset” and must be placed in either the first or last position in the rule. The inset value puts the shadow “inside” and in front of the element, as opposed to “outside” and behind.

Lastly, in my recent post on layout methods using CSS, I remember mentioning that padding and borders add to the actual calculated size of a box. In order to deal with this, the team that manages CSS created a new value called, “box-sizing.” Well, I’m please to tell you that adding a shadow to an element does not affect that element’s width or height. The shadow is actually separate from the element itself, so it won’t push your layout in any direction.

If you’re interested in learning more about or taking advantage of the box-shadow property, please take a look at these resources:

Border Radius

If you’re interested in applying rounded borders to boxes and images, then the “border-radius” property is what you want to use. When using the border-radius property, authors can either write out each rule long-handed or take advantage of the short-handed method.

In the example that follows, I’ll show you what the long-hand method looks like:

In the above example, our box will enjoy rounded corners of 5, 10, 5 and 10 pixels respectively. And if you’ll notice, the modification of the corners rotates around the element in a clockwise manner, as I discussed in my post on the CSS box model.

Now, if we wanted to save our fingers from typing so much, we can use the short-hand method to accomplish the same thing:

.box {
border-radius: 5px 10px 5px 10px;
}

Again, notice how each value will affect the element in a clockwise fashion. And since we’ve got some duplicate values in this rule, we can shorten it even further:

.box {
border-radius: 5px 10px;
}

The above code will give the same rounded borders as our very first example did.

If we wanted to apply the same rounded measurement to each corner, we could simply use one value:

.box {
border-radius: 10px;
}

As you can see, when calculating each corner radius, I used a length unit of pixels (I could have also used ems). If we wanted something more dynamic, we could also use percentage.

.box {
border-radius: 10%;
}

The percentage radius value is calculated based off the dimensions of the element it’s affecting. So if the element is shrinking and growing dynamically on a page, so are the rounded corners.

Are you curious about how designers code image elements to they appear circular on a page? Well, all they do is make sure their element is perfectly square and then apply a 50% border radius to that element. Their code might look something like this:

.box {
width: 100px;
height: 100px;
border-radius: 50%;
}

If you’d like to look into the border-radius property even further, feel free to browse through these following resources:

Gradients

Linear Gradients

Gradients are relatively new to CSS and while some folks may not find them entirely useful, others might need to implement them in something or other.

In the most basic sense, gradients allow us to blend two colors on our web pages, beginning with one color and ending with another. The linear-gradient() function accepts many keywords and values, so looking into it further than what I’m about to post below is suggested, if you’re interested in using this feature on your pages to any great extent.

Like I’ve done before, I’ll post a code example and then go over it below.

.box {
background: linear-gradient(red, blue);
}

In the example above, our element with the class of “box” will display a gradient of red to blue, with red being at the top and blue being at the bottom. By default, linear gradients begin at the top.

If we wanted to reverse the direction of the gradient, we could do so like this:

.box {
background: linear-gradient(to top, red, blue);
}

If you’ll notice, I added the “to top” keywords right before the color values, followed by a comma. Other directions include “to left” and “to right.” If you were interested in creating a diagonal gradient, you can use the keywords “left top” and “bottom right.”

What’s probably the most flexible method of angling your gradients is using degrees. I’ll show you some code that would create a 45 degree gradient.

.box {
background: linear-gradient(45deg, red, blue);
}

If you imagine the gradient beginning at the bottom left of your element, it’s easier to get a handle on where you would be pointing it when using degrees. If you created a 0 degree gradient, it would go straight up, beginning at the bottom left. If you created a 45 degree gradient, like the one in my example above, it would point to the upper right corner. Remember, degrees move clockwise, so the more degrees, the further around the clock you go.

Radial gradients begin at the center of the element you’re applying them to and spread outward. Here is an example of a radial gradient:

.box {
background: radial-gradient(red, blue);
}

Looks just like a linear gradient, doesn’t it?

In this case, the red color would be in the center of the element and it would blend into blue as it travels to the outward edges.

To give a gradient a perfect circular shape, as opposed to its default ellipse shape, we can add the “circle” keyword. Here’s an example of what that looks like:

.box {
background: radial-gradient(circle, red, blue);
}

If we were interested in moving the center of the circle to the top of our page, we could use the “at top” keywords to do so. This is what that looks like:

.box {
background: radial-gradient(circle at top, red, blue);
}

We could also switch out the “top” keyword with bottom, left or right or even add keywords after the “top” keyword. For instance, we could add “right” after “top” and have the center of our circle reside at the top right corner of our element.

If you’re interested in learning more about what the radial-gradient function can do, please visit the MDN page on the topic.

Color Stops

Think of color stops as the colors and positions of those colors that you’ve included in your gradient. If you’ve included only two colors, you have two color stops. If you’ve included three, then you have three – and so forth. Below, I’ll give you an example of a linear gradient with three color stops.

.box {
background: linear-gradient(red, blue, yellow);
}

In the above example, we have a gradient beginning with red and then transitioning to blue and then yellow. The gradient would begin at the top and end at the bottom. It would also display all color stops equally.

If we wanted to alter the center positions of our colors, we could do so be adding a percentage value after each color value. So instead of our red color center having a position of 0% and our blue color center having a position of 50% and our yellow color having a center position of 100%, we can move those positions to anything we want. I’ll show you what I’m talking about.

.box {
background: linear-gradient(red 0%, blue 15%, yellow 100%);
}

In the above example, the center of the blue color will now reside at the 15% mark of the entire gradient. I’m sure you can see the potential here. Adjusting all the values and keywords in this section of this post is really the only way to become familiar with gradients, so I encourage you to have at it.

If you’re interested in learning more about gradients in CSS, please take a look at the following resources:

If you have any questions or comments, please leave them below. Also, if you’d like to learn more about CSS, please be sure to take a look at my CSS category. I write almost every day, so you’re sure to find something you’re interested in.

SEO – An area of WordPress that’s truly fun. It’s definitive, widespread and the rules have been established. There’s probably no larger community of folks on the planet that can guide you and tell you, “Yep, been there and done that.” All the mistakes have already been made, so all we have to do now is listen to what the experts are telling us. And that’s what I intend to do in this post – listen. Well, listen and write.

Zac Gordon, over at Treehouse, recently released a new course called, “SEO For WordPress” and after going through the video titles, I’m excited to get a jump on things. Seeing I’ve been working in SEO since 2004, I’m interested in getting Zac’s take on what’s happening out there. What’s changed? What hasn’t? Is there anything wildly different today than what I’ve already learned yesterday? All good stuff.

The beauty of Zac’s course is that it covers SEO as it specifically relates to WordPress. Themes, menus, plugins, widgets – it all seems to be there. So let’s get going and start learning about SEO and how it can be used best with WordPress.

Writing Awesome Content For Our Blogs & Websites

I think we should start with a discussion about content that’s put forth on the internet. Now, I’m not talking about product content or content that’s introduced for specific reasons, such as banking information or something scientific – What I’d like to discuss is content related to the blogosphere, because that’s easy to understand and I’m sure we can all relate to it.

Those who are in charge out there like to tell us that the content we write is the most important aspect of successful SEO. If we write something that’s not worthy, then we’ll get no love. If we write something that’s worthy, we’ll get all the love that’s due. That’s pretty much where they leave it. And for years, we’ve been attempting to interpret the meaning of what they tell us. Well, let me let you in on a little secret – I’ve been around a long time and I’ve read pretty much every resource on the planet when it comes to SEO and what I’ve found is a common theme. The theme is, “What if I take someone else’s words and mix them up to look like mine?” and “What if I just take pieces of paragraphs from a bunch of different sources and paste them all together on my page?”

It seems as though folks are creating content on the internet for all the wrong reasons. I venture to suggest that if one is creating content in an effort to make money, they aren’t going to have much success. Their heart isn’t into it. But if they’re creating content because of the love of their thoughts in their minds, they’ll eventually create a following. Not many people out there genuinely follow something that isn’t sincere.

I’m sure you get my point. Even if you do, please read just a bit further because I’ve been thinking of this analogy since last night. It’s pretty good.

Let’s say you have a goal to publish a book and sell it on Amazon. Along with your initial goal of getting published and selling a few copies, you want your book to enjoy successful sales for many years to come. In order to achieve both of these goals, you are aware of the fact that you’ll need to develop content that’s going to live between the two covers of your book. You just haven’t decided the best way to create that content. You do have a few ideas though and they are:

1. You know of many authors who have written wildly successful books. You can simply copy the text, verbatim, from one of those books and paste it into yours. Since they were successful, you feel you will be as well.

2. Again, you know many successful authors and have access to their books. You can copy portions of each of their books and copy them into yours, until yours is full. This will make you even more successful since you are compounding their successes into once source.

3. You can write your own book with original thought. Since you are so thrilled with what’s floating around in your head, you’ll have an audience who is thrilled as well. You work and work and work and finally nurture a following who truly admires you for who you are.

Now, let’s go through each one of these scenarios.

In the first case, you can give this a shot, but I’m not sure you’ll get your book published. I can imagine that publishers don’t like thieves and plagiarizers. And even of you did manage to print the book yourself, you wouldn’t get past Amazon’s “standards” gate. Your book would get pulled off the site. Lastly, if you did somehow get past it, you’d be called out as a fraud and would either receive a very low rating on your book or you would enjoy no sales at all. You stole and it’s not you who deserves praise for a good book, it’s the author who you stole from who does.

In the second case, the same thing will happen. People will learn about what you did and will reject any amount of labor you put into it. People admire authenticity and what you put forth was not that.

In the third case, you may or may not enjoy success. That doesn’t matter though, because the work you presented to the world was done in an honest way. Whether your book reviews are good or bad doesn’t matter because you can take any feedback and transform it into a learning experience. Many times, authors aren’t successful after their first try. It takes many efforts to earn recognition as one of the greats.

Do you see where I’m coming from here? Just because we’re on the internet, don’t think the same standards don’t apply. People who read things know what they’re looking for and they can spot a fake a mile away. Don’t be one of those fakes and don’t try to pull a fast one. If you’re not a good writer, practice how to write better. If you’re not great at creating a website to write on, ask for help, pay for a site or learn to build one yourself. Success in life is stemmed from hard work and taking shortcuts is very short lived.

Now, I know I just focused on text throughout my entire spiel regarding internet content. I don’t want to forget about other areas of content that are important to an enjoyable web page visit as well. Zac Gordon describes these areas of content like this (I’ll embellish to add a bit of flavor):

– Create unique and interesting content that makes the visitor either want to come back for more at a later date and/or compels them to bookmark your site and share it with friends.

– Be sure your content is well written and utilizes correct spelling and the proper use of grammar. This goes a long way in being considered a “source” of information on the internet.

– Make use of interesting photos, graphics and well presented video. Rarely does something that’s poorly presented get shared among friends. The web page itself is a reflection on the person who thought it was good enough to share. Make it easy for them and offer them something stunning.

– Be sure your website is functioning correctly and there are no errors in your markup. Be sure you emphasize what’s meant to be emphasized and structure your text accordingly. Be sure your titles, headings and meta data all make sense and are placed appropriately.

– The proper use of keywords and terms are just as important as the content you present. If you know who your reader is supposed to be, offer them a smooth path to travel on when searching for your site. Use the words in your text that you think they’ll type in the search box.

Adjusting Our WordPress SEO Settings

Let’s get back to WordPress. I recognize that what I just wrote above applies to SEO in general, so in this section, I’ll talk about something much more targeted.

Regarding your specific WordPress install, there are two very important fields you need to fill in before any other effort towards SEO is made. These two fields can be found by clicking the “Settings > General” link in the admin area.

If you take a look around the landing page for those links, you’ll see two areas that are called, “Site Title” and “Tagline.” You’ll need to give some thought as to what you’d like to fill those fields in with.

For the site title field, I suggest you name your website accurately. For instance, my website is named “IndustryDev,” after the area I live as well as the industry I’m in. That’s what I used in the site title field. If I was blogging under my own name, I would have filled the field with “Jay Gaulard.”

Regarding the tagline – you have some more flexibility here. This is where you describe what you do and what the purpose of your website is. When I filled in my tagline, I thought about what I wanted my site to be known for, and that’s “Web Design & Development Tutorials.” Short and to the point. If I were blogging under my own name about random events that happen during my day, I probably would have filled the tagline field with something like, “Blogging About My Everyday Adventures” or something like that.

Since this one area of WordPress SEO is so important, I encourage you to take a look at some of your favorite websites to see how they titled their websites. If you can’t see their title and taglines on their regular pages, you can right click your mouse and choose “View Page Source” to see behind the scenes. What you’re looking for is something like this:

<title>IndustryDev - Web Design &amp; Development Tutorials</title>

Making Sure Search Engines Can See Us

This next setting is quick and easy and needs little explanation. The information that surrounds the setting does though.

If you click the “Settings > Reading” link in your WordPress admin, you’ll see a line down towards the bottom that says, “Search Engine Visibility.” Next to that line, you’ll see a checkbox and next to that, you’ll see a line that says, “Discourage search engines from indexing this site.” If you check that box, WordPress will add a noindex meta tag to your code, which will prevent your site from appearing in the search results. The code will look something like this:

<meta name="robots" content="noindex">

Now, here’s the thing about the noindex tag. If you read the text that Google displays on this page, and read it closely, you’ll notice that Google uses the words, “can prevent a page from appearing in.” They also mention that if you place a noindex tag on an already indexed page, they will remove that page from their search results.

Unfortunately, over the past few years, there’s been a huge amount of misinformation regarding the noindex tag. Apparently, folks out there have come to believe, and have spread the idea, that Google completely and totally ignores pages that utilize the noindex tag. What’s more likely the case is that Google, as well as the other search engines, still crawls and indexes all pages they can, including pages that use noindex. If noindex is used, they simply don’t display the page in the search results.

It’s a very misleading topic and one that requires clarification. Now, my view may be pure conjecture, but I’m telling you, I’ve got eleven years experience and I have never, not once, seen one good thing result from using the noindex tag. Here’s what I suspect happens.

– You launch page and include noindex on it.

– Search engine crawls page, if not totally blocked, and includes it in their index.

– Since page includes noindex tag, page will not display in search results.

– Since page is still in index, it’s used for all other ranking purposes.

The bottom line is this: you don’t want to have a website with only a few good pages that are allowed to display in search results, alongside a large number of pages that include the noindex tag on them. The noindexed pages will hurt your site badly. Each and every one holds a value of pagerank and when all your page’s are added up and considered for ranking, your site’s value will be extremely low.

In the SEO course Zac Gordon is teaching on Treehouse currently, he mentions that if you are developing a website and don’t want that site to show in the search results, you should check the box on the settings page I told you about earlier. It’s my opinion that you shouldn’t do this. Instead, you should block the site completely by using the “robots.txt” file (only while in development). This file, when set up correctly, will tell the search engines to not crawl the site at all. To block search engines from your site, include this code in your robots file:

User-agent: *
Disallow: /

WordPress doesn’t include this file by default, so you’ll have to create one yourself. It’s very simple and can be done using any text editor. Once completed, upload it to your site’s root directory.

BEWARE: Leave the box unchecked on your “Settings > Reading” page and steer clear of using noindex – ever. Use robots.txt for blocking search engines instead. I may be the only person on earth saying this right now, but trust me, I’ve learned from many, many years of experience.

Setting Permalinks in WordPress

If you visit the “Settings > Permalinks” page in your admin area, you’ll see some choices for how to set up the URL structure for your pages. By default, WordPress will be installed and use some fairly ugly URLs that include question marks. While these aren’t the worst thing in the world, it’s become common practice to avoid these types of URLs when possible. And in WordPress, not only is it possible, it’s very easy to do.

Personally, I prefer to choose the “Post Name” selection. This is the shortest URL and it’s very easy to remember. I’m not convinced that it makes a difference if you choose something else because I’ve had success with all of them. I think it’s personal preference.

Once you make your selection though, you are most likely going to be asked to add some code to your “.htaccess” file. This file may not exist by default either, so you’ll likely have to create one the same way you created the robots.txt file and upload it to the root directory. The code that you’ll need to add to this file will be given to you at the bottom of the page after you click the “Save Changes” button. Common code looks like this:

Writing Effective WordPress Post & Page Titles

Post and page titles are super important when it comes to SEO. And the best part about them is that they are easy to write in such a way as to establish a high click through rate from search engines.

Have you ever searched for a tutorial on web design? After clicking the “Search” button, I bet you were faced with a multitude of results that looked something like this:

5 Ways To Do…

Top 10 Best Plugins For…

How To Do…

Do you see the theme here? Some of the most popular blogs and websites around the world have figured out that people need help and are looking for a solution to their problems. That’s why these writers and bloggers give clear, concise titles that tell searchers exactly what they can expect in the post they’re about to click through to. And “Top 10” and “Top 5” posts are like candy to searchers. “How To” posts are extremely popular and effective as well – that’s why we’re facing an onslaught of “Answers.com” and “Yahoo Answers” types of sites out there today.

There are a few best practices when it comes to writing a title. If you take a look at Moz’s page on article on title tags, you can check out a few:

– Be Mindful of Length

– Place Important Keywords Close to the Front of the Title Tag

– Leverage Branding

– Consider Readability and Emotional Impact

I highly suggest you visit the Moz page and give it a once over. There’s also a handy tool where you can write your title in to see how it would look on a search results page.

Do Heading Tags Matter For SEO? You Bet They Do

The idea of using headers, or heading tags, on web pages to enhance search engine visibility has been debated for decades. It’s actually one of the oldest arguments out there. And honestly, I’m not sure the debate has ever ended because to this very day, it rages on.

Let me give you my opinion on using heading tags in our WordPress posts and pages. Use them, but use them wisely and sparingly. If you are writing a long post, such as the one you’re reading, the best thing to do would be to break the post up into different sections. Not only does this make reading it a whole heck of a lot easier, but the search engines appreciate it as well. After all, search engines are only computers and when compared to the human brain, they are quite stupid. We need to tell them what we’re writing and how it’s meant to be read.

I wrote a post a while ago with some great information regarding how to structure an HTML web page where I talked specifically about document structure. If you visit the page and scroll down to that section, you’ll see how you can break a lengthy page down into bite size pieces. Even if your page isn’t as long as the one I’m writing right now, you can still offer a bit of semantic understanding to it with the use of heading tags.

There’s actually a great tutorial on the use of heading tags over at the WooRank Blog. In that post, they offer a few rules to live by when writing headers:

– Keep them relevant.

– Keep them consistent.

– Some are more important than others.

– Make them matter.

They also offer some advice for areas of abuse to steer clear of. Check out the post. It’s pretty good.

Regarding keywords in heading tags, I would suggest that you use them. It’s a great opportunity for search engines to see and gauge what your content is about and headers tell them that the words inside are a bit more important than other words on the page. Just don’t overdo it. If you notice my headers in this post, I don’t duplicate keywords and I don’t obviously abuse the words that I choose to include in each element.

The Power of Links in WordPress

Linking pages to one another truly is the power behind the internet. Actually, I think the interconnectivity is referred to as the “World Wide Web,” but you get my meaning. Since the beginning of it all, links have been what makes surfing around so much fun and so helpful. If you can imagine a web with no links, you can imagine something that’s very boring.

When writing WordPress posts and pages, it’s important to link to a few areas. The first area you want to link to is your own material. A good example of this is a few paragraphs up, where I linked to a post I had previously written about HTML document structure. Do you see what I just did there? I linked to the page again.

The reason it’s important to link to your own material is because you’re giving your visitors an opportunity to read further about a particular topic. And as your site grows and as you write more, the more material you can link to will become available.

Also, if you notice the anchor text (the text that is the link itself) I used as the link, you can see that it’s rich with keywords. I didn’t use, “Read More” or “Click Here.” Those types of words don’t give any indication to search engines what the linked to page is about and why you linked to it. If you’d like to learn more about the importance of anchor text and how best to use it, please check out Moz’s page on the topic.

Another important area to link to when writing posts and pages is external websites. Now, you don’t want to go out and start linking willy nilly – you only want to link to sources that you feel will benefit your readers. Every website you choose to link to will be a reflection on you, so choose wisely. If you send a site visitor off to a site you wouldn’t want your mother visiting, you are going to lose a lot of visitors. And I’m sure your reputation will suffer over time as well.

I’m sure you see the benefits of linking off site. If you don’t, rest assured that by doing so, you’ll be building trust with your audience and telling them that you’re not only concerned about your website traffic and retention rate, you’re also concerned about their well being. Meaning, you want them to find what they’re looking for. If you can assist visitors in this way, they’ll appreciate it and perhaps visit you again in the future. Even better, they may bookmark your site or link to it from theirs, which is good for everyone.

Make Your Blog & Website Images Work

Image search is huge. Every day, millions of searches are done for images, where people are looking for something specific. Not everyone always looks for text and paragraphs, so it’s important to boost your SEO efforts by including images in your posts.

There are two things I want to discuss when it comes to adding images to your WordPress posts and pages. The first is the use of the alt attribute. If you aren’t aware of what the alt attribute is, you can read up on it here.

Basically, by adding text to your image alt attribute, otherwise know as “alternative text,” you’re telling search engines what your image is. Since computers can’t actually “see” images the same way we can, it’s important to give them as much information about your images as possible, including the proper keywords that would describe the image as accurately as possible.

The next area I’m going to talk about is actually adding the image to your page. I’m going to assume that you know how to do this. When writing your post and after you click, “Add Media,” you’ll be brought to a page where you can choose from all your stored images. Either that, or you’ll drag and drop an image into the body of your WordPress editor. Either way, on the page where you can select your image, you’ll see an area to the right that’s titled, “ATTACHMENT DISPLAY SETTINGS.” It’s here where you’ll want to take great care.

Under most circumstances, you’ll want to choose the “None” value inside the “Link To” dropdown. If you choose “Attachment Page,” you’ll be essentially creating a new page for each and every image you set this to. This is the definition of “thin content” and search engines don’t like thin content at all. If you have enough of it, you’re entire site ranking will fall and you’ll have a tremendously difficult time getting it back. Heed my advice when I tell you not to add images to their own attachment pages.

Using Video For SEO

The importance of video online has exploded over the past few years. A while ago, I remember reading that Youtube was the second largest search engine on the planet, which is strange, considering not many folks consider the search feature on Youtube when thinking about search engines. Any way you look at it though, websites and brands live and die with video.

If you want to build a brand, use Youtube for your video hosting. They are the go-to when it comes to people on the web who are searching for things to watch. I know of many content creators who are making their livings on Youtube and are most likley either shooting a video or editing one right now. It’s no joke – you can make a lot of money on Youtube.

If your goal is to create video for your own site and host it somewhere else though, you may want to consider a service like Wistia. One of the benefits of using a service like this is that when users make a search in a regular search engine for a particular topic, and you happen to have a video for that topic, the search engine will show your site in the search results, not Wistia’s. This is huge for traffic.

I found a few sites that offer comparisons between Youtube and Wistia. If you’re interested in taking a look at the advantages and disadvantages of each, be sure to visit the links below.

The Effect of Categories and Tags On WordPress SEO

In some cases, category pages can be the primary landing pages for your website. I remember a few years back, I was running a blog where this was the case – by far. The category pages surpassed all other pages on the site when it came to where people visited when coming from search engines.

Now, back in the day, when I had those popular category pages on my blog, I didn’t have any of the options I’m about to talk about next. My category pages simply held a list of posts related to it. As time has passed though, WordPress and many theme and plugin developers have added some rich features to truly enhance the SEO visibility of these types of pages.

When creating a category in WordPress on the “Posts > Categories” page, you’ve got a few features to choose from. Beyond the category name and slug, depending on your theme and plugins, you can choose to list your category as a sub-category of another one and to add a description. It’s only once you create your category and click the “Edit” link that you see the true power of how you can enhance the page.

On the edit page, again, depending on your theme and plugins, you can add title and meta text, page title and description text and various SEO values. With my theme, I can even choose which layout I’d like for each category page.

The reason you want to take advantage of all these features is simple differentiation from your other category pages, as well as your home page. The more different you can make them, the better chance you have for ranking for unique keywords and phrases.

Regarding tags, the same is true. I haven’t used tags in quite a while because they fell out of fashion, but I have seen quite successful websites still using tags to their advantage. If you do decide to use tags, please be sure to use them very sparingly. Many a folk out there have gotten in trouble by creating way too many tags for their rather small WordPress blogs.

Adding Value To WordPress Menus

I have come to love the menu feature in WordPress. It’s a flexible and powerful tools that lets us title menu links throughout our sites pretty much any way we want to.

When adding or editing a menu item on our sites, we have the option to give it any navigation label and title attribute we’d like. Even if we have already set up, for example, a category with a specific name, we can change the text that links to that category. Also, we can add some nice, descriptive text for the title attribute. While this might not have much direct SEO relevance, it will add more targeted text to our pages.

In order to adjust the text I’m referring to, be sure to have some pages or categories already set up. Once you do, head over to the menu area by clicking the “Appearance > Menus” link. On that page, you can organize menu items the way you’d like. It’s after you set them up that you would edit the related text. Simply click the small arrow that’s on the right side of your menu item and fill in the two fields how you see fit. It’s as easy as that.

WordPress Widgets & SEO

Widgets can be quite helpful in building a community around your site. Whether it’s using a widget to place a Facebook “Like” box or a button that leads visitors to your Twitter page, growing your audience using social media can help SEO in many ways. For instance, the more that people follow you on social media, the more buzz there will be about your website online. The more buzz, the more links, the more search engine recognition. So, as you can see, cultivating an audience via as many channels as possible can have compounding effects overall.

——

Wow, this was one of my longest posts ever. I hope you enjoyed it. If you have any questions or comments, please leave them below. If you would like to read some other posts regarding WordPress, you can do so by clicking my “WordPress” link up at the top of this page.

Most of the PHP code you’ll need for your WordPress install can be found in the codex. The codex is simply a huge repository of instructions, code and support. It’s a wonderful place for WordPress developers to hang out because, not only does it contain much of what you’ll need to answers questions and solve problems, it’s also a really nice learning opportunity. The more you browse, the more you begin to understand the inner workings of how much of WordPress is assembled.

While the codex is a large area with tons of code, in this post, we’re only going to concern ourselves with theme development. So, if you scroll down towards the middle of the main codex page, you’ll see a heading called, “Working With Themes.” We’ll be in there.

Template Tags

If you’ve ever used jQuery, you may be familiar with the idea behind how WordPress template tags work. Basically, instead of forcing a website developer to write out long blocks of JavaScript code or a WordPress developer to write out long blocks of PHP code, the developers behind both jQuery and WordPress have done that already. They’ve written the code behind the scenes and condensed it into nice, pretty keywords. When we call these simple keywords in our code, we’re telling the behind the scenes code to wake up and do what’s it’s made to do.

Inside the WordPress codex, there’s an area that lists all template tags by category. If we visit the page, we can locate the category we’re interested in and browse through each template tag that category contains. If something looks helpful, we’re able to click that tag and visit the actual tag page that contains all the information related to it.

By default, template tags do something. They either return something short and simple or return something much more complex. To take advantage of the short and simple tags is easy. You simply place the tag in your PHP code inside your template file. You may end up with a URL or a title or something as straightforward as that. Taking advantage of the more complex tags requires a bit more thought. In some cases, you’ll have to tell WordPress exactly what you’re interested in accomplishing by using what are called, “parameters.”

For instance, if we look at the “the_title” template tag, we can see that it accepts three parameters – $before, $after and $echo.

&lt;?php the_title( $before, $after, $echo ); ?&gt;

Each of these parameters plays a different role. For many template tags, parameters are optional. For others, they’re required. Fortunately, all optional and required parameters are listed and described on its related template tag page. In this post, I’ll go over some examples of what I’m talking about.

Conditional Statements & Loops

This is the part where you wish you had programming experience. Not that it’s immensely difficult or anything like that, but I think things would progress rather smoothly with the understanding of a few coding concepts, such as the ones you acquire when studying either PHP or JavaScript. Fortunately for us, these concepts are found in the “101” level for both of these languages, so once you become comfortable with the basic ideas behind conditional statements and loops, the rest just has to do with syntax. Before we begin though, let me give a few definitions:

Conditional Statements:In computer science, conditional statements, conditional expressions and conditional constructs are features of a programming language which perform different computations or actions depending on whether a programmer-specified boolean condition evaluates to true or false. (source)

Loops: In computer programming, a loop is a sequence of instructions that is continually repeated until a certain condition is reached. (source)

The foundation of conditional statements (or conditionals) and loops throughout much of programming is common. And as I stated above, the concepts aren’t all too challenging to grasp. In the most basic sense, in WordPress, a conditional and loop is constructed something like this:

IF posts exist and WHILE they exist
// DISPLAY CONTENT
ELSE
// DISPLAY NO CONTENT MESSAGE

All the information on WordPress loops can be found in the codex. And lucky for us, I’ve already written a fairly in-depth post that covers some of the ins and outs of the loop.

WP_Query

A while back, I wrote a post that covered a bit of working with WordPress templates. In that post, I talked about something called, “WP_Query.” WP_Query is the ultimate when it comes to making your WordPress loop output a certain way. It can filter which posts display on a certain page, sort them a specific way, display posts written by one or many authors and more. It really is a tool that needs to be worked through. The codex page I linked to above is a long one and gives great examples of how WP_Query can be used.

Instead of writing any code examples, I’ve decided that linking to external blog posts might be more helpful when it comes to talking about this topic. Truthfully, a conversation on WP_Query is a post unto itself and I think it’s beyond the scope of what I’m talking about here. So, if you’re interested in delving deeper into WP_Query, please take a look at the resources below:

I know this was only the beginning of a chat regarding the use of PHP in WordPress and that’s why I intend to continue writing on this topic in future posts. For now though, if you’ve got any comments or questions, please leave them below. Also, if you would like to browse through my articles on WordPress, please take a look at my WordPress category.

If something is all the rage these days, it’s got to be website layout. I suppose layout has always been popular, but with Google’s recent “Mobile Friendly Update,” the topic of layout has increased in importance exponentially. I wish I had ridden that wave, because there was, and still is, tons of work to be done bringing the world’s websites up to snuff.

In this post, I’m going to go over some basic principles of website layout using CSS. The whole idea isn’t terribly complicated. It’s just that there are a few areas that you need to keep in your head when positioning elements on a page. If you’re interested in making a website mobile friendly, don’t despair – I’ll be writing a whole bunch of posts on that topic in the future.

Setting Box Dimensions

Let’s say we’ve got a paragraph of text that’s held inside a div element. The sizing for that div element would be relative to the text that’s held inside. As the page shrinks and expands, so does the width and height of the div element. This is the default way boxes are sized in CSS.

If we wanted to add some more control to the sizing of our box, we can take advantage of two properties. These are:

width: The width property tells the browser what we want the width of our element’s content area to be. Remember, the content area is the innermost area of a box, minus the padding, border and margin.

height: The height property acts the same way as the width property does, but controls the height of the element’s content area. All the same rules apply.

The initial value of both of these properties is auto, meaning (like I discussed above), the width and height will adjust as the browser sees fit, based on the size of the browser window and the content the element is encapsulating.

Both of these properties use length and percentage values to complete the CSS rule. These values would include pixels (for precise measurement), percentage or ems (for more flexibility). Here’s an example of what width and height properties look like:

div {
width: 100%;
height: 850px;
}

When laying out a web page, designers often run into an issue when establishing width and height properties for an element. I’ll tell you what I’m talking about.

Let’s say you’ve got a container div with the width of 1000 pixels. That CSS code might look like this:

.container {
width: 1000px;
}

Now, let’s say you’ve got two boxes inside that container that you want to use as columns on your page. This means that the intended use will be boxes sitting side by side. Take a look at this code:

As you can see, these boxes fit perfectly inside their container element. The problem is that if we fill these two column boxes with content, that content will be touching the very edges of the boxes, making the page look awkward and tightly stuffed. This is exactly what the padding property was created to alleviate.

So, like any good designer, we add some padding properties to our boxes.

That should fix things, right? Well, if you refer back to what I wrote in my previous post, you’ll see that we’ve actually pushed our boxes out of their intended areas and have left ourselves with stacked elements, instead of elements that sit side by side. Why did this happen? Instead of creating two boxes that total 1000 pixels (800 + 200), we’ve created two boxes that total 1020 pixels (800 + 10 + 200 + 10). This is annoying, to say the least. And padding isn’t the only culprit for messing up our design – borders and margins have the same effect. Remember, padding, borders and margins occur outside the content area of a box, therefore those values get added to the total width or height of our box.

Using Box Sizing and Max Values

To deal with the oddities that adding padding and borders to a box can cause, the fine folks who created and released CSS3 have included a nice new property for us to use with our designs. This new property is called, “box-sizing” and essentially keeps our boxes sized according to the widths and heights we declare, adding any padding and border values to the inside of the boxes, instead of the outside. So instead of our example above resulting in a box width total of 1020 pixels, the total would remain at its initial 1000, just the way we intended it to. But just as a reminder, any padding and borders you add to your box will decrease the size of your content area.

The most usable values for the box sizing property are:

padding-box: Our initial box size dimensions include the padding values we declare, but don’t include border or margin values.

border-box: Our initial box size dimensions include the padding and border values we declare, but don’t include margin values.

For more background and information on the box sizing property, check out these resources:

By implementing the above code in our stylesheets, we don’t have to concern ourselves with utilizing the box sizing property for every element we’d like to size this way, causing very redundant code.

Max Width

I’d like to take a moment to talk about two really great tips that will assist you with creating a responsive design for your websites. The first one has to do with the use of the “max-width” property.

Let’s say you set your container element to a width of 95%. That works fine until you see someone browsing your website with one of those enormous monitors. Of course, seeing your beloved site design stretched out three feet wide causes a bit of dismay, so you decide to take advantage of max width and adjust your code to look like this:

.container {
width: 95%;
max-width: 1000px;
}

Now, when your site is viewed on a larger monitor, the width grows no larger than a maximum of 1000 pixels. So, what is max-width? Well, the max-width property is used to set a maximum width for an element. It’s value overrides the width element’s value and keeps designs looking great.

The second tip I’d like to share is one that allows your images to become fluid in your layout. If you’ve ever seen a site design with images that shrink and grow, relative to the size of the browser window the site is being viewed on, you’ve seen the max-width property in action. For images though, things are a bit different. In order to make the fluid sizing work correctly, you’ll need to set the image type selector to a max width of 100%. Here’s what that looks like:

img {
max-width: 100%;
}

Backgrounds

Color

Many elements in our HTML pages can hold background properties. I’ll talk about some of them in the next few sections, but the one I’d like to go over first is the “background-color” property. The idea behind the background-color property is pretty easy to grasp. Yes, you guessed it – this property sets the color of an element’s background and uses many of the color data types I discussed in one of my previous posts (scroll down to the “Color Data Types” section). I’ll give you some examples of what types of values you can use below. These are the most popular:

As you can see, the typical background color values used are color keywords, rgb values and hex values.

Image

If you wanted to go one step further, you can easily utilize an image as an element’s background, instead of a color, by using the “background-image” property. The syntax is slightly different, but it’s still straightforward. Here is an example of the code you would use to apply an image as a background:

I gave two different examples above. They both use the “URL function” to direct the website visitor’s browser to the specified image to be used as the background. In the first example above, I specified the image using an absolute URL and in the second example, I specified the image using a relative URL. If you aren’t familiar with the difference between absolute and relative URLs, please review this resource.

Image Size

When setting a background image, the image may not display exactly the size you’d like. Most likely, you’ll either find that you’re image is too small and tiling (by default) or too large and overflowing the element’s bounds. This is where the “background-size” property comes into play. By using the background-size property, we’re able to vary our image size in a variety of ways – actually, quite a few ways. I’ll only go over a small number of them below, but if you’re interested in studying this topic in further detail, please visit the reference I just linked to above.

Now, there is something you need to keep in mind when setting a background image size. When using percentages, our background image size will be relative to its parent container. This isn’t new, I know, because I discussed this idea earlier in this post. I just felt as though it needed coverage.

If your image is too large for your element’s area, you can use the “cover” value to proportionally adjust the image’s size in relation to the element’s size. This means that the background image will shrink to fit the element.

Repeat

As I just mentioned, the default value for a background image is “repeat.” What that means is that if an image is too small to completely fill in an element’s area, it will repeat both horizontally as well as vertically. Now, this may not be ideal for many designers, so it might be wise to take advantage of CSS’ “background-repeat” property. To discuss this property, I’ll give some code examples below and then talk about them after that.

Like the background-size property, there are many more background-repeat values available for use. This is a sample of them. If you’re interested in learning more about the others, please visit the resource I linked to above.

In the previous code example, the “repeat-x” value limits a repeating background to only the horizontal axis, meaning, the image will only repeat left and right. Not up and down as well. If you’d like to limit the image repeating to the vertical axis, you would use the “repeat-y” value and if you’d like to stop your image from repeating all together, you would use the “no-repeat” value. By using no-repeat, you’ll be left with your single image that’s most likely not filling the entire element’s area.

Position

Let’s say you decided to use the no-repeat value for your background image. If you did this, you’d notice that the image is hanging out up in the upper left corner of your element’s content area. That’s the default position of the image. Again, this location might not be ideal for many designers and if it isn’t, they can take advantage of the “background-position” property, which allows for changing the position of the image in relation to the parent element’s area. I’ll give some examples of this property below and go over what each means below:

Actually, I’m not sure I even need to clarify what the above values accomplish. They’re fairly self explanatory. The only one that may be a challenge is the last one that uses percentages. In that case, the 25% simply moves the upper left corner of the image over to the right by 25% of the parent element’s content area and the 75% moves the same part of the image down 75% of the content area.

Shorthand

Wow, we went over quite a few background properties in this post so far. If we were to write all these out like I displayed them above, that would certainly be a lot of writing. Luckily, there’s a shorthand property available that cuts out a lot of writing. I’ll give an example of what that shorthand might look like:

background: blue url(../img/background.png) no-repeat center / cover;

This one background property applies all the values we discussed above to a single rule. Now that’s efficient.

Floats

One of the most popular layout methods available in CSS has to do with “floats,” or floating elements. This method has been around as long as I can remember and I’ve used it in numerous projects. While it does have a few drawbacks, it’s quite effective in what it’s meant to do – and that’s position elements where a designer would like them.

If you remember back to my previous post on the CSS box model, you’ll recall that I discussed inline elements and block-level elements. Basically, inline elements follow each other all the way down the flow of the page, sort of like a snake. These types of elements, if small enough, can travel like words in a paragraph, side by side, until they reach the end of the line. Once that happens, they begin a new line and start all over again.

Block-level elements are totally different. With these types of elements, it’s as though someone hits the enter key every time they type a word. They don’t travel down the page like a snake – they stack on top of one another and create a column, no matter how small the “box” is. That’s the difference between inline elements and block-level elements. Both have their place in page layout.

Sometimes, when positioning elements on a page, a designer wants to place block-level elements next to each other, as opposed to on top of one another. Without the use of floats, this can be a challenge.

Let me give you a code example and when I’m finished with that, I’ll tell you what’s going on:

.left-column {
width: 48%;
}
.right-column {
width: 48%;
}

Let’s pretend that the two classes above are applied to two div elements. Under normal circumstance, written like this, these two elements would stack above and below one another, even though they only consume less than half of the width of the entire parent element. This is because div elements are block-level elements. Remember, block-level elements take up the entire width of their parent element, no matter the stated width of the element themselves.

In order to work around this issue, we can use what’s called a “float.” By using a float, we can circumvent the traditional block-level challenges and essentially turn our block-level element into an inline one.

So, if we took advantage of the float property, our new code would look like this:

Clearing Floats

As I mentioned above, using floats as a layout technique has its drawbacks. One of those drawbacks is that once you float an element, you take it out of the normal flow of your page. While a floated element will remain situated inside a block-level element, code-wise, the element it’s inside, may “collapse,” meaning the floor of the surrounding element may rise and occupy the same space as the floated element. Its content will likely overlap, hide behind or wrap the floated element. Any way you look at it, it’s not good. It’s sort of like playing with blocks as a kid. Imagine trying to stack blocks on top of each other and instead of stacking, they kept melting into one another.

There is a technique that’s used to, what we like to call, “clear a float.” Basically, we can use the “clear” property to put things back where they’re supposed to be. Take a look at this code:

<div style="clear: both;"></div>

In order to clear a float and allow the parent element to surround the floated elements the way it’s supposed to, all we need to do is add this bit of code after our last floated element. It’s that easy.

There is another method that the pros like to use. Take a look at this code:

.group:after {
content: "";
display: table;
clear: both;
}

Instead of adding an new element to your HTML code like the method I first described, all you would need to do is to add the “.group” class to any parent element that you’d like cleared. This will have the same effect as the first method. So basically, the parent div in our HTML code would look like this:

It’s the strangest thing – since I’ve begun delving into the world of coding, I’ve heard very little in terms of PHP. It seems that the majority of folks who are attempting to get into this field are more concerned with JavaScript, Python and the plethora of tools that emerge daily. That strikes me as odd, considering how prevalent PHP is on the web. I’ve been working online since the beginning of the century and right behind HTML and CSS, PHP has been where it’s at. To each their own, I suppose.

Treehouse has finally released their latest WordPress course by Zac Gordon, called, “PHP for WordPress.” I’ve been looking forward to this course because, while I’m taking courses in straight up PHP as well, learning PHP specifically as it relates to WordPress is going to be a huge time saver. Since WordPress will be my primary focus moving forward in life and since there are only so many hours in the day, learning advanced PHP probably isn’t in the cards. Getting a grip on what levels of PHP are used by WordPress developers will help immensely.

With that in mind, let’s get started with my notes for Zac’s new course.

PHP Files

If you’ve looked into working with PHP at all, you most likely understand that the files used with PHP, end in .php. Within these files, you can write both HTML and PHP. Some applications use only files that end in .php for every single file they use.

Inside WordPress, there are three primary areas that contain PHP files. They are:

Core Files: If you have no idea what these files are, don’t touch them. These are files that run your installation of WordPress. If you go ahead and edit any of these files and you aren’t a WordPress core developer, you’ll most likely break your install. Much like with any CMS, these types of files run behind the scenes and aren’t meant to be edited by theme developers and the such.

Theme Files: These files are the ones you’ll most likely concern yourself with when developing for WordPress. Theme files control the look and function of the front-end of your WordPress install. They contain HTML and PHP code. In this and later posts, we’ll be talking a lot about theme files in WordPress. If you’d like to see some articles where I’ve already gone into some pretty good detail on this, check out my posts on WordPress.

Plugin Files: Unless you’re a plugin developer, don’t touch these files either. These types of files contain HTML, PHP, CSS and JavaScript. You may want to mess around with these types of files if you’re trying your hand at creating a WordPress plugin or are editing something in someone else’s plugin.

Now that we’ve got that out of the way, the question is, “I want to work on those template files. Where the heck are they?” If you look at an install of WordPress, you’ll see a bunch of files and folders. You can safely ignore mostly everything you see, except for the “wp-content > themes” directory.

If you look inside the “themes” directory, and you’re running a basic install of WordPress, you’ll most likely notice a few default WordPress themes. It’s common for folks to want to modify these themes to make them more suited to their own website, but there are a few words of caution that come with modifying default themes – at times, these themes are updated by the WordPress core developers. If you edit any of these “parent” default themes and the theme is automatically updated, those updates will be written over, meaning all your hard work will be lost. It’s better, and wiser, to create a “child” theme that’s not written over during a theme update.

For example, if you have a theme called, “twentyfifteen,” you shouldn’t edit any files directly in that theme. Instead, you should create a new directory called, “twentyfifteen-child-theme” and copy the file that you’d like to edit, from the original directory, to your new directory. Once it’s there, edit away. WordPress will automatically detect a new file and use it when displaying your website.

Editing Theme PHP Files

When it comes to editing WordPress files, we have a few choices. We can either set up a local server environment on our computer and work from that, work directly from a live server or work on our WordPress files locally and upload them to a live server piece by piece. Let’s go over each option.

If you wanted to go ahead and set up a local environment, you’ve got some choices. They are:

There are more solutions than this, but what I’ve listed here is a good start. Basically, you’d set up a server environment to do your editing and creating from and once everything looks and functions as you’d like, you would upload the entire project to your live server. This is, obviously, the safest way to go about working on a website because of the division between a production environment and a live environment.

The next option you have for editing WordPress PHP files is to work directly from a live server. Once you’ve got WordPress installed, you could either head to the “Appearance > Editor” area in the WordPress admin and have at it. You could, alternatively, use an FTP client to edit the PHP files directly. This would be considered the least safe option there is for editing files because of the lack of the “undo” feature. If you write some code that doesn’t work or code that is way off, you’re going to have a tough time tracking down or reversing your errors.

The last option we have to editing our project is to have a WordPress install live on a server and a backup copy stored locally. This is a mix between the two previous options because you can edit files locally, with all the safety that comes with that, and upload them to a live environment when the files are ready.

Writing Actual PHP

Whichever choice you make, there’s going to come a time when you need to write actual PHP code. I already discussed that PHP files are regular text files that use the .php extension, but I haven’t talked about the other requirement that’s necessary to make your file truly functional PHP. This other requirement is called the “PHP block,” which is essentially a sort of “container” you would write your PHP in.

There are a few rules we need to follow when coding PHP files. The first is that if we’re coding exclusively in PHP (meaning the entire file is PHP code), we can open the PHP block at the beginning of the file and close it at the end. I’ll give an example of what PHP opening and closing tags look like here:

<?php
// CODE GOES HERE
?>

The second rule is that if we’re mixing HTML and PHP code in the same file, we’re going to need to open and close PHP blocks multiple times. Here’s an example of that:

This is some sample code from a footer file in a WordPress theme. What’s important to recognize is the separation of HTML code and PHP code. You can see that it’s PHP code from the opening and closing PHP tags. These are called, “PHP blocks” and may be numerous in number as files get longer.

Remember, if you want to include PHP code in a file, the file has to end in .php. If it ends in anything else, it won’t work. Also, any PHP code needs to be encapsulated inside a PHP block. If it’s not, you’re dynamic PHP code will display as regular text.

Some Basic PHP Syntax

In order to get your PHP functioning correctly, there is some basic syntax that needs to be adhered to. I’ve discussed this in one of my posts on PHP, so if you’d like to read about that, please do so here. Towards the bottom of that post, I get into syntax. If you’d like to read about general PHP development, please take a look at my PHP category.

In CSS, the box model is where we start to have fun. It’s the basis of page layout, so it sort of constitutes the building blocks of what our pages will look like. The box model isn’t difficult to understand either, once we grasp a few key concepts.

In the most basic sense, the box model applies to each and every element on an HTML web page. Included in the box model are both inline and block-level elements. An inline element occupies only the space bounded by the tags that define the inline element, while a block-level element occupies the entire space of its parent element (container), thereby creating a “block.”

To explain this a bit better, inline elements can reside inside an HTML document similar to how a word resides inside a paragraph. It only takes up the space of the element (or word) itself. “The boy has red hair.” Think of the word, “boy” as an inline element. It goes with the flow of what’s around it.

A block-level element takes up the entire line, or space, from side to side, within its parent container. Take a look at the paragraph before this one. Now take a look at this paragraph. Notice how they both consume the entire row, from side to side. Block-level elements stack upon one another. It’s as if there is a line break in between each of them.

All in all, each element on a page is considered a box. To start with, if a box is empty on a page, it’s invisible to the eye, meaning a user won’t be able to see it. The empty box would be considered the content area. If we put something inside the content area, such as a sentence or an image, we’d have a visible box. No spacing or formatting would be applied to it.

Before reading the sections below, I suggest you take a quick look at this MDN page because it displays a nice example of what a block looks like and it separates out each level of the formatting I’m going to discuss next.

Padding

If we wanted to adjust the spacing of our box, we can apply a bit of formatting to it by way of padding. What’s padding? Well, padding inside a box is the space that’s between the content area and the edge of the box itself. It’s a buffer area, that allows the content of a box to distance itself from what’s outside the box.

I’ll give an example of some code below. This is the basic syntax for padding and it will be applied to a div element.

div {
padding: 10px;
}

In the example above, the content inside the div element would be padded by ten pixels on every side. Next up, I’ll show you how to pad something side by side.

The code above would pad the content of the box exactly the same way as the first example. You can see though, if you wanted to adjust the distance of each side, you could easily do that by giving different values for each property. If you have identical values for the top and bottom of the box and two different identical values for the left and right sides of the box, you could write some shorthand code like this:

div {
padding: 10px 15px;
}

The first value would pad the top and bottom and the second value would pad the left and right.

div {
padding: 10px 15px 20px;
}

In the example above, the first value would pad the top of the box, the second value would pad the left and right sides of the box and the third value would pad the bottom of the box. If we wanted to continue our shorthand method of padding with unique values for each side, we could do it like this (a shorthand way to accomplish what the second example did):

div {
padding: 10px 15px 20px 25px;
}

The way this works is like this: each value in the rule above rotates around the block in a clockwise fashion. So, 10px would be the top, 15px would be on the right, 20px would be at the bottom and 25px would be on the left.

Borders

When it comes to adding borders to our boxes, much of what I covered above applies. The majority of what changes has to do with the additional rules we are about to take advantage of. Let me show you some code below:

As you can see, instead of simply adding a border width, which would be comparable to the rule for padding, we’re able to designate a style as well as color. For lots of great details on these properties and values, please take a look at this page.

What I’d like to show here is not so much about the micro details of all the possible values we’re able to give our properties, but more about how to go about writing the rules themselves. For instance, let’s say we’d like to vary what’s displayed, regarding borders, for each side of our box.

Now, as you can see from the code above, we can give each side of our box a unique border property. And just like the padding examples above, the application of these properties flows around the box in a clockwise fashion.

If we were interested in sticking with the same border values all the way around our box, we could skip writing out three rules and simply write one rule in shorthand. It would look something like this:

div {
border: 5px solid #cccccc;
}

In the above example, I created a border with a width of 5px, a style of solid and a color of grey.

Now, let’s pretend that we only wanted to have a top border. We can accomplish this by using the same shorthand as I just showed, but by adding a few keywords in the property:

div {
border-top-style: 5px solid #cccccc;
}

Now the box would only have a top border with the values I discussed previously.

Margins

The wonderful thing about margins is that they are strikingly similar to padding. But instead of padding the content inside our box (squeezing our content area), we’re buffering space outside our box, pushing it away, (or drawing it closer with negative values) from other elements on the page. So, to recap: padding inserts spacing inside the box edges and margin adds spacing outside the box edges.

Let me give you some code examples so you know how to write margin properties:

I think you see where I’m going with this. If you re-read the padding section above and replace all instances of “padding” with “margin,” you’d be all set. There is one thing I’d like to fill you in on though. With margins, if you wanted to center a block-level element on the page, you could do it with a value of “auto.” So take a look at this:

div {
width: 50%;
margin auto;
}

In the above example, we have a div element that only takes up half the width of the page. To center it, or give the same margin value on all sides, we use the “auto” value.

Display

For the final section of this post, I’d like to discuss display values. While I won’t go into minute details here, I will cover a few of the more popular values you may find or might want to use in your own designs. For a full immersion into the CSS display property, please take a look at these resources:

The four values I’d like to go over are “none,” “inline,” “block” and “inline-block.” These are the most prevalent on the web as well as the most useful. In order to keep things simple, I think I’m merely going to give a definition of each value below.

None – When using the none value with the display property for an element, that element will become invisible. All descendant elements will become invisible as well.

Inline – If you apply an inline value to an element that comes with a block-level value by default, you essentially switch the block-level attribute to inline. So, if you were to use an inline value for an H1 element, that heading would fall into the flow of the document, as opposed to following the standards for block-level elements.

Block – The display block value is the opposite of the inline value. This value switches an inline element to a block-level element, giving it the properties of that.

Inline-block – This value changes an element’s default value to an inline-block value. In essence, this value displays an element as an inline-level block container. It maintains the characteristics of a block-level element, but flows with the document like an inline element does.

——

If you have any questions or comments regarding this post, please leave them below. If you would like to read more about CSS, be sure to check out my CSS category. I write almost every day and it’s growing by leaps and bounds.

In this post, we’re going to set up the template files necessary to make a fully functional blog section on a WordPress site. We’ll also configure the admin area to allow for what we’d like to happen. This isn’t complicated, but there are a few areas that need to be covered. Our goal here is to create templates for the blog homepage, the blog posts themselves as well as a blog archive page.

Setting Up Our Blog Home Page Template

If you take a look at the WordPress hierarchy, you’ll see that, in order for us to create a template for our blog index page, we’ll need to name it “home.php.” This is what’s required for consistency with the WordPress naming convention. By naming our file home.php, we’re telling WordPress what template we’d like to use for our purposes.

Once we’ve got our file named and saved in our theme directory (it can be blank at this point), we can go ahead and adjust a few settings in the admin area of our install. The first thing we need to do is to actually create a page named “Blog” in the “Pages” section of the admin. By doing this, it’ll give us something to choose from next.

In this next step, we’re going to tell WordPress which page it should use for our blog homepage. Basically, this is sort of a phantom page that we need to point to that will use our home.php template file we just created. To do this, we can either go into the “Settings > Reading” area in the admin and choose our page under the “Front Page Displays” area or we can use the WordPress Customizer. If you decide to use the customizer, navigate to the “Appearance > Customize > Static Front Page” section and click around a bit. You’ll see exactly what to do. Personally, I’d get used to using the customizer if I were you, because that seems to be where WordPress is heading for many of these types of settings.

Lastly, we need to add our newly created “Blog” page to our menu. To do this, navigate to “Appearance > Menus” and add the page to the appropriate menu.

Basically, what we did here, if we go backwards, was to create a new link in our menu that will bring us to our blog section. In order for something to be in that section, we needed to create a page called “Blog.” In order for the “Blog” page to be considered as the home page for our section, we had to tell WordPress about it in the customizer. Lastly, in order for us to see the page as we’d like to see it, we created a template file called, “home.php.” Next up, we’ll code the home.php file.

Adding Code To Our Blog Home Page Template

Coding our blog home page is much like coding other WordPress template pages. There may be a few more areas you’d like to customize, but by and large, it’ll look familiar if you’ve read some of my other posts.

I’m going to show you some code below that you may want to include on a home page. I’ve stripped out all HTML (that’ll be up to you), so what we’re left with is only PHP. Below the code, I’ll explain what’s going on any what each piece of code does. I’ll also take advantage of commenting some of the code.

If you look at the top and the bottom of the code example above, you’ll see where I’ve “included” the header and footer files. To do this, I used the “get_header” and “get_footer” functions. Similar to these functions is the “get_sidebar” function. Since I already covered this in a previous post, if you’re interested in how these functions work, please read that post.

After we include these template file, we’ll begin our if statement and while loop. Basically, we’re telling WordPress, “if” we have posts, do this. “If” we don’t, do something else. We’re also telling it, “while” we have posts, keep looping through them until we don’t have anymore. You can see where I commented the relevant areas of the code for this. I wrote about the WordPress loop in a previous post as well, so if you’re interested, you know what to do.

Moving along, you can see the “post_class” function. This is simply to add more granular control over our classes for CSS. This is a styling issue. You can read more about this function here.

On the next line, we’ve got the “the_permalink” and “the_title” functions. The the_title function displays the title of the post and the way we’ve got it set up, the the_permalink function links the title to the post page itself.

After that, we’re using the “the_excerpt” function to display an excerpt of our post content. There’s a bit of drama that comes with this function, so we’ve employed the use of the “get_the_excerpt” as well as the PHP “strip_tags” function, which strips HTML and PHP tags from a string. The reason we had to use these additional functions was because by default, WordPress sends out the excerpt formatted in paragraph tags. This can alter the text appearance, so it was necessary to clean it up and then re-format it inside our own HTML (not shown).

In the next line, the “get_avatar” function displays the avatar associated with the author’s email address.

If you’ve been on the internet within the past twenty years, you’ve certainly seen posts written by various authors on the same website. Many of these websites have links to author pages that filter all posts down to a specific author. In WordPress, the “the_author_posts_link” displays that link to the author page.

Similar to the previous function, the “the_category” function links to the specific category that the post belongs to.

If you were to write multiple posts on the same day and were to utilize the “the_date” function, the date would only display for the first post iteration inside the loop. To work around this, you can utilize the “the_time” function and format it to show the date.

The “the_post_thumbnail” displays the featured image for a specific post. As you can see, we use the “get_the_post_thumbnail” function in our “if” statement. Basically, we’re checking to see if a featured image exists and if it does, pull it out and display it. If an image doesn’t exist (no string is returned), move right on by.

Adding Code To Our Single Post Page Template

To work with a generic single blog post template file, we’re going to need to create it and name it “single.php.” This will tell WordPress that we want this particular template to be use to display our single post posts.

In the code example below, I’m going to do the same thing as I did above. Luckily, there won’t be nearly as much writing as before because, as you might have noticed, much of the template code is identical or similar to what we used above. Only a few things have been changed and I’ll go over those areas below.

As you can see, we’ve removed the_excerpt and instead, included a function called, “the_content” below the featured image (if there is one). Most simply put, this function will display the content of a blog post.

After the post content, you can see that we’ve added a new function, called, “comments_template.” This functions loads the comments template inside either a single post or a single page. It’s the comment sections that we’ll cover next.

Reviewing the Comment Template

As you can see in the previous section, we’ve already added the code to include our comment section. For the average person, this is all you would need to do. Since comment templates are sort of complex, we’re not going to get into their actual code. I can tell you though, if you did want to add your own comment template, you can do so by creating a file called “comments.php” and WordPress will pull that template in, instead of its default template. You would do this if you were creating a plugin or a custom comment section or something like that.

Adding Code To Our Archive Template

If you take a look at the WordPress hierarchy, you’ll see that the “archive.php” template is used for a wide variety of pages, including the author, category, date and tag archives. It’s a nice catch-all file for handling very similar pages.

The archive template is actually very similar to the “home.php” file that we created earlier. So similar, in fact, all we need to so is add one function to it and call it a day.

The way we’ll do this is to create a file named “archive.php” and copy the contents of “home.php” into it. Directly above the loop, we’ll add this code:

<?php wp_title(''); ?>

Again, you’ll need to format the “wp_title” function the way you see fit. What this code will give you is the title of the page you’re on. So if you’re looking at an author page for “Jay Gaulard,” you’ll see “Jay Gaulard” written above the posts. This is true for dates, categories and tags as well.

Now, just to let you know, if you were to amend this code with adjacent text like this:

<?php wp_title(''); ?> Blog Posts

You may have a more descriptive title.

——

I’m going to stop here. I hope I’ve given you some good information in this post. I know it’s helped me immensely by writing it out. If you have comments or questions, please leave them below. Also, if you’re interested in more posts that cover WordPress template files or something similar, be sure to check out my WordPress category.

If there’s one area of CSS that confuses me, it’s got to do with values and units. Especially since the onset of responsive web design (mobile), varying screen resolution, the plethora of screen sizes, etc… What once was a pixel displaying on a desktop has taken on new life. There are considerations today that we once hadn’t contemplated. But, I suppose, like everything else, we’ll adapt.

Values

If you remember back to my previous post on CSS selectors, you remember the layout of a CSS rule. If you don’t, then just take a look below:

selector {
property: value;
}

In the above example, we have a selector followed by a property and a value. In this post, I’m going to be talking about what’s inside the declaration, or what’s inside the curly braces. More specifically, the value that comes after the property.

In order to make things a bit more clear, I’m going to use an example to help understand the rule above. Pretend our web page is a neighborhood with a whole bunch of houses in it. In the code above, our selector is a house. We could have selected a tree or a car, but we chose a house. Now that we’ve selected something, we can style it. So, say we’d like to paint the house. In the code above, we would use the property inside our declaration block (curly braces) to identify that we’d like to target a color. Since we’ve chosen the property to be color, we are limited to what we can use as values for that color. Obviously, we can’t say that we want to color to be “5.” We also can’t say that we want the color to be “center.” What I’m trying to say here is that once we choose a property, we’re limited to values that pertain to that specific property. We can’t willy nilly throw anything at it. If we chose to align the house on a piece of land somewhere, we certainly couldn’t identify the alignment as being blue. For every CSS property, there are a specific number of values that can be associated with it. Those values are categorized into data types. And in this case, it would make perfect sense to paint our house in the example a color of red.

To learn about CSS data types, check out the MDN page on exactly that.

Pixel Units

Sometimes in CSS, two datatypes are combined to create a value. In the example below, I think we’d agree that there’s something wrong.

.container {
width: 1000;
}

What’s missing? That’s right – we have no idea what “1000” is. Is it miles? Feet? Inches? Or perhaps pixels? in this case, it’s 1000 pixels, which is a “fixed” length unit. To learn about length data types, check out this resource:

As I mentioned above, pixels are a fixed length unit. This means that when you use one in your CSS rule, there’s no flexibility. If you make a box a specific pixel height or width, that’s what it’s going to be across all devices. Sometimes, especially today, you’ll see scroll bars appear in the browser window because of this. We’ll talk about relative units later and the length data type’s impact on responsive web design, but for now, just be aware that designers have been using fixed pixels for years and for some areas of your design, they’re perfectly suitable.

Percentage Values

If you’ve ever seen a fluid layout, or an object held within a layout, shrink and grow on a screen, depending on the size of that screen, you may have been viewing a layout that uses percentage values as a length property. There are quite a few CSS properties that will accept percentage values and the way it works is this: whatever the percentage value is, it’s relative to its parent’s width. If you have a container in your layout that measures 1000 pixels wide and a box inside that container that measures 90%, then the box measures 900 pixels wide.

In order to use percentages as values, you’ll need to define a number and then put the % symbol directly after it. As with all combined data types of this nature, you can not have a space between the two. To learn more about percentages, please review this reference:

For an example of what a percentage value look like, check out the code example below:

.container {
width: 90%;
}

Em Units

Em units are primarily used when sizing fonts and are great when you need to make those font sizes scalable in your layout. They way they work are like this: If you were to not size a font at all, the font would be sized according to the browser’s default size, which is normally 16 pixels. In ems, the 16 pixels are equal to 1. So:

1 em = 16 pixels2 em = 32 pixels3 em = 48 pixels

etc…

To learn about these relative length units in more detail, take a look at this resource:

Like I described above, ems are relative to their parent element. And if we work off the premise that the most parent element is the document itself, we’re working off the premise that 1 em equals 16 pixels. Take a look at the following code example:

p {
font-size: 1em;
}

In the code above, the paragraph’s font size will be 16 pixels tall. Here’s the thing – what if we adjusted the font size for the entire body?

body {
font-size: 2em;
}
p {
font-size: 1em;
}

This is going to get a bit confusing, but stay with me.

If we adjust the font size for the body element to equal 2 ems, this becomes the new base for everything else in our document to work from. So when the body element text size equals 2 ems and the paragraph font size equals 1 em, they both equal font sizes of 32 pixels tall. 2 ems is 32 pixels and the paragraph size equals one of those 2 em units, so that’s also 32 pixels.

Let’s say that we want to make our paragraph text really big, so we change the em size of it to:

body {
font-size: 2em;
}
p {
font-size: 3em;
}

Can you guess how many pixels tall the paragraph text will be now? Well, since we’re still working from the premise that we have a base value of 32 pixels, all we need to do is multiply our paragraph em size by that for our result. So, 32 pixels multiplied by 3 ems equals 96 pixels.

32 pixels * 3 ems = 96 pixels

What if we had an existing stylesheet that was created without the use of these relative em units? What if all font sizes were sized in fixed pixel units and we wanted to change that? Well, what we’d need to do is a bit of math. Here’s what our code might look like:

p {
font-size: 100px;
}

If we wanted to change this pixel sized font to ems, we’d need to do some division.

100 pixels / 16 pixels = 6.25 ems

This is what our new code would look like:

p {
font-size: 6.25em;
}

If we changed our code to look like this, our text size would be exactly the same. Let’s do another example:

body {
font-size: 2em;
}
p {
font-size: 100px;
}

Since our base is now 2 ems, which is double the previous start point of 1 em (the default browser size), we need to alter the values of our equation:

100 pixels / 32 pixels = 3.125 ems

Our new code would look like this:

body {
font-size: 2em;
}
p {
font-size: 3.125em;
}

Again, our paragraph font size would be identical to what it was before we switched to using em units.

Here’s the thing: there’s a rabbit hole associated with relative em units. Let’s say that we add some code to our example:

Since ems are relative to their parent element, they can “compound,” the further down they go. And since our paragraph is now inside a container class, our text is going to get large, fast. Let’s do the math.

If our baseline is 2 ems (body element), which equals 32 pixels, that means that the text inside our container class (inside the body element) will be three times that, or 96 pixels.

32 pixels * 3 ems = 96 pixels

Since our paragraph is nested within the element with the container class, our paragraph text will be 3.125 times larger than it. So:

96 pixels * 3.125 ems = 300 pixels

As you can imagine, this can get out of control if you have lots of nested elements with a variety of relative font sizes. This is where Rem units come into play.

Rem Units

Rem (or “root” em) units are scalable like em units, but they don’t follow the same compounding rules as em units do, thus, no rabbit hole. The html element is the parent of all rem units, so you won’t get stuck trying to figure out what’s a parent and what’s not, as well as what font sizes are across your document. If you know that the html element has a font size of 1 em, or 16 pixels, you can rest assured that your paragraph element with a font size of 2 rems is actually 32 pixels tall. Here’s what this code looks like:

Color Data Types

The world of color is a very deep one. University courses have been taught on the topic. Every time I think about color, my head spins because what begins as something simple, quickly turns into a project.

CSS once handled aspects of color in a narrow way. As time marches on though, more and more options and features get added to CSS, making color a significant part of coding in this language. For our purposes though, it makes no difference how complex things get, because we’re going to stay on the straight and narrow. In this post, we’re going to keep it simple.

The three values of color we’re going to look at here are color keywords, hexadecimal (RGB hex) and RGB. If you’re interested in learning about more color values when it comes to CSS, feel free to check out this reference:

Let’s say that we want to make our primary page heading blue. We can do this in a number of ways. The first way being through the use of a color keyword. This is the fastest and most simple method of adding a color value to a CSS rule.

h1 {
color: blue;
}

By using this code in our CSS file, our H1 will be blue. We can also use many other keywords. Let’s say we wanted our H1 element to be corn flower blue instead. We can simply update our code to look like this:

h1 {
color: cornflowerblue;
}

This seems easy, but it begs the question – where in the heck do I find the names of these color keywords? I mean sure, red, blue, green and yellow are the easy ones, but I would never have thought of corn flower blue. If you browse the link I shared with you above, you’ll see the color keywords that CSS accepts. You can also use a handy tool, such as:

This will help take some of the pain away from searching through many, many colors. It also converts keywords to their respective hex and RGB values.

Color keywords are straightforward. What if we wanted to get away from using keywords and start using hex values instead? Many designers prefer to take advantage of hex values because they are easier to write and can be abbreviated. There are also many more hex value combinations than color keywords. Next, we’re going to convert our color keywords to hex values.

h1 {
color: #0000ff;
}
h1 {
color: #6495ed;
}

The above colors are blue and cornflowerblue, respectively. How did I get those hex values? There are a number of ways. Two being the sites I listed above. If you visit this page on the RGB site, and then click blue and cornflowerblue, you’ll see everything you need.

Notice the hash in front of the six character code. Hexadecimal codes always begin with a hash.

I’m going to give you a hint here and you can choose whether or not you want to use it. I don’t. I always write my hex values out long hand, but if you wanted to, you could shorten certain hex values. Let’s take a look at some examples here:

#0000ff = #00f

#006699 = #069

#000000 = #000

The way hex values work is that the first two characters equal the red value, the second two characters equal the green value and the third two characters equal the blue value. So if you have two identical characters for each color value in your hex code, CSS only makes you write one of those characters.

Quite honestly, the way I choose my hex values is to open Photoshop and use the color picker. If you don’t have Photoshop, you can use a similar tool like something found here.

The last color value I’m going to talk about is RGB. To make things easy, I’m going to convert our blue and cornflowerblue keywords and hex values into RGB values in this next example:

h1 {
color: rgb(0, 0, 255);
}
h1 {
color: rgb(100, 149, 237);
}

The previously covered color keywords and hex values are equivalent to these RGB values you see directly above. I used the tools I spoke of to convert the colors the same way I did previously. Again, if you want a really easy to use tool to help out with this, check out:

W3Schools HTML Color Picker

There is one last thing I want to cover, though, and that’s how to use the RGB opacity value to add some transparency to your chosen colors. Take a look at this code:

By adding an “a” after the RGB in the code above, I told the browser that I want to make my color somewhat transparent. The only other task that needs completing is to tell the browser how transparent I’d like to make it. That’s where the final fourth value comes in, inside the parenthesis. In the first color above (blue), I added an 80% transparency to our fully saturated color. Remember from math class? 1 equals 100%, so .8 would equal 80%.

In the next block of code (cornflowerblue), I added a 30% transparency value to our color. Now, both colors will be shown at a level of transparency, meaning, they will appear lighter when on white backgrounds or whatever is behind them will show through at the set degree on textured or colored backgrounds.

Formatting Text

Formatting text with CSS is fairly straightforward. Later on, we’ll get into some more creative and involved formatting options, but for now, we’ll just focus on the easy stuff – making text look presentable on a web page.

I think I’m going to give code examples and then explain what’s going to happen to our text because of that code. I’ll also link to resources when relevant.

h1 {
text-align: center;
}

The “text-align” property describes how inline content, like text, is aligned in its parent block element. The above code will center our heading text. There are further options available with the text-align property, such as left, right, justify, justify-all, start, end, match-parent and inherit. For more information on the text-align property, please look at this page.

h1 {
text-transform: uppercase;
}

The “text-transform” property tells the browser how to display our text with regards to its capitalization. In the code example above, our heading text will be capitalized – every letter of it. There are more options available for this property, such as capitalize, lowercase, none, full-width, and inherit. For more on this property, you may browse this page.

h1 {
text-decoration: underline;
}

The “text-decoration” property tells the browser what type of formatting to give the text in regards to underline, overline, line-through or blink. In the example above, our specified text would be underlined. For more information in this property, take a look at this page.

h1 {
font-weight: normal;
}

The “font-weight” property is what we use to set the weight of our specified text. Since heading tags are normally set to bold by the browser, in the example above, I set the weight to normal. There are many other weights to choose from with this property, but you need to concern yourself with their availability regarding the fonts you choose to use. Not all fonts support all weights. The available weights for this property are normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900 and inherit, with 100 being the lightest and 900 being the heaviest. If you would like to choose a font weight for text that’s relative to its parent’s font weight, you could go with lighter and bolder. To learn more about font weights, take a look at this page.

body {
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

The “font-family” property lets us tell the browser what our prioritized list of font family names and/or generic family names for the selected element is going to be. In the previous sentence, notice the word, “prioritized.” If you take a look at the above code example, you can see that I set the font family “font stack” for the body element. This means that, if no other fonts are specified for any other element on the page, all fonts will be set to Arial. If Arial isn’t available on the user’s computer for some reason, the next font, “Helvetica Neue” will be used. If not that one, Helvetica, etc… Each font in the list is a fall back for the previous one.

Also, notice how the ‘Helvetica Neue’ is in quotes. These can be either single or double quotes. The reason quotes are used is because it’s a font that has two or more words in it. Single word fonts don’t need quotes and multiple word fonts do. To learn more about the font-family property, take a look at the MDN page on the topic.

body {
font-style: italic;
}

The “font-style” property allows us to select whether we want our font to take on italic or oblique faces within a font-family. This is fairly straightforward. In the above code example, all the text on our page would be in italics. To learn more about this, check out this page.

body {
line-height: 1.5;
}

The “line-height” property specifies the minimum height of line boxes within an element. This is actually a fairly deep topic and I’ll be talking about line height at length in future posts, but I wanted to give you a taste of it here. Basically, line height spaces text lines vertically from one another. Be default, lines can be cramped. By adjusting line height, you can easily make things more readable.

In the code example above, I set all the text in our document to a line height of 1.5. This is a unit-less value and is in direct relation to the font size it’s adjusting. For many of my personal projects, I set the line height to 175%, because that gives some nice spacing as well.

When adjusting line height, we’re able to take advantage of a few data types. We can use numbers, such at the 1.5 I used above. We can also use lengths, such as ems as we discussed previously in this post. An example of that would be 1.8em. We can also use percentages like I just talked about. Remember though, many of these data types are relative, so that compounding effect can creep in when you aren’t expecting it. Lastly, if you’d like to delve into the line height arena, be sure to read up on the topic over at the MDN page.

——

Wow, this was a long post. I think I’m going to stop here. If you have any questions or comments, please leave them below and if you’d like to read some of my other posts on CSS, please check out my CSS category.

There seems to be a bit of debate out there about whether or not to use a group of plugins to assist in creating custom post type template for your WordPress site. Zac Gordon, from Treehouse, advocates the use of the plugins. He says that by utilizing these plugins, a website owner is protected from custom post type loss if they decide to change themes. His favorite plugins to accomplish the creation of these templates are:

Over at WPBeginner, it’s said that there’s danger in using plugins to create your custom post types. If a user deactivates one of the plugins involved, they run the risk of losing the posts, since those types aren’t registered in WordPress. They also won’t be available in the admin section.

When I began writing this post, I leaned towards the view of hard coding the custom post type code into the necessary templates. I’m still leaning that way. I’m not one to believe that users should flip through themes in their WordPress back-end and expect various features to continue working as they did before. To say that someone is only going to lose their custom post types by changing themes is only partially true. They’ll lose much more than that. Basically, anything that was coded into their template files will be gone. So why limit your concern to custom post types?

By the way, I’m really not going to go into crazy details on this topic in this post. I’ll cover the essentials, but if you’re looking for more, please feel free to take a look at these posts:

Step 1

I’m going to review some code from the WordPress codex and use parts of it in the code examples below. And just to make you aware, I’m getting this from the “register_post_type” page, among other sources.

The above block of code goes inside your functions.php file. Now, if you’re familiar with PHP, you might be aware that you can write this code another way. Instead of creating and using a local $args variable to store our options, we can include the array right inside the register_post_type function.

It’s up to you which way you want to go. Also, to get a handle on what all these arguments mean, check out the WordPress Codex page.

If everything went smoothly during the setup of your functions.php code, you should now have an new menu link in the admin. If you don’t, check over your code. If it’s all okay, click around a bit to see what posting something new would feel like.

——

Just a quick note: now that we have the ability to create new custom posts in our admin, we still have no way of seeing those posts on our website. The area that holds our primary custom page and posts isn’t automatically linked to. In order to link to it, we’ll need to modify an existing, or create a new, menu with our static link. In this case, the link to our custom area would be http://www.example.com/book-reviews/.

——

Step 2

If we leave things the way they are, WordPress will use our fallback archive.php template to display the list of our book review custom posts, as can be seen in the hierarchy. If we don’t like this template or want to modify it, we can do so by creating a file called, “archive-book-reviews.php” and populating it with our template code. We’ll need to include the correct text commented out at the top of the page.

/**
* Template Name: Book Reviews
**/

The comment above tells WordPress that it’s not only a custom template, but the template we’re using for our book reviews.

Inside the template, we’re going to need to include a loop that will correctly call the data we’d like to be called. So, within your formatted HTML code, you’d use something like this:

Step 3

In this last step, we’re going to create a new custom post template for each of our custom posts. As it stands now, WordPress will use the “single.php” template for this. Since we’re creating something unique, we most likely want to change that. To follow the WordPress naming convention, we’ll call our new file, “single-book-reviews.php.” Take a look at the code below:

In the most basic sense, the stripped down code above should get each post showing on its own page. Of course, you’ll want to add your own formatting, but as far as creating the PHP code goes, this is good.

——

I’m actually going to revisit this post in the future to clean up a few parts. I believe the steps are the correct approach to take when attempting to explain this, sort of confusing, task, but as far as the actual PHP goes, I would like to verify its accuracy. What I’m learning is that there are multiple ways to accomplish the same task and many resources online conflict with one another. The only way I’ll be able to rectify this is to gain a better understanding of the functions in question.

Treehouse just released a new course on PHP for WordPress that I’d like to take. It’s obvious that any WordPress developer needs to have a solid understanding of PHP to truly delve into development of this sort. I’ll be taking this course shortly.

If you’re interested in my other posts on this topic, please take a look at the WordPress category. And as always, if you have comments or questions, please leave them below.

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.