New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Learn it fast with expert-taught software and skills training at lynda.com. See what you can learn

By Morten Rand-Hendriksen | Wednesday, January 16, 2013

Why WordPress?

Why WordPress?

What makes WordPress a good solution? Why is it so popular? Regardless of the question, the answer is the same, and it can be boiled down to three simple words:

Because WordPress works.

Of course, it’s a little more complicated than that. Let me put it into context from the perspective of the three main users of WordPress: the end user, the site owner, and the designer/developer.

Easy to find, easy to use, easy to share

A poorly kept secret about WordPress is its findability. If someone asked you how to get indexed on Google and you answered “Just set up a WordPress site,” you would not be far from the truth. The way WordPress is built makes it a magnet for search engines and other online indexes. So much so that if you don’t want your WordPress site indexed, you have to take steps to prevent it from happening.

Out of the box, WordPress has great search and share optimization. With the addition of plugins like WordPress SEO, AddThis, and Facebook for WordPress, these built-in capabilities are further enhanced, giving any site the opportunity to become the next big thing on the web. This is provided the content is great, of course. We’ll get to that later.

The purpose of many websites is to put out easily findable, accessible, and shareable information. And WordPress does this in spades. When you are searching for content on the web today, you will likely find it on a WordPress site. If you are reading or viewing content on a WordPress site, you are able to access and interact with that content through comments and RSS feeds. And once you have read the content, you will have an easy time sharing it with your friends on social sharing sites and social media.

Easy to publish, easy to configure, easy to maintain

WordPress is a prime example of the virtues of open source. It is built, evolved, and maintained by the people that use it and is therefore in a constant state of forward-moving flux. For site owners this means by simply running a WordPress site and keeping it up to date, they are at any time using the most current web technologies to communicate with the world.

Over the past three years, WordPress has undergone several fundamental design and development changes that have made an already easy-to-use application even easier to use. At the same time it has become more powerful and diverse. From how it is installed to how a site owner can publish content and interact with visitors, WordPress leads the way in removing the barriers that prevent anyone from publishing online. Between WordPress.com and self-hosted WordPress, most people with access to an Internet connection are now able to publish their thoughts, ideas, and creations online with minimal effort. With the challenges of web technologies all but removed, the site owner can focus on what matters: producing and publishing excellent content to share with the world.

Easy to build, easy to augment, easy to evolve

For me, the true power of WordPress lies in the back end. Whether you are a complete novice or a seasoned pro, building themes and plugins for WordPress will make your life easier and will enable you to do more in less time. I am walking proof.

With a design in place, building a custom WordPress site from scratch—one that looks and behaves nothing like what is expected of a WordPress site but is still just as easy to use and maintain—takes less time than with any other platform I have tried. When people ask me what WordPress can do I answer, “Whatever you want it to do.” And I stand by that statement. At its core, WordPress is a simple interface between the site owner, the database, and the end user. All the stuff in between (administration, themes, and functionalities) is available for the designer and developer to play with and add to in any way they want. And because WordPress is open source, people can step in and contribute to the WordPress community in whatever capacity they feel fit, from answering questions in the forums and building free themes or plugins to contributing to WordPress Core.

The bottom line

Though it may sound like I see WordPress as the be-all and end-all of web publishing, the reality is I am a pragmatic platform agnostic. The reason I laud WordPress and why I love teaching people about WordPress is because I see it as one of the best available solutions for most websites today. I have and continue to work with other solutions including Drupal and Joomla!, but for most of the websites I encounter, WordPress is one of the best options.

Whether you are just starting to play with the idea of publishing a blog, you want to become a web designer or developer, or if you already know all there is to know about the web and you just want to play with something new, WordPress is a great tool to use. It has both the ease of use and the advanced features to suit pretty much any need. And when that need isn’t met, a theme, a plugin, or an extension is there to fill the void.

Interested in more?

Suggested courses to watch next:

By Morten Rand-Hendriksen | Wednesday, December 05, 2012

