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.
In summary, I can feel my brain growing. Knowledge and friends gained. Until next time! #wcatl@wordcampatl#wordcamp
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’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!
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.
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.
Here are my notes on the presentation from Lee Brimelow of Adobe at the Atlanta Adobe Users Group Meeting: http://www.meetup.com/Adobe-User-Group-of-Atlanta/events/56200162/
What is flash for? Doing things the browser can’t! If you can use HTML5 then do it. Learn about it and learn the capabilities and know when to use what tool and when they are appropriate. It might not be easy, but it is where the industry is moving, don’t hide from it! If you want to do things that are to advanced for the current standards and browsers, then flash is most likely where you need to be. Adobe will always position Flash to be ahead of what is possible with browsers.
While you can do some gaming in browsers today, flash is now positioned to be the best solution for game development. It even can compile to native apps for ios and many successful apps have done so. Adobe has put in a site to showcase these games at: http://gaming.adobe.com
Adobe has a new partnership with unity. See example game: Angry bots.
Console sales are declining. We have so many other outlets to game: browsers, social, mobile devices… Soon professional games will be via Facebook and browsers.
Facebook angry birds game built in flash using stage 3D.
New gaming features:
Mouse lock.
Right and middle click events.
Concurrency, multi threading for player. Yo will not lock up with intense calculations.
Native extension Burls and extensions.
CS6:
Sprite sheet exporter!
Create js exporter, via Grant Skinner
Html 5 export to canvas a vector art.
Edge
11.3 – latest flash player
full screen keyboard input.
Background auto updates.
Audio streaming via net stream.
Improvements for low latency audio.
Stage 3D progressive texture streaming.
Lzma compression sort door byte array.
Native bitmap encoding to png and jpg.
Bitmap data draw with quality
Frame labels.
Air specific
USB debugging for ios
Native ios simulator support
Enhanced background support for ios
Android 4 stylus support
Mac app store support
Dolores, upcoming updates
As workers
Advanced profiling
Better sort for hardware accelerated video cards
Next
Refactorizing code base
Work on as virtual machine
Many action script language updates: stringent static typing as default, hardware oriented numeric types, type inference…
Here are my notes on the presentation from Mike Chambers of Adobe at the Atlanta Adobe Users Group Meeting: http://www.meetup.com/Adobe-User-Group-of-Atlanta/events/56200162/
Honestly, the announcement from Nov was handled horribly, it was a mess. Adobe has learned a lot and there have been many changes since then to keep this from happening again. They are really pushing transparency and have begun publishing white papers that explain the flash roadmap and explain plans and commitments.
Flash runtimes is one shared core player. Flash player and adobe air both share same core.
Flash has filled many niches: animation, video, applications, games, rich media, art (Flash as an expressive medium).
While none of these functions are going anywhere, HTML5 is bringing a lot of this capability to browsers natively.
Adobe will now focus on advanced video and gaming in Flash as they are the areas that aren’t possible in web standards.
Introducing Premium features – set of features in API available for licensing. Only example for now is Stage3D used in conjunction with domainMemory API.
“I’m doing this for the love of flash, everyone else is doing it for the money” – Mike Chambers
The funding for the flash player is contradictory since more tools to publish to flash player have come out, it draws resources and funding away from flash player. This revenue sharing model allows for the player to remain funded in the current flash ecosystem.
Linux: Ppapi = pepper codename for browser plugin API which will let the player do it’s thing rather than worry about browser and OS. Working with google chrome on Linux already.
Windows 8: working closely with Microsoft to have support for flash player and air on Windows 8.
All updates will be added to the white paper (link above) along with the 2 year roadmap.
Thanks for visiting ATL and working on making this well understood and making Flash even better. I’m Always a fan of using flash when it’s the right tool for the job.
[UPDATE] I’m updating this post that originally just contained my slides with the meat of the presentation as well. I don’t think a presentation is expressed well at all with slides. So I’m going to write some things and link to places that I mentioned.
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)
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:
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:
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!
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:
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.
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.
Style/Design – CSS, using images and styles to get things visual. Getting the right content looking right.
Interactive – JS, making any client-side scripts lively. Getting content interactive.
Population – The plain old and sometimes even boring, data entry.
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!
I’m proud to announce that I’ve been asked to speak at WordCamp Atlanta this year! WordCamp will be held this weekend and hosted at SCAD Atlanta! My session is titled: From PSD to WordPress Theme: Under the skin. Obviously, I’ll be focusing on themes. We’ll look at what they are, what they can do, how to make one and we’ll also go through the process of creating a theme in my presentation. I know that’s a lot, but I’ll do my best to get it all covered in my time. I’m really excited since this is my first speaking gig at a conference (and also a bit nervous). I’ll be sure to post my presentation slides here as well as submit them to the wordcamp site. I even hear they are attempting to record all sessions to post on wordpress.tv, so I may have a post with that too. Here’s the official session description:
We’ll cover how to get from photoshop to WordPress. There are many different roads to a theme. We’ll go over 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.
Are there any questions you want covered in the presentation? Ask quick and I’ll do my best to work them in!
