Ladies Learning Code Workshop

2013/11/23

This weekend I was lucky enough to be asked to help instruct at Ladies Learning Code at Startup Edmonton. From their website:

[Ladies Learning Code is] a women-run not-for-profit group working to empower everyone to feel comfortable learning beginner-friendly technical skills in a social, collaborative way.

Lead by head instructor Kasia Gawluk from Code Word Media Design, the workshop was a full day crash course on WordPress development. Slides, from Wes Bos, are available online. Ladies Learning Code (#LLCYEG) is unique in its approach to learner/instructor ratio mandates. There is a 4:1 (or better) ratio of learners to instructors, which allows for plenty of opportunities to ask specific question and get directed support. We started with MAMP installation, downloading WordPress 3.7.1, and setting up a local WP development environment. The WordPress Codex has a great tutorial for this stage of the game, and we followed it almost to the letter. I am a strong believer that questions are where the real learning happens, and the morning started off with many great questions:

As many people are using different computers, different softwares, and different configurations… getting 40 different WP installations set up took a little more, than the famous 5-minutes. Once we have databases configured on everyone’s computer, and WordPress configured on everyones local hosts… we are away at the races. Presumably, the next step will be installing a custom theme, and moving from there.

No photo releases required.

No photo releases required.

I was wrong, content before customization. We are building some posts before we start themeing (is that a word?).

A few questions have been raised about the difference between Categories and Tags…  There is a nice breakdown on WordPress.com.  On this site, I use Categories to categorize my posts and I use special functions to pull posts tagged with ‘featured’ into the featured post area at the top of the home page.

Setting up a static page as your home page keeps your posts on a Blog page… You can change these settings at Settings -> Reading. Just remember, you must have pages published to change your Reading Settings. Also, remember, that sometimes your rewrite modules are not configured by default on WAMP… thank you to room339 on the WordPress Support forums.

In WAMP you need to turn on the rewrite_module. To do this click on the WAMP icon in your task bar and navigate to: Apache>Apache modules> Scroll down to rewrite_module and click it. Once you do this your pages should work immediately.

Another great question: Do permalinks affect how you are listed in the Search Engines? Yes. Check out this article on Yoast for more details… I prefer month and name on the WordPress backend, Yoast says:

The default permalink is ?p=<postid>, but I prefer to use either /post-name/ or /category/post-name/.

Different strokes for different folks I guess. Also, when writing the posts in your post editor, you can use the Visual Editor, or the Plain Text Editor, which can process HTML. From the WordPress.com Support pages:

Note: The HTML code you add must be well-formed and it must be listed in the allowed HTML tags list. You should also be aware that WordPress.com has some code restrictions such as no JavaScript, embeds, or custom forms.

Now that we have content, alive and ready, we install a theme, I like to follow the WordPress Codex for this, and then we ensure that we are editing the live theme in our favourite text editor.

Our theme follows a hierarchy, a template hierarchy… which is a pattern that determines which template file, or php file is used when the user visits a certain page. Learn more about the Template Hierarchy on this sweet data visualization by Michelle Schulp. This infographic will help us determine which file to edit when we want to change the look of something on the front end.

Custom Login Screen

Some people are enjoying the free time as others catch up… check out some of the sweet customizations on this GIST code by Paul, see some more customizations and code snippets as he adds them on his GitHub profile.

The anatomy of a WordPress theme may seem daunting at first, but it is logical, patterned and similar across almost every theme. So once you understand it, you can see the familiar pieces on each and every theme.

First edits we are making are to footer.php, classic edits to the copyright attribution… Confidence in HTML/PHP is key here… don’t be afraid to try something, and fail… and then fix it. Iterative development is key.

Adding images in the backend of a theme teaches us so many useful skills. From WordPress core functions, to mixing PHP and HTML, to bug tracking and fixing… it is a great introduction into theme edits.

Taking a moment to field questions to get everyone caught up just after lunch.

Now, we move on to CSS… which is the Cascading Style Sheet that adds the presentational semantics (look and format) to the elements from our PHP and HTML.

We start with changing colors, learning about properties and values, and how selectors work for IDs and Classes. There are some good crash courses on CSS at html.net and codeacademy… I would recommend checking out codeacademy first, because they make learning into a fun fun game.

<?php 
    if ( have\_posts() ) {
        while ( have\_posts() ) {
            the\_post(); 
            //
            // Post Content here
            //
        } // end while
    } // end if
?>

Quote I just heard from my amazing group at the back of the room:

I feel so victorious … I was working for a while,  I was stuck on that point and now I figured it out. Every time I start coding again, I remember how much I love it.

That is exactly what I am talking about. That is what coding is all about.

I am finding that while it is easy to follow instructions the first time, it is difficult to repeatably follow the instructions, or the critical path, even when the application changes slightly.

A good example is that it is very easy to add an image as the header image, as a link back to the front page. But, once it is a matter of adding an image that links back to the homepage into the sidebar, it feels like a different problem, when in actuality it is the same code, in a different context…

a happy event!

The “best” table at #LLCYEG WordPress Edition.

I like to relate the loop to a giant magical lasso. All you need to do is whisper what you wish for, and then cast it into the abyss… then reel in all your wishes.

Adding featured images is the best way to give each post some visual content. The theme that is used on this blog actually depends on featured images extremely, as it is a hyper-visual magazine layout. Also, the featured image allows for consistent styling of the images on posts and pages without considering styling. This avoids the issue of clients that try to align things crazy, or authors that add in images that are WAY TOO BIG.

Custom page templates are critical in the custom display of content. It is absolutely integral to ensure that you have set the custom page template header text correctly, as it detailed on this article on the codex.

Widget and Plugins were very briefly covered at the end of the day, these are incredible ways to extend the functionality of WordPress.

Final thoughts:

  1. Take a peek under the hood.
  2. Practice, practice, practice.
  3. Ask questions, ask google.
  4. Don’t be overwhelmed, start with a minimum working product.
  5. Try things, make mistakes, fix those things.