Twenty Twelve–lean, clean, and ready for your WordPress site

The Twenty Twelve WordPress theme, responsively displaying itself at mobile resolution. The past two years have seen the release of two default themes for WordPress, aptly named Twenty Ten (released in 2010) and Twenty Eleven (released in 2011). Now we can add this year’s addition, Twenty Twelve, to the list. And with it we get a new stock theme that redefines what a stock WordPress theme is and sets a new standard for lean and clean design and coding. But like all good things the Twenty Twelve theme is not without controversy, which makes it all the more exciting.

Less is more

Twenty Twelve is at the same time stripped down and sophisticated in a way we’ve only previously seen in sandbox and development themes like Toolbox and _s. But unlike these themes, which were created specifically to be used as baselines for new themes, Twenty Twelve is fully built out and ready to take on the challenges of pretty much any content you throw at it. Twenty Twelve is responsive, conforming to small and large screens and providing custom navigation for smartphones and tablets; it is in line with current ultra-minimalist design trends, putting content and typography front and center; and it has tons of cool features built in for beginners as well as advanced users. All in all it makes for a great theme whether you just want a fresh look for your site or you want a good baseline to start from when you build your own child theme or full-on custom theme.

If you ask me, one of the most important aspects of the Twenty Twelve theme is its simplicity in design, code, and implementation. When the Twenty Ten theme was released, it was a revolutionary shift from the old and stale default themes. Twenty Ten was simple to work with and had lots of advanced features under the hood like custom background color, custom header images, and more widgetized areas people could take advantage of. The next theme in the series, Twenty Eleven, built on this concept and introduced more advanced features like a custom front page template, a featured content slider, and other elements. However, the advancements of Twenty Eleven came at a cost with the theme being far more complex on the back end and far more convoluted and tricky to work with.

Considering this, Twenty Twelve is a step in the right direction. Gone are advanced features that few used in practice, replaced with simpler, more meaningful templates and tools to make customization and use as easy as possible.

Efficient in both code and display, the new Twenty Twelve WordPress theme is simple and powerful.

Twenty Twelve at a glance

The key features of Twenty Twelve include responsive design and custom phone and tablet menus; a custom front page template as well as full-width and sidebar templates for pages; full support for Aside, Image, Link, Quote, and Status post formats; full Theme Customizer support for all the standard WordPress functions; Google Fonts integration; and the standard header image and background color support we have come to expect from modern WordPress themes. Not to mention a clean and modern design with the content front and center.

Even with all this, the true power of Twenty Twelve can be found on the back end. Twenty Twelve is a leaner and cleaner theme than its numerically named predecessors. This is great for novice theme tinkerers and advanced theme developers alike. The theme provides more bang for your brackets, separating out functions and templates in separate files and folders and wrapping up functions in conditional functions, actions, and filters to make modifications and interactions easier. In my opinion, Twenty Twelve could be the new standard from which child themes and full themes should be built.

Controversy abounds

I say “could be” because quite a bit of controversy has stirred up around one decision made by the theme creators: It doesn’t seem to support Internet Explorer 8, at least not the way that is expected.

Twenty Twelve is fully responsive and ships with a custom mobile menu for smaller screens. This much is to be expected from a modern WordPress theme. However, in implementing the mobile menu function the developers of the theme made an interesting and controversial decision: Rather than setting the desktop stylesheet as the default for the theme and making special media queries for smaller screens and mobile devices, they chose to set smaller screens and mobile devices as the default and wrap the styles for larger screens in media queries. While this is no problem for modern browsers that follow the new HTML5 standard, it is problematic for older browsers like IE8 because the provisional media queries that create the layout for larger screens is not understood by these browsers. As a result, users of older browsers like IE8 get the mobile layout on their full-size screens.

The theme developers argue that this is not an issue for two reasons: One, the mobile version of the site is perfectly acceptable even on larger screens, and two, people shouldn’t be using old and outdated browsers like IE8 to begin with.

