Speaker at WordCamp Birmingham – More WP REST API

I am excited to be a speaker at WordCamp Birmingham 2016. I’ll be speaking on October 29th – just a couple weeks away and now that they have announced the #wcbhm schedule I’m announcing my participation as well. I’ll be opening up the developer track for the day at 10am. I will be presenting more about the WP REST API. A lot will be taken from my WordCamp Raleigh presentation on the same subject, but as usually happens, once you do present, you realize a few holes in your slides and have some additions, suffice it to say, this won’t just be a repeat presentation.

wordcamp-birmingham-badge-speaking

WP API, What is it Good For? Absolutely Everything!

I am very excited about the WP API and am tracking it’s progress closely. There are big discussions as to when it will be rolled into core and all and we’ll discuss these details in the presentation, we’ll also discuss things we can do with the API. It allows us to further separate the data from the code. Because WordPress is a great CMS we can use it to manage our data and then via the API access that data to power whatever we like. We’ll touch a handful of examples and explore an iOS app pulling all it’s data and assets from a WordPress site via this API. We’ll discuss authentication and terms to bring API beginners up to speed on what it’s all about!

So if you’re anywhere close, I encourage you to go get yourself a ticket (just $20) to WordCamp Birmingham and check it out. There will be many other presentations worth checking out as well. I hope to see some familiar faces in Birmingham!

Speaker at WordCamp Raleigh – WP REST API

I’m pleased to be a Speaker at WordCamp Raleigh as well this year. It will be all about the WordPress REST API! WordCamp has been a quick turnaround in Raleigh, it’s already coming up this weekend, September 24-25th, and my speaking time is Saturday afternoon at 4pm. I’ll discuss the forthcoming API, which is partly integrated into WordPress core, but in order to use still requires we install the feature plugin. I’ll recap the history so we know where the API came from, talk about what it means to the WordPress ecosystem, and the web as a whole, that every site will have an API built-in. We’ll talk about routes and endpoints and authentication as well as look at some brave examples that are using this beta feature in production! Get your tickets (there are still about a dozen available) and come out out to Raleigh, North Carolina for WordCamp 2016.wordcamp-raleigh-hero-2016

WordCamp Presentation

WP API, what is it good for? Absolutely Everything!

See the Power of the WP API. Now that every WordPress website has (or will have) an API built-in, what can you do with it? It allows us to further separate the data from the code. Use WordPress to manage our data and then via the API easily access or update that data to power whatever we like. We’ll touch how to set it up and a handful of examples and then explore an iOS app pulling all it’s data and assets from a WordPress site via this API.

banner-772x250

This will be geared for developers with some “how to” but also for everyone interested in the power of WordPress and where things are heading.

  • Learn how to spell WP-API
  • Learn about the power and flexibility it brings to WordPress
  • See it working in a live app

I’ll update this post with slides and links and notes and maybe one day even a video of the presentation as WordCamp Raleigh. I’m excited to meet the Raleigh WordCamp enthusiasts and share what I can with them as well as the WordPress community as a whole. It’s been quite a busy year as far as speaking and especially this fall, as in 2 weeks I’ll be down in Orlando for another WordCamp.

Speaker at WordCamp Orlando – Intro to WordPress Development

I’ll be a WordCamp Speaker in Orlando this year. WordCamp Orlando is October 8th and my speaking time is Saturday afternoon. My presentation topic will be a crash course intro to development for beginners. I’ve given some presentations similar to this at work and have even had pieces of this presentation in parts of other talks I have given, but it will be nice to just focus the whole time on the intro for attendees that feel dev presentations get too deep too quickly.orlando-wordcamp-hero

So You Wanna Dev? Join the Team!

“WP Dev/tools for beginners: ftp, git, svn, php, html, css, sass, js, jquery, IDEs, themes, child themes, the loop, hooks, APIs, CLI, agile, bootstrap, SEO, slack… etc.
We’ll discuss the language and various acronyms and buzzwords used by devs in this crash course introduction to the developer’s world. Overview of primary development processes and terms and what software is needed to play the game. We’ll cover what you need to go from zero to developer and hopefully how to have fun on the way.”

