Tutorial :: WebDesign.com

Archive for Tutorial

WordPress Tutorial – Back to the Basics with WordPress

By Nina East (Nina!) · Comments (0)

Wednesday, January 11th, 2012

In this free WordPress training video, Benjamin Bradley, the Professor at WebDesign.com, reviews 18 basic points – and one critical plugin – you need to know about when setting up and growing your WordPress website.

Some of the topics covered include:

How and why to set your privacy settings
Why it’s important to set your tagline and time zone (common settings people forget)
How to access advanced options when creating posts and pages
How to create an image gallery in a post or page easily and quickly, including adding captions and descriptions for each image
How to use the “Excerpt” field and page-specific discussion settings to further customize your site
How to use the multiple elements within the publishing options, such as sticky posts and password protection
How to work with the media library screen options – and why you would want to
Two recommendations on how to set your permalinks

Watch the video below to learn about all these tips and more, including the essential Easy Theme and Plugin Upgrades Plugin.

WordPress 101 Tutorial - A Review of the Basics

Check out all the WordPress and web design webinars on the Events page, including the free webinars like this one, taught every Tuesday at 11am Central Time.

Comments (0)

Categories : Tutorial

QuickTip: Using CSS Transitions

By Justin Seeley · Comments (0)

Monday, August 29th, 2011

In this week’s episode of the Web Design Quicktips podcast I show you how to quickly and easily add a little bit of fun interactivity to your site by utilizing CSS transitions. This is a great way to break out of normal background/opacity changes and add something unique to your designs. The best part is that it’s super easy to do! Check out the video and see if you can use it in your next web design project.

Comments (0)

Categories : Design, Resources, Tutorial, Video, Web Design

How to Use Firebug

By "Professor" Benjamin · Comments (0)

Monday, June 20th, 2011

Firebug is a free addon for Firefox that gives you some powerful development tools. It can help you diagnose issues in code, find where to change something in the code and even make those changes and preview them instantly.

“Firebug: Firefox Addon Video Tutorial” is an 8-minute tutorial that walks you through how to install and use Firebug. It’s another benefit of being a WebDesign.com premium member. Join today to get access to more than 250 hours of training content.

Comments (0)

Categories : Tutorial

What are Post Formats and How to Use Them

By "Professor" Benjamin · Comments (0)

Tuesday, May 24th, 2011

Blog posts are great, but they’re not the only type of content you might share. You’ve got photos, video, links and quotes—oh my. Post formats are a nifty tool in WordPress 3.1 that enables you to format different types of content in different ways.

Post formats are a powerful bit of functionality that can make your website a lot more flexible and save you time. That’s good. But they’re not activated or styled out of the box with WordPress 3.1. That’s bad. But never fear—we can help!

Our 51-minute “Post Formats” recorded webinar dives into what post formats are, how to activate them and how to edit the code to make them work. Soon you’ll be able to add custom styles to different content on your site, making quotes and links stand out from your standard posts.

It’s all part of the WebDesign.com premium membership, which includes a growing library of content—currently more than 200 hours of web knowledge.

With many of the WebDesign.com classes there is a valuable PDF handout. Download the PostFormats PDF for this webinar to see how valuable they are.

Comments (0)

Categories : Tutorial, Web Design Courses

Fix the Menu-Video Overlap

By "Professor" Benjamin · Comments (4)

Tuesday, May 18th, 2010

For anyone who uses lots of videos on a WordPress site, you probably have run across this issue. Your drop-down menu gets hidden BEHIND the video. Example:

In this example you can see that the drop-down menu disappears behind the video box. Yes, it’s true that you can go into every single embed code on your site and add an opaque value to the code. But that method will require you to do it for EVERY single video. If you have a lot of videos on your site, this will take quite a bit of time. This little tutorial will provide you with the necessary code to fix this issue for all your videos.