While I agree with both these statements, I believe our job as web designers and developers is not to police the Internet but rather to provide great experiences for the end users and educate them in the process. And since we have little to no control over what hardware and software the end users choose to access our sites, we need to provide the best experience possible for all of them regardless of their choices.

We can’t let older technologies hold us back from implementing new standards. In that case, providing a suboptimal experience for users with older browsers would be acceptable. However, the IE8 issue in Twenty Twelve is not caused by this type of situation but rather the choice to set the mobile styles as the default and wrap the desktop styles in media queries. In other words, they turned the theme stylesheet upside down on purpose. Had it been turned right side up, this would not be an issue.

These are the types of issues that arise in open source and they are incredibly interesting and frustrating for everyone working in open source. Unfortunately, more often than not the end users are left in the dark about what’s going on and get the impression that things are not working right. That is not the case at all. The great thing is that these issues are usually resolved through a collective effort, and a solution to the IE8 menu problem in Twenty Twelve is imminent.

If you want to read more about the IE8 menu controversy and get an idea of how these things happen and how they are resolved, check out the forum streams Excellent base for child themes and nav bar fails in IE8 as well as the track ticket. They provide for some interesting reading.

Check out Twenty Twelve right now!

Though it may sound dramatic, do not let this minor controversy deter you. Twenty Twelve is a great and forward-looking theme and a excellent basis for child themes as well. If you are itching for a new look for your WordPress or WordPress.com site, you should give it a spin and see what you think. There are lots of customization options and you can easily make it your own. Once you’re done, post your thoughts, ideas, and questions in the comments below.

Interested in more? • The Twenty Twelve theme at wordpress.orgWordPress 3: Building Child Themes at lynda.com • All WordPress courses on lynda.com • All courses from Morten Rand-Hendriksen on lynda.com

Suggested courses to watch next:WordPress Essential TrainingWordPress: Building Responsive ThemesWordPress Mobile Solutions

By Morten Rand-Hendriksen | Monday, July 09, 2012

WordPress 3.4 update to WordPress 3: Building Child Themes course

With the update of WordPress to version 3.4 came some important feature improvements that changed the way certain key components work, including how the header image and background functionality are implemented. This in turn can mean some of the old methods of making changes to WordPress elements suddenly won’t work anymore if you’re trying to apply old code techniques within the new and improved WordPress 3.4 environment.

The issue

Recent WordPress 3.4 upgrades to stock WordPress themes have made a previously well functioning component in my WordPress 3: Building Child Themes course currently non-functional.

Specifically, in movie 2.3 (Creating a functions file and changing the header image size) I instruct the viewer to redefine the height and width of the header image using the following code in a child theme functions.php file:

Unfortunately, with the new implementation of the header-image function, this no longer works. A new filter function is needed.

The fix

To get the result you want without messing things up in the process, a modified version of the code above is necessary. So, to resize the header image in a WordPress 3.4 Twenty Ten child theme you use the following code:

An update is imminent

We are hard at work rolling out an update to the WordPress 3: Building Child Themescourse to bring it in-line with the new WordPress 3.4 version of Twenty Ten. Until then, using the code above should solve the problem.

Do you have other WordPress 3.4 questions? Feel free to ask them here and I will do his best to get back to you as soon as possible.

Interested in learning more about WordPress?The completeWordPress 3: Building Child Themescourse on lynda.com• WordPress Essential Training• WordPress 3: Developing Secure Sites•  Dreamweaver and WordPress: Building Mobile Sites

By Morten Rand-Hendriksen | Friday, June 15, 2012

Using the new WordPress 3.4 Theme Customizer

Of the many great reasons for using WordPress to create your web site or blog, one of the most important ones is that WordPress is an ever evolving platform. That means with every new version release you can expect to see either security and usability upgrades, or the addition of whole new features. In the case of the latest WordPress evolution—version 3.4, released for WordPress.com and WordPress for self-hosting—we see both regular security hole fixes and code patches, as well as some cool new features for site owners and developers. One feature in particular that is worth special mention is the new Theme Customizer.