I’ve been a WordCamp Speaker in the past, but it’s been specific to Atlanta. Orlando will be fun and I’m excited about the KidsCamp sessions they have going too!

WordCamp parents can now usher in the next generation of WordPress builders at our first annual KidsCamp! Parents attending WordCamp can bring their junior builders along and enjoy a day of parent-child learning under the tutelage of some of our WordPress Master Builders!

WordCamp Orlando 2016 will be at the UCF Rosen College of Hospitality Management in south Orlando! So get your tickets and bring the kids. I may or may not be stopping in to Harry Potter World while I’m in town. =)

Speaking at WPCampus

I’m pleased to announce that I’ll be speaking at WPCampus! It’s the conference “Where WordPress Meets Higher Education”. My presentation is titled ‘The Modular Web For WordPress’.

WPCampus 2016 is the inaugural conference for the WPCampus community, a gathering of web professionals, educators and people dedicated to the confluence of WordPress in higher education. The concept for WPCampus is an education focused, non-profit event which will allow people to share and learn about WordPress in the world of higher education. So if you’re into WordPress and/or higher education and/or the web in general, it’s the place for you come July. Get a ticket to a wealth of knowledge and ideas.

wpcampus-speaker-confirmation

I will be presenting on a topic that I’ve thought a lot about and have become pretty passionate about. I’ll discuss Modular Web Development and specifically how to integrate a modular development mindset into a WordPress development workflow.

Here is the official session description:

WordPress the CMS, meets the Modular Web. We need to stop thinking about a website as a collection of pages and templates, but as a set of modules and a system to manage them. Modules, like Legos, are interchangeable and can be combined fairly quickly to create an infinite number of results all while both showing variety and remaining consistent. With this modular paradigm shift, our workflows improve, our websites improve and our very well-being improves. Let’s explore how to use WordPress to manage site content using modules. We’ll see what this does for our development process and programming as well for our content management via the admin. We’ll discuss how to build and maintain a module library, and use it for every site you build. These principles have been immensely helpful in each team or project where I’ve put them into practice, so we’ll even take a look at a few examples and point out where to learn more.

legos

While this may not be a topic specific to higher education, I think it very relevant in that having a smart process helps projects be more flexible, more on time and more on budget. I’m happy to be able to contribute to WordPress in education as well as WordPress ideas in general. I will be speaking on Friday, July 15th (I’ll try to update this with a time once it’s decided and announced). As I said, tickets (early bird even) are available now so go get yours. And if you’re interested check out my other presentations.

Recapping WordCamp Atlanta 2016 – Day 0 – The Dev Workshop

Just off a busy but enjoyable weekend of WordCamp Atlanta @wordcampatl. I was able to attend the friday developer workshop and the Saturday sessions of the conference. Though I was a speaker at WordCamp Atlanta in 2012 (From Photoshop PSD to WordPress Theme), 2013 (Your firstborn child theme. Child themes 101+2), and 2014 (Custom Post Types or Choose Your Own Adventure), I couldn’t make it in 2015, I wasn’t selected this year as a speaker. However, I was also able to volunteer to help out and to take some photos and staff the Happiness Room. I also volunteered a couple weeks ago to speak at a WordPress meetup group (Modifying Your Theme’s Design – Learning CSS), so I feel like I was able to still give back.

2016-03-18 12.46.19

Overall

TLDR; It was a great conference and like always, talking to people was the best part, though there were some great informative and even entertaining sessions I attended.

Beginner WordPress Development – Workshop

Micah Wood Aaron Reimann

2016-03-18 09.16.25