The following code will be adding a filter to the WordPress hook the_content. By adding a filter, anytime an video embed code appears, it will automatically add the opaque value for you. This code should be placed in the functions.php file in your activated theme’s folder.

//Fix video drop-down menu overlap problems
function add_opaque_to_all_flash($string) {
$string = str_ireplace(‘<embed type=”application/x-shockwave-flash”‘, ‘<param name=”wmode” value=”opaque”><embed type=”application/x-shockwave-flash” wmode=”opaque”‘, $string);
return $string;
}
add_filter(‘the_content’, ‘add_opaque_to_all_flash’);

Once you save the functions.php file, refresh on any of your WordPress pages/posts that are having the menu/video overlap issue and you will see that the fix is working. Example:

Digging Further:

Let’s take a closer look at the code we just added to the functions.php file. The add_opaque_to_all_flash function looks for the following string of characters (a generic video embed code), and then adds the opaquevalues to the param name wmode.

Now that we defined the function we just use the simple add_filter to add the add_opaque_to_all_flash function to the_content hook in WordPress.
I hope this helps anyone who has run into this issue. Keep following WebDesign.com for more practical tips and tricks to take full advantage of WordPress.

Comments (4)

Categories : Tutorial

Tags : functions.php, menu, Video

Redbull, Baldness and IE6

By "Professor" Benjamin · Comments (2)

Thursday, April 8th, 2010

Okay, I will give you all ONE guess at what is the bane of the internet?

If you guessed Farmville Facebook requests, then you are close.

But the correct answer is Internet Explorer… and more specifically IE6.

I think the real answer to why web developers seem to lose their hair at alarming rates is a toss up between three things:

Too much Redbull
Enlarged brains pushing the hair follicles out off the head
Internet Explorer 6

So in order to save what hair we have left I wanted to provide this little tutorial on how to add an Internet Explorer specific stylesheet to your website.

This tutorial isn’t about what to put in the stylesheet to accommodate the craziness and weirdness that is IE6, but rather a simple way to “insert” an additional stylesheet into your site without messing around with core theme files. (The reason why it is important to NOT mess with core theme files is so that upgrading is simplified for future upgrades.)

So we will use our functions.php file to insert the additional stylesheet. I’ll first set up the code and then I’ll explain what the code does. One of my goals in these tutorials I’m writing for WebDesign.com is to teach developers how to READ PHP even if they don’t understand how to write PHP. If you can read PHP (like reading a sentence) you will slowly begin to identify certain characteristics of the language. It also makes it easier for you to tweak existing PHP without the need to fully understand the entire PHP language.
The code you would put into the functions.php file is as follows:

function ie_stylesheet() { ?>
<!–[if IE]>
<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_directory’) ?>/ie.css” type=”text/css” media=”screen” />
<![endif]->
<?php }
add_action(‘wp_head’, ‘ie_stylesheet’);

The only other thing you will need to do is to put your special Internet Explorer stylesheet in your theme directory. (In the example, I have named the stylesheet ie.css.) So now you might be wondering exactly what is going on in the code.

We are dealing with hooks in this code. We know this because of the last line that begins with add_action. We are telling WordPress that we want to perform an action (add_action) in the hook (wp_head) and that action is doing the ie_stylesheet function. So the next step is to figure out WHAT the function ie_stylesheet is doing. In this example it is very easy because we are just inserting the code that is located between the two brackets { code }. One thing to note, since we are inserting this code into a PHP file (essentially the index.php file (which is calling the wp_head.php file)), we need to make sure we “close” the PHP bracket before we insert the code and then “reopen” the PHP bracket at the end of the code. And so because the function ie_stylesheet is inputing the code that links to the ie.css file, we have successfully added the IE specific stylesheet to our website correctly.

One side note: because CSS is hierarchical, it is important that this function and hook action be the LAST function added to wp_head to avoid css conflicts. So, to make it simple just put the above code at the END of your functions.php file.