Using the WordPress 3.4 Theme Customizer The major update of 3.4 is the introduction of the Theme Customizer. This new feature makes it possible for an administrator to change most theme-related elements of a WordPress site in a live environment and see how those changes look before publishing them to the live site. Previously these customization features were found under several different sections in the admin area, and to apply them you had to make one change at a time and then open the site in a different window to see the result. The Theme Customizer is a one-stop-shop for theme customization, and depending on what theme you are using, you’ll be able to change everything from the site title and description, to menus, what is displayed on the front page, background colors, header images, and more. Once logged in as an administrator you can access the Theme Customizer both from the front end and the Admin panel on your site. From the front end you’ll find the Theme Customizer on the WordPress menu under your site name.

Theme Customizer on the WordPress menu under your site name.

In the Admin panel you can activate the Theme Customizer for the site’s current theme by going to Appearance > Themes and clicking Customize. Activating the WordPress Theme Customizer from the Admin panel.

In either case, you are taken to the Theme Customizer for the current theme which consists of a collapsible left-hand sidebar with all the customization features and your site in preview mode on the right.

WordPress Theme Customizer screenshot.

Theme Customizer with editing options displayed in the left sidepanel, and a preview of your changes displayed in real-time in the full, right-side view.

Screenshot of the collapsible left-hand Theme Customizer sidebar with all the customization features.

Zoomed in view of the collapsible left-hand Theme Customizer sidebar with all the customization features.

Using the Theme Customizer is really very easy. To get started simply open the feature you want to change in the sidebar, for example Site Title & Tagline, or, as seen below, Header Image, and make your changes. As you make changes to the different elements, the live site preview will change on the right to reflect these changes.

Changing the Header Image in the Theme Customizer left-hand sidebar.

Changing the Header Image in the Theme Customizer left-hand sidebar.

The addition of that Theme Customizer sidebar itself takes care of a bit of JavaScript that I can’t quite wrap my head around. While that unto itself is very cool, what’s even cooler is that you can navigate your site as you make these alterations and see what your customizations look like on different pages—all in real-time without your visitors being aware of what’s going on. Very, very cool.

Once you’ve made your customizations and you’re happy with how the theme looks, go to the top of the customizer and click the Save & Publish button and your new settings will be activated on your site. If you don’t like your customizations, simply click Cancel and you are back to the Admin panel without any trace of anything having ever happened. Since this is a brand spanking new feature most themes only have support for the regular functions right now, but expect the Theme Customizer to showcase some pretty snazzy features once theme developers dive into the code for real.

Other WordPress 3.4 updates of note WordPress 3.4 has two other cool updates under its sleeve:

1. If the theme allows it, you are no longer restricted to a specific size for the header image. As an example, that means you can upload a full-height image in the Twenty Eleven theme and have it take up most of your page if you want. I’m not sure that’s a good idea, but the option is there if you want to try it out. My recommendation is you try it in the Theme Customizer to see what it looks like first.

2. Image captions now allow HTML elements, so you can make fancy captions with text that has bold or italic emphasis, links, and all sorts of other interesting HTML touches.

To find out moreNow that you know what’s new and what’s possible, go test out the Theme Customizer, try some HTML captions, and check out the new and improved WordPress 3.4 for yourself. If you want to see the full list of goodies under the hood of WordPress 3.4 take a look at the codex.wordpress.org version 3.4 article. If you need some extra help, visit lynda.com to check out my full collection of lynda.com WordPress courses.

Interested in more? • All web + interactive courses on lynda.com • All WordPress courses on lynda.com • All courses from Morten Rand-Hendriksen on lynda.com

Suggested courses to watch next:• WordPress Essential Training• WordPress 3: Creating and Editing Custom Themes • WordPress 3: Developing Secure Sites • Creating and Managing a Blog Network with WordPress