The workshop was a great way for many to get started with WordPress development. Micah and Aaron went over from the basics of development through child-theming. I stepped up to help others get started, since we were all installing mamp to get a local wordpress install setup. Even with the famous 5 minute install it was taking most people a long time to get setup, though we can blame the wifi for most of the issues I believe. We then cloned Micah’s child theme demo from github into our theme dir and he get started through the demo. Follow along by reading his blog post length commit messages. It was great to help out! I even learned a few tricks about some WordPress hooks, the loop and template hierarchy.

I’ll share one tip many might not have realized when dealing with child themes. The difference between get_template_directory_uri and get_stylesheet_directory_uri.

I’ll post an update on Day 2 when I’ve had time to digest some more of the great presentations.

 

Custom Post Types or Choose Your Own Adventure – WordCamp Atlanta 2014

I’ve been fortunate enough to be able to present at WordCamp Atlanta 2014. That makes the 3rd year in a row I’ve been able to contribute to WordCamp Atlanta!

WCATL-Speaker

Here are my slides. I’ll be posting a full blown post of my presentation as soon as I can get it all down. Plus I hear there will be a video posted to wordpress.tv at some point, so, watch for that.

WordPress presentations on WordPress.tv

I’ve made presentations at WordCamp Atlanta for the past two years. I’d been told the presentation was recorded and would be added to the repository of wordcamp presentations at wordpress.tv both times, long story short. They have both made it online now. Thanks to whoever posts them and Happy Birthday WP. Enjoy the presentations!

WordCamp Atlanta 2012
Evan Mullins: From PSD to WordPress Theme: Under the Skin
This presentation covers how to get from Photoshop to WordPress. There are many different roads to a theme. Covering a few possibilities and then cover getting from a design in Photoshop to an actual WordPress child theme while trying not to reinvent the wheel.
http://wordpress.tv/2013/05/24/evan-mullins-from-psd-to-wordpress-theme-under-the-skin/

 

WordCamp Atlanta 2013
Evan Mullins: Your Firstborn Child Theme- Child Themes 101+102
Learn how to mod themes the right way. Using child themes you won’t loose your edits when there’s a theme update.
http://wordpress.tv/2013/05/04/evan-mullins-your-firstborn-child-theme-child-themes-101102/

Presenting at WordCamp Atlanta – Child Themes

The presentation? Your firstborn child theme. Child themes 101+2.

I’m speaking at wordcamp atlanta this afternoon about themes and child themes. I’ll update this post with post-presentation notes.

Learn how to mod themes the right way. Using child themes you won’t loose your edits when there’s a theme update. (101) We’ll go over the advantages and how to set up a child theme. (102) Plus we’ll cover some tricks to make the process a bit easier.

Slides on slideshare

Presentation video via wordpress.tv

Speaker at WordCamp Atlanta 2013

speaker-lineupI’m excited to be speaking at WordCamp Atlanta again this year! The time is quickly approaching for WordCamp Atlanta 2013, March 15-16.

I spoke last year and discussed the process of going from Photoshop PSD to WordPress Theme, here are my slides and notes for that WordCamp Presentation.

This year I’m speaking along the same lines but more specifically about how to create a child theme. Here is the description:

Your firstborn child theme. Child themes 101+2
Learn how to mod themes the right way. Using child themes you won’t loose your edits when there’s a theme update. (101) We’ll go over the advantages and how to set up a child theme. (102) Plus we’ll cover some tricks to make the process a bit easier.

Fear not, I’ll share slides and notes on this presentation as I can. First, I’ve got to go prepare.

Do you have any pain points or specific questions you’d want addressed regarding creating child themes I could work in and answer for you? Hope to see you there!

Speaker Lineup | WordCamp Atlanta.

WordCamp Presentation Slides: From Photoshop PSD to WordPress Theme

from photoshop to wordpress theme presentation

Here are my slides for my WordCamp Atlanta presentation, From PSD to WordPress Theme: Under the skin:

This presentation covers how to get from a photoshop design to a theme in WordPress. The sample theme I use in the presentation is actually live at http://psd2wp.circlecube.com. I’m not trying to teach css or html here. I more wanted to focus on the process I usually go through in creating a site or theme. Let’s work on this PDS template design called Corporate Clean, which was designed and published by Zsolt Kacso. I saw this done by a drupal theme shop and figured the wordpress world could use the same. (Also check out Corporate Clean for Drupal http://drupal.org/project/corporateclean and download the design they link to on that page: http://mttdownloads.s3.amazonaws.com/projects/kaolti/corporateclean_psds.zip)
corporate clean wordpress theme from photoshop

First, What is a Theme?

It is all the files that control the front-end and visual side of a site. It is all the files that control the front-end and visual side of a site. Major benefit to a theme (or a CMS overall) is separating design and content, which is the goal of standards based web design. Themes are made up of a combination of files: css, html, php, javascript, images…

The basic structure of a theme is usually something like: Header, Content, Aside(s) and Footer.
We know what types of files or templates we need to include in our theme by using the Template Hierarchy is how WordPress determines which template to use on each page. It looks for template files with specific names in the current Theme’s directory and uses the first matching template file listed under the appropriate query section below. (See Joost De Valk’s Anatomy of a WordPress Theme Infographic).

A wordpress specific term that took me a while to get used to was “the loop”

There are many different roads to a WordPress theme.

All themes are not created equal. There are different type and diffrerent qualitiy levels of themes. We can group them into these main areas though (some of which overlap):

  • Free – benefit, it’s FREE. Only problem is there’s not a great vetting process and a lot of themes out there aren’t good quality themes you’d want on your site (even if they look nice from the front).
  • Premium – although WP is open source software as in free, not all themes are free, some will cost you.
  • From Scratch – It is possible to make a theme from the bottom. This could be beneficial if you have something specific you’re not likely to find out there already.
  • Customized – A direction many take is acquiring a theme (be it free or not) and them customizing it to make it suit them. Not a bad if you’re starting from something that is nicely done, and you know how to get from a to b.
  • Standalone – Traditionally all themes were standalone packages, and the theme folder will contain all associated files.
  • Parent-Child – Since WP 2.7 we’ve had the ability to have parent-child relationships in theming! This means that you can have a theme you want to base yours on and separate any modifications you make to it into a “child” theme that will inherit everything else from it’s “parent”.
  • Frameworks – Frameworks are themes that have been designed to be used as a starting point or a parent theme. Some have feature rich options pages that allow you to build a theme or site from within the WordPress admin. These really help theme developers to avoid repeating the same code in every theme they make. One caveat to this is that if you’re new to WP, you need to learn all the wordpress specific code as well as any additional code for the theme framework . It complicates the learning curve a bit, but it has long term benefits of speed and ease.

My preferred theme route is using a theme framework. My preferred framework is thematic. Thematic is the ultimate in SEO-ready themes, it is a highly extensible framework which features 13 widget-ready areas, drop-down menus, grid-based layout samples, plugin integration, shortcodes for your footer, and a whole lot more. Thematic as of now is about to get a significant update as well. Resources for thematic include forums, guides, diagrams, tutorials, thematic4you …

Before getting into the design, let’s talk one more fundamental wordpress term: hooks

Hooks are spots in the code that are flagged for us to easily customize how our site or theme functions. To visualize, think about all the thousands of lines of code that gets executed to load a page on a site (yes, there are thousands), and think of it like each line of code is like someone in line at the gracery store checkout . They’d be lined up in order of execution. Hooks are like people in the line that are holding a sign allowing you to cut in line at that precise position to run your own code. There are action hooks and filter hooks in wordpress. Action hooks are for executing your own action at that spot in line, and a filter is about changing something in the line right there. Like if you wanted to insert some ad at the end of every post. You could either add an action that would place it there, filter the post content and add it to the content itself (and you could even filter the content before it goes to the database, or before it’s rendered onto the page). More on action and filter hooks here.

