HTML Code Graphic - design by Lorelle VanFossen.

What Do You Need to Learn to be a WordPress Expert?

In “Wanna Create Dynamic Websites? Learn JavaScript” by Daily Blog Tips, Daniel Scocco says:

If you want to become an expert programmer and make a living developing software you’ll need to learn a wide range of stuff, from logic gates to how the hardware works, from algorithms to data structures and programming paradigms (if this is actually what you are looking for I suggest you peek at the curriculum of the Computer Science degree on some good university and follow along).

Luckily, Clark College’s degrees for Web Development, Web Programming, and Computer Graphics Technology degrees include the skills you need.

What do you need to learn to be a WordPress expert?

There is more to WordPress than designing a pretty WordPress Theme and writing blog posts. WordPress is based upon a tripod structure of code, content, and design.

WordPress Themes and Plugins require HTML, CSS, JavaScript, PHP, jQuery, AJAX, and API competency. Themes are not just designs, they are designs built upon programming, allowing the user or designer to set specific conditions to change the design based upon the visitor’s requests and actions.

For example, some WordPress Themes use AJAX in the comments box. A visitor leaves a comment and the page does not reload after they hit submit. The comment just appears within the comment queue. Themes may be designed to change their look and feel based upon the pageview such as the front page, single post pageview, search, author, or category pageviews.

Let’s address them individually, providing resources to learn more on your own to help you support the programs you are taking at the college as well as learn more on your own.

HTML Code Graphic - design by Lorelle VanFossen.

HTML and CSS

HTML is the architecture that supports every page on the web. It holds the design in place.

CSS is the paint, the design styles that influence the graphic elements, colors, shapes, and sizes within each HTML container or tag.

Want to change the color of links on your site? You don’t change the HTML, you influence the look and feel of the HTML Anchor tag that creates those links.

A link has five standard style types known as pseudo-classes: link, visited, hover, focus, and active.

The styles associated with a:link are seen on a link that hasn’t been clicked or visited. The a:visited class displays the color of the link after it has been clicked or visited. Hover changes the style when the user hovers over a link, focus changes the design of the link when clicked, and active changes the design to indicate the user has clicked the link, a confirmation of the action.

Many web designers look at these design steps as dressing the link up for a special event. Web programmers look at these as conditional tags, programming language changing the look and feel of the link based upon the action of the user.

This is inherent in all WordPress Themes, so let’s take it a step further.

In a WordPress Theme, a conditional WordPress template tag could be used to create a programming logic statement that read:

If the user is viewing the front page of the site, show the a:link as blue.
If the user is viewing a category pageview on the site, show the a:link as green.
If the user is viewing a single post pageview (the post or article), change the a:link to purple and make it bold.

While this example is unlikely, it demonstrates how WordPress Theme programming can change the styles based upon conditions, programming code based upon user actions, expanding the potential of design options.

Programming Basics

While you may skip directly to PHP and JavaScript, understanding some basic functions and features of programming languages will prepare you for embracing PHP, JavaScripts, databases, and APIs.

Similar to the example above, understanding programming languages exposes you to the world of WordPress Theme design features, options, and actions based upon not just the action of the user, but the designers of the designer and site owner.

A simple and common programming features of WordPress Themes for commercial sites involves advertising space.

If the post viewed is in X category, display the Y advertisements in the sidebar.

In this example, X is a list of specific categories, and Y is the ad campaign associated with each category.

  • Fruits Category –> display fruit advertising
  • Vegetables Category –> display veggie ads
  • Meats Category –> display carnivore ads
  • Dairy Category –> show cow ads

This is an example of using the PHP-based WordPress Template Tags to display ads specific to the category the post resides upon.

What happens if a post is in more than a single category? The programmer needs to take this into account and make one category more important than the other, or make different ad choices to display ads from each category without overwhelming the sidebar contents. This is where programming skills, understanding the sequence of events and consequences, are necessary for WordPress Theme development.

To set the options for this ad campaign, the user needs to input the ad images and links. The WordPress Theme or Plugin developer adds a settings page to the WordPress Administration Panels, a form for the user to type in the information for each category.

Creating a Settings Page in WordPress modifies the Administration Panels. Typically placed under the Settings menu, the settings page needs to be populated with the actions and options to be set, and designed to fit into the look and feel of the Admin Panels.

The Theme Customization API and Plugin Application Program Interface (API) make many of these steps mere shortcuts, easy-to-do, but the developer needs to know the code steps to take to add the functionality based upon the APIs.

Let’s take this a step further and say that the client wishes to have each post within a specific category look different. This is common to movie and book review sites wishing to present the topic with design elements representative of the entertainment genre, such as stars in the background of a science fiction review, loves for romance, military for war, and horror images for that genre.

Using similar code to the advertising campaign, the Theme would use the same conditional tags to change the design for each category the post is in.

  • Science Fiction Category –> change the background to stars
  • Romance Category –> change background design to show lovers walking into the sunset
  • Military and War Category –> change background design to show weapons and military vehicles, and add a badge in the top right corner of the header in support of the troops
  • Horror and Thriller Category –> change background design to collage ghosts, vampires, and haunted houses

It is the programming that influences the design.

Example of a WordPress Theme design where the background changes based upon the category the post is in, graphic by Lorelle VanFossen.

In another example, let’s say the user wishes to display the posts on the front page of their site in alphabetical order rather than the standard reverse chronological order. To do so, they must modify The Loop of the WordPress Theme.

The WordPress Loop is the code engine that runs WordPress. The code within it dictates what the reader sees when they click a link and take action on any web page within the Theme. The Loop is based upon PHP and JavaScript as well as WordPress template tags, PHP and JavaScript code shortcuts designed specifically for WordPress.

Using a combination of Loop modification, WordPress conditional tags, and post queries, this can be accomplished – changing the design elements and look and feel of the site based upon code.

Information is stored in the WordPress database, a SQL database. Learning about post queries, how to add and remove data from the database, is essential to WordPress Theme and Plugin design and development.

Understanding the various APIs associated with WordPress, as well as other interfaces such as social media logins, Google tools, etc., is essential to WordPress Plugin and Theme development, taking into account resources and libraries of tools beyond your site and server.

Designing for the responsive web, sites and applications that break the browser barrier to be used on mobile devices, televisions, and other mediums in the future means understanding and using the underlying technologies, the programming.

In the July 2013 presentation of the “State of the Word” by Matt Mullenweg, co-founder of WordPress, he announced changes to the WordPress core to segment it into components, much like WordPress Plugin modules, to support the future of web design, development, and programming. There is a growing trend of developing mobile apps on the backbone of WordPress architecture, often disguising the fact that the app is run on WordPress completely. It’s a strong and flexible platform and allows sophisticated programming to run within its framework.

As the core changes to components, WordPress developers are diving into the code with a vengeance, pushing the “blog” publishing platform far into the future.

If you wish for a career in WordPress Theme design and development, it’s your future, too.

Related Articles

For more information

Advertisements

6 thoughts on “What Do You Need to Learn to be a WordPress Expert?”

  1. Knowing that you have the codex to save your butt is a big help too 🙂 Trying to figure out what tags can be used inside or outside of the loop or how to setup a loop to pull custom taxonomies that are of a custom post type…all things I have ran into many times over. The best thing I think you can do is jump in and get your feet wet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s