By Colleen Wheeler | Wednesday, May 30, 2012

This week’s featured five: Going mobile! From using your device, to developing applicatons

It’s no secret that computer engagement is going mobile, with access via mobile devices predicted to surpass desktop computers in the next two years. So for this week’s collection of featured videos, I’ve chosen five free movies that focus on the theme of mobility, whether it be creating a WordPress site that behaves properly on mobile devices, learning to use your mobile phone or tablet more productively, or learning to develop your own mobile applications.

1. Customizing WordPress for smartphones and tablets In this video from chapter nine of the WordPress Essential Training course, Morten Rand-Hendrickson shows you how to use built-in responsive themes and useful plug-ins to ensure that your content is presented in a usable form, regardless of screen size. The main takeaway? With a bit of appropriate planning, you can greatly improve your overall user experience by saving your viewers from the pain of having to zoom or scroll to view your carefully constructed content.

2. Accessing Evernote on a mobile device Evernote is a great application for organizing and accessing your electronic notes, links, and other bits of critical information. (Admission: I use Evernote to collect interesting free movies from the lynda.com library that I want to use in my featured five blog posts.) In this movie from chapter one of Up and Running with Evernote for Mac, David Rivers shows you how to get Evernote set up so that you can add notes via your mobile device. If you’re primarily working in a Windows environment, there’s an analogous movie in chapter one of David’s Up and Running with Evernote for Windows course, as well.

3. Using the iPhone and iPod Touch Maps app Admittedly, using the iPhone (or iPod Touch) Maps application is a fairly straightforward proposition, but in this excerpt from chapter nine ofiPhone and iPod touch iOS 5 Essential Training, Garrick Chow shares some insights into using the compass feature that I always found confusing. Not only can the Maps app help you discover what is around you, and how to get there, it can also help you orient yourself by showing you which direction you are facing in your current location. After all, it’s always good to start out heading in the right direction!

4. Identifying the four pillars of iOS development For the developer types who have already figured out how to use their mobile devices, going mobile is more about focusing on the creation of mobile applications. As with any metaphorical or physical journey, it’s always good to have a scope of where you will start, where you will end, and how you will get there. In this excerpt from chapter one ofiOS SDK Essential Training (2012), Simon Allardice shows you how to approach your iPhone application development, and elaborates on why tools, language, design, and process are the four pillars—or, the four important areas of content—that you need to have all together in order to build the applications that you want to make.

5. Exploring the lynda.com mobile site Finally, a lynda.com collection of mobile tutorials wouldn’t be complete without a look at how you can take the lynda.com library with you wherever you go via your own mobile device. In this movie from chapter one of the How to Use lynda.com course, Garrick Chow demonstrates the features and functionality of our new mobile site, so you can get to learning wherever you are:

We’d love to know more about how you are using your mobile devices, and how mobile technology is changing the way you work, and play. Which activities have gone mobile in your computing life? Are there some jobs that still feel best done at your desk? Tell us a little about your relationship with your mobile devices in the comments section below.

By Ray Villalobos | Saturday, April 21, 2012

Easy ways to add photo and video galleries to your site

An easy media strategy for your company

In a previous job designing web sites for a newspaper, I discovered the value of media. When I started to learn about traffic patterns on web sites using an analytics product, I realized that photos, videos, galleries, and slideshows can significantly increase the amount of time people will spend engaging on your site. On any given day, our most popular article would give us around 20,000 page views, but publishing a slideshow could easily produce four to six times that amount of traffic, and it took less time to put together.

Think about it—when you go to Facebook, what are you more likely to interact with, a status message or a gallery? Facebook knows galleries get more interaction and ranks posts to appear more prominently on the timeline if they contain any sort of media. That’s why it’s better to include a photo or a video in your posts. (For more on this, check out Anne Marie Concepcion’sSocial Media Marketing With Facebook and Twittercourse.)