Comments (2)

Categories : Tutorial

Tags : functions.php, ie6, stylesheet

Simple “Members-Only” Sections

By "Professor" Benjamin · Comments (2)

Wednesday, April 7th, 2010

There are some great options if you need a robust solution when deciding to add a member’s only section to your WordPress site or if you want to create a pay-wall for some of your content. Two solid solutions are WishList Member (pay) and Justin Tadlock’s Members Plugin (free). But what if you want to use the simple permissions already built into a normal WordPress installation?

WordPress already gives you the option of whether or not you want to allow your readers to create an account. Because of this option, you already have a “wall” that can be put in place for those people who are logged in and those visitors who are not logged in. And with only 7 lines of code, we can create a simple way of protecting content to only people who are logged in. So our goal in this tutorial is to create a simple way for display certain pieces of content to only “registered users” or those visitors who are logged in.

First, we need to create a shortcode. WordPress defines shortcode as “a WordPress-specific code that lets you do nifty things with very little effort.” We will create a shortcode by adding the following code to the functions.php file that resides in your theme folder. (**See note at bottom for creating a functions.php file)

function checkreg_shortcode($atts, $content = null) {
if (is_user_logged_in() && !is_null($content) && !is_feed()) {
return $content;
} else {
return ‘We are sorry, but this part of the post is only available to our logged in members. Click here to become a member!‘;
}
}
add_shortcode(‘regmember‘, ‘checkreg_shortcode‘);

Now, once we have the above code in our functions.php file (and we have saved the file), we can go to our posts. And in any of the posts you can add the following shortcode:

[regmember]
Woohoo, you are logged and and will be able to see this text.
[/regmember]

Anything inside the [regmember] shortcode tag will now only be displayed to visitors to your site who are logged in.

The Mystery Revealed…

So, what is happening in the above code is that we have created a new function. That function is called checkreg_shortcode. This function asks WordPress to check and see whether the current visitor who is at your page/site is logged in or not. If WordPress sees that the visitor is logged in then the text that is sandwiched between the two [regmember] TEXT[/regmember] shortcode is displayed. If the visitor is not logged in, WordPress will display the apology message that appears on line 5 of the functions.php code.

Now to finish this up you may need to style the “alert” message and input the proper links for people to register for your site, because right now the above code just spits out the plain text: (We are sorry, but this part of the post is only available to our logged in members. Click here to become a member!) But what we have done in this tutorial is create 7 lines of code that effectively provide a basic form of “membership-only” functionality.

Note regarding creating a functions.php file: If you don’t have a functions.php file in your theme folder, you can create one. The only thing to remember is that if you create a functions.php file you need to have the first line of the file contain the following code:

<?php

And for the functions.php file you do not close the php bracket at the end of the file

Do you want to learn more?

WebDesign.com has an upcoming WP Developer Certification course (with only a few seats left) that teaches developers using WordPress by diving deep into the foundational requirements for being a developer and the essentials for creating successful projects for the web using WP as the CMS (Content Management System). We invite you to learn more about becoming a WebDesign.com member or the participating in the WebDesign.com Certification classes.

Comments (2)

Categories : Tutorial

Tags : Content, hack, members, shortcode

CSS3 and Rounded Corners

By "Professor" Benjamin · Comments (2)

Tuesday, April 6th, 2010

As more and more browsers adopt the CSS3 standards, it is becoming easier to create a rounded corners feel to a website. Soon web developers will be able to do away with the headache of creating additional rounded corner background images just to give the “feel” of rounded corners. Although we will never get back the hair we pulled out while trying to get rounded corners to look correct on different browsers, at least we should have less struggle once CSS3 becomes more mainstream.

This leaves us with a question, can I get rounded corners by using only CSS while I wait for a broader adoption of CSS3? Yes, you can. Through the use of some proprietary CSS properties, there are already browsers on the market that can display rounded corners. Here are some samples of proprietary CSS properties that would create a 10 pixel rounded border:

-moz-border-radius: 10px;

-khtml-border-radius: 10px;

-webkit-border-radius: 10px;

(Mozilla Firefox uses the -moz-border-radius property and Safari (WebKit) & Chrome use the -webkit-border-radius or the -khtml-border-radius property.)

It is important when using these properties that you protect backwards compatibility and cross browser considerations. Because of this a developer should be including all the above code in order to provide a unified look and feel of the website across the most number of browsers. If you are interested in how different browsers currently handle the border-radius properties, Jerry Seeger has a very useful & graphical table to help you out.

Example Code

What good is a quick tutorial without some sample code and some description of what is happening with the sample code. Well here are two quick examples of something you could include in your style.css file to achieve a simple rounded corner effect.

Four Corners

.rounded-box {border:1px solid #DDDDDD; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px;}

This code will apply a rounded border feel to the “rounded-box” div. All four corners will be equally rounded with a 10 pixel radius and have the color #DDDDDD (which is a light grey)

Only Two Corners

.twocorner-box{border:1px solid #FF9999; border-radius:5px 5px 0px 0px; -moz-border-radius: 5px 5px 0px 0px; -khtml-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px;}

This code will apply a rounded corner to the top two corners of the “twocorner-box” div. The border color will be a pink-red (#FF9999) and will have a 5 pixel rounded radius on the top left and top right of the “box”.

An important tip to remember that will help you read CSS is that when you see four pixel numbers together on one css box property, they are referring to each “side” of the box”. When you see four pixel numbers together on a radius property, the first number refers to the top-left corner. The second number refers to the top-right corner… and it continues clockwise around the box.

So that if I only wanted the top-left and the bottom right to be rounded, one way of performing this task would be:

border-radius: 5px 0px 5px 0px;

The box concept in CSS is very important. We will talk more about this later. But one of the “A-ha!” moments for many people learning CSS is when they begin to see things in a box-style framework.

Also, in the sample code above, remember that the border-radius property is not yet supported by all browsers. But it isn’t going to hurt you by including this in the code now. This way you will always have forward-compatibility since CSS3 has already setup this standard for the border-radius property. Browsers that do not have this compatibility will just ignore the code. No Harm – No Foul.

Additional Information:

Here are some other great sites with additional information on CSS3 and rounded corners:

http://www.css3.info/preview/rounded-border/
http://www.w3.org/TR/css3-background/
http://www.w3schools.com/css/css_boxmodel.asp (CSS Box Model information)

UPDATE:

We need to remember that until CSS3 is fully adopted across the board on all browsers, developers will continue to run into problems… even this developer who wrote this post. It was pointed out that I forgot about a wonky feature/bug that pops up when using the -webkit-border-radius property. The -webkit-border-radius property does not support the stringing out of the 4 pixel numbers IF the corners are different. So when using the -webkit-border-radius property you will need to specify each corner as follows:

-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 2px;

It’s an odd little issue, but if you don’t actually specify the top-left, top-right, bottom-right, and bottom-left is won’t display correctly on browsers like Safari and Chrome.

Comments (2)

Categories : Tutorial

Tags : css, rounded corners

Home · Blog · Affiliate Program · Contact
Upcoming Live Events

Archive for Tutorial

WordPress Tutorial – Back to the Basics with WordPress

WordPress 101 Tutorial - A Review of the Basics

QuickTip: Using CSS Transitions

How to Use Firebug

What are Post Formats and How to Use Them

Fix the Menu-Video Overlap

Digging Further:

Redbull, Baldness and IE6

Simple “Members-Only” Sections

Do you want to learn more?

CSS3 and Rounded Corners

Example Code

UPDATE:

Log In

Video Tour

Get WebDesign.com Updates

Have a Question?

Frequently Asked Questions

Username
Password

	Remember Me Lost your password?