Returning to that added complexity of using a framework, many frameworks will add their own hooks on top of the wordpress hooks. So on top of learning any wordpress hooks you also need to learn the ones specific to your chosen framework where you need to access them. So once you get used to using one framework it may be painful to leave and loose and invested learning in that one. Check these diagrams of thematic structure (blue mandela.com and visualizing.thematic4you.com) including hooks for an visual representation. And the thematic guide to filters and hooks.

Getting from a design in photoshop to an actual WordPress (thematic) child theme while trying not to reinvent the wheel.

The Technical – Actually making the theme

Once you install thematic in your wordpress site, look at the theme directory (/wp-content/themes/thematic/) and you’ll see that thematic comes with a ‘thematicsamplechildtheme’. It’s nice that they thought of this, it gives us a great starting place! We copy that folder, rename it to whatever we want, and place it in the theme directory (sibling to thematic itself). Like so:

thematic child theme directory

The thematicsamplechildtheme has 3 files in it: the style.css, functions.php, readme.txt. I added the screenshot.png file (it will automatically get pulled into the backend as the image of the theme) and made some edits to the stylesheet. Later we’ll add all our styles to the css here, but for now we need to understand that the comment block in the file communicates the details of the theme to wordpress. We need to edit the css file so it reflects our theme properly. The block of text in the comment is formated in a specific way that wordpress will read it and it’s actually pretty self explanitory! All we need to do is update the details. Take special notice of the Template line (it’s what tells WordPress that this theme is a child theme using thematic as the parent), here’s what I’ve done:

[cc lang=”css’]
/*
Theme Name: Corporate Clean : A Thematic Child Theme
Theme URI:
Description: Thematic Child Theme Presentation
Author: Evan Mullins
Author URI: https://circlecube.com/
Template: thematic
Version: 1.0
Tags: Thematic
.
Thematic is © Ian Stewart http://themeshaper.com/
Corporate Clean Design by Zsolt Kacso http://kaolti.com/ http://www.behance.net/kaolti/frame/1498151
.
*/
[/cc]

Once we have this in place, we go to the appearance section in our wordpress dashboard and select our theme. Then we can then make our edits to our stylesheet and see them live on our site!

theme chosen for use on site

Before we go opening a can of CSS, let’s look at a couple things and think big picture. We haven’t yet mentioned what this ‘functions.php’ file is. This is the section where we will do any php related to our theme, in other words our hooks! That includes any wordpress or thematic hooks. This samle theme actually has a couple snippets we can uncomment and a sample filter.

Process & Workflow

My purpose in this presentation was never to show you how to slice a photoshop document into web ready images or how to write CSS. I just wanted to help people get more familiar with or started with building themes. I want to talk a little about my process because when I started theming, while I understood the tech (as in css/html) (although I still had and have lots to learn), the process around theming was somewhat of a mystery. I usually follow a loose workflow/cycle when I’m making a site:

  1. Layout – Wireframe, get content areas (widgets) blocked out. Getting the right content in the right places, or creating the right places to put the content.
  2. Structure – Info Archietecture, get the proper post types and think through any needed templates. Getting the right content types. Ideally we should put this code into a theme functionality plugin to separate the functionality from the visual style. Some think it’s best to put that into a plugin so the theme can be changed. But that’s beyond the scope of this presentation, so I’m just going to show you the code to do it and include it in the theme for now.
  3. Style/Design – CSS, using images and styles to get things visual. Getting the right content looking right.
  4. Interactive – JS, making any client-side scripts lively. Getting content interactive.
  5. Population – The plain old and sometimes even boring, data entry.
  6. Rinse and repeat! This is loose and a cycle, I jump through each of these phases numerous times for each element.

Each of these phases contain different tasks, I’ll include some examples and point out some resources. I don’t want to focus on the exact things to do for any and every situation, but talk more about the way to do things. Basically teach to fish, rather than feed you a few fish.

I think I’ll leave that for another day though. This has gotten quite long!

Video via WordPress.tv