While photos can be quite easy to take, creating a gallery system can be more challenging. This week on View Source, I will show you an easy way to create photo galleries for your web site using a jQuery plug-in called Galleria.

What about videos?

Videos are another great option that can help you make your site stickier and more engaging, but they can also be harder to host and display on your site. If you’re looking to have a collection of videos on your web site, one good option is to have YouTube host your videos. YouTube has the infrastructure to serve four billion videos per day and has 800 million unique users in a month, and YouTube videos are easy to include in Twitter, Facebook, or WordPress posts since each upload has its own easy to embed, pre-written code housed under the Share button.

In addition to embedding videos, the best way to improve the visibility of your videos is through a YouTube channel. A YouTube channel gives you a presence on YouTube that will be indexed by Google, so uploading your videos has the added advantage of making them more easily found by YouTube’s huge audience, as well as Google’s. You can add descriptions (with links back to your sites), tags, and people can subscribe to your channels to keep up with your latest videos.

What about my web site?

If you’re a web developer and you’d rather not use the YouTube embed link to post your videos to your site, take a look at this episode of View Source, where I show you how to read a YouTube-provided XML file that lets you add a YouTube channel playlist directly to your site. The task of converting information from one data format to another more usable format is called Parsing and it is a key skill that all developers need to master.

If you’re into WordPress, or want a cut and paste solution, take a look at this JavaScript snippet for placing a YouTube Feed on a site. Simply paste the code in WordPress as a Widget on a sidebar. There’s a bit of customization required, so be sure to read the notes on how to modify it for your YouTube channel.

If you use any of the above solutions, when you upload to YouTube, your embeds, sidebars, and on-site playlists will also automatically update and reflect your changes right on your site. That alone simplifies the production process quite a bit.

Ultimate automation

One feature that you might not be aware of is the ability to upload directly to your YouTube channel through most smartphones. Smartphones, like iPhones and Android devices, have excellent built-in video editors that will quickly let you crop out and adjust your video before sending it directly to your YouTube channel. Using tools like this is a great way to cover special events, and a quick way to post to your site remotely without having to import, edit, and upload your video through a traditional desktop application.

Editing, enhancing, and posting to youtube is easy on most smartphones

There’s a lot more you can do with YouTube, like create a special channel for users to post videos to directly. In one of my previous jobs, we created a channel for a contest where people submitted videos of themselves dancing to win tickets to a concert. The videos submitted are aggregated, but not posted live until approved. You can also annotate messages into your videos, and alter your movies with YouTube’s built-in editor. It’s definitely worth a second look when creating your workflow strategy.

Conclusion

A photo online is truly worth a thousand words, but the power of video is not to be underestimated. Having a good strategy and utilizing tools like Galleria and YouTube will expand your brand’s reach, make your life easier, and make your sites more engaging in the process.

Interested in more? • The full View Source weekly series on lynda.com • All web + interactive courses on lynda.com • All courses from Ray Villalobos on lynda.com

Suggested courses to watch next:• Create an Interactive Video Gallery with jQueryCreate an Online Photo Gallery with jQuery and DreamweaverCreate an Interactive Map with jQuery and DreamweaverjQuery Essential Training

By Ray Villalobos | Saturday, March 31, 2012

How to become a web developer: Tips for those with a print background

I meet a lot of people who come from a print background and are interested in learning new web skills. Learning to make that transition doesn’t have to be scary—I know because I was one of those people who learned about designing for print first and then moved on to the web. I went through my first few jobs working for commercial printers learning about paper, inks, imageSetters, imposition, trapping, film, and typography. When the web came around, I realized that it was the next big thing and I needed to learn as much as I could about it in order to survive in the long run. Eventually I managed to learn what I needed and move on to work on the web full-time.

The web can be scary, but learning new web skills doesn’t have to be hard. It’s like trying to eat an elephant…you have to do it one bite at a time. In this post I will share some of my learning experiences and offer some recommendations for those with a print background who are interesting in learning more about web development. I encourage you to share your print to web journey, and to ask questions, in the comments section below.

Overcome the experience deficit

Every job listing will ask for years of experience. Whether it’s two years or five-plus years, I’ll let you in on a secret—the years are not as important as your portfolio. If you come from the print field, you know what I mean. Generally people get hired based on what they’ve accomplished, not how long they’ve been doing it. I know because I landed my first online job with zero years of experience in the field, and I did it by building a portfolio of work that was equivalent to years of experience. Although I hadn’t worked in the industry, I had projects to show that I knew what I was doing. So, your first step in the print to web development migration is to start building websites as soon as possible.

Start by learning how to build sites with WordPress. It doesn’t require any development skills and it’s pretty easy. You’ll need to know how to set up WordPress and how to set up a server with your own domain name. For help with this, check out Managing Hosted Websites, a course that goes through the process of setting up a domain name and installing WordPress. Once you’ve installed WordPress and set up your server and domain name, it’s time to start building web sites. For this I recommend checking out WordPress Essential Training. Some entire businesses are based on building web sites with WordPress, so it’s a great first skill that will help you gain some of that critical experience everyone is looking for. Plus, it’s a marketable skill that you can use to build a portfolio of work right away.

In this clip from chapter one of the Managing Hosted Websites course, I discuss how to pick the right domain name before you choose your server, since your domain name decision will have an impact on how people arrive at your web site:

Just knowing how to install and work with WordPress is not enough, though. What people will really want to see is how well you can customize a WordPress web site. Go through WordPress: Creating and Editing Custom Themes to sharpen your WordPress customization skills, then dive into Create an Online Portfolio with WordPress (because after you’ve got a few sites under your belt, you’ll need to show off what you’ve done).

Build from your Strengths

Another thing I did when I got started was to focus on building from my strengths. I had a design portfolio, so I started learning software that would let me build on design skills. This was the late ’90s so I began by learning a program called GoLive, a website editor much like Dreamweaver.

I already knew how to use Photoshop, so I worked with those skills and focused on designing projects for the web first in Photoshop, and then transferring those skills to Adobe Fireworks, which is better for preparing online graphics. I knew about formats like EPS, PDF, and TIFF, so I learned about the online formats like GIF, JPEG and then PNG. The point is, when you get started plan to evolve your skills instead of trying to learn too much.

So, if you’re starting with a background in design, check out Designing Web Sites from Photoshop to DreamWeaver. This course will point you in the direction of a quick win and teach you how to build on your existing Photoshop knowledge. From there, move on to DreamWeaver with Dreamweaver CS5 Essential Training.

Find out what the market needs

Even when I was a new designer, I knew that development skills would be very valuable, but that learning development wouldn’t happen overnight. So right away I established learning development as one of my long term goals. I started with HTML since it was the easiest to learn. If you’re just getting into development, I recommend you start with HTML 5 Structure, Syntax and Semantics. It’s a thorough course that explains the basics of HTML. CSS wasn’t as critical to learn when I got started in the ’90s, but it is very today, so I would head in that direction after HTML. If you’re primarily a designer, then this should be an area of focus for you. Start with CSS Fundamentals, then move on to CSS Page Layouts, and plan to go through one new CSS course per month.

In this movie clip from chapter three of the CSS Fundamentals course, James Williamson asks the question “What is CSS3?” and walks you through the answer in detail:

Becoming awesome

Once you’re past the basics, your next skill should be JavaScript—this is a very hot skill. JavaScript is one of those topics that can be tougher to learn, but the better you get with JavaScript, the more sought after you’ll be. Start with JavaScript Essential Training and then move on tojQuery Essential Training. (jQuery is a javascript framework that helps you build interactivity into your projects easily and handling a lot of cross-platform issues.)

Once you’ve got those under your belt, move on to a server-side programming language. I recommend starting with PHP and then moving on to MySQL. Once you’ve spent some time with JavaScript, the same programming concepts apply to PHP and MySQL, so they will be easier to pick up. As you begin looking for development work, you’ll start to notice those two languages featured prominently in job descriptions. Remember, the stronger you are, the more you’re worth. When you’re ready, try out PHP with MySQL Essential Training.

Conclusion

Remember the elephant…one bite at a time. Don’t get overwhelmed with all the technology. Make yourself a plan and remember to be consistent with learning. Even if you watch only one movie a day or a few movies a week, you can make a dent in that virtual elephant and build enough experience before you know it. Using myself as a case study, I know you can do it. There weren’t any special skills I started with, I was a print designer just like you. If I can do it, I know you can. Just remember, even when it seems overwhelming…you can learn it!

By Ray Villalobos | Friday, January 27, 2012

View Source series introduction: Adding breadcrumbs and custom URLs to WordPress websites

Most of the tools and languages we use online are constantly changing. HTML itself is in constant flux, a new version of Firefox releases every six weeks, and who knows what’s going to happen next with video formats. It’s enough to drive you crazy. Suffice it to say that the web design and development industry demands people who are learners by definition.

Sometimes the hardest part about any new learning commitment is getting started. If your pile of work is not getting any smaller, and you’ve only got a few minutes to learn something new, then View Source may be the series for you.

View Source, which is named after the view source browser-function that allows you to see a web page’s underlying code, is a new lynda.com series that offers 10-minute intermediate and advanced web design projects. Each movie in the course is self-contained and shows how to accomplish an interesting effect and/or technique.

view source example At its core, View Source is about being curious and developing an attitude for learning with limited time.

This week, I’ll show you how to add WordPress breadcrumbs to your pages, per Google’s recommendations (see Google’s SEO Starter Guide).

I love WordPress, but sometimes it doesn’t behave how you need it to and it’s easy to see that it started out as a blogging platform. On the positive side, the awesome thing about WordPress is that it’s easily customizable with HTML, CSS, JavaScript, and PHP, so if you know how to work with those languages, it’s quite easy to make WordPress do your bidding. In Adding breadcrumb links to your WordPress sites I show you how to incorporate breadcrumbs into your WordPress website by adding a function to your functions.php file.

Another thing Google recommends in its SEO Starter Guide is generating more meaningful URLs that are rich with keywords. By default, your WordPress links probably look something like:

http://viewsource.com/?p=2

Since this is not very descriptive, it would be better to have a category and the name of the article in the URL. Maybe something like this:

http://iviewsource.com/webtips/view-source-adding-breadcrumb-links-to-your-wordpress-sites/

In my second View Source installment, Creating a custom URL in WordPress, I show you how to easily modify the look of your URLs by changing your Permalinks settings, which can be found in the admin section of WordPress under the Settings menu. The default options WordPress gives you emphasize organizing things by date, but I also show you how to apply Custom Structure options in my tutorial. More information about how to further modify your WordPress permalinks is also available in the Using Permalinks WordPress documentation.

In the next View Source installment, I’ll show you how to use Content Delivery Networks when calling your JavaScript Libraries, which can speed up how quickly your sites load, and I’ll also discuss how to build an Image Rotator using a jQuery plug-in.

See you in two weeks with more View Source!

Interested in more? • The entire View Source series • All developer courses on lynda.com • All courses from Ray Villalobos on lynda.com

Suggested courses to watch next:• CMS FundamentalsWordPress 3 Essential TrainingFoundations of Programming: FundamentalsSocial Media Marketing with Facebook and Twitter

Get the latest news

  •   New course releases
  •   Pro tips and tricks
  •   News and updates
  
New releases submit clicked

You can change your email preferences at any time. We will never sell your email. More info

Featured articles

A lynda.com membership includes:

Unlimited access to thousands of courses in our library
Certificates of completion
New courses added every week (almost every day!)
Course history to track your progress
Downloadable practice files
Playlists and bookmarks to organize your learning
Become a member

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.