Cooking with Plugins – No Code Required

Cooking with Plugins – No Code Required DanNY Santoro | WordCamp Philly 2015 @Danny_Santorodanielsantoro.com

Hello WC Philly! • My name is Danny Santoro • Born & Raised in Cincinnati, Ohio • Current WooThemes Ninja, future Automattician • Big fan of video, web, fiction, spreadsheets, and gaming • Once killed a spider with only minimal screaming involved @Danny_Santoro | http://danielsantoro.com

About ME (So what are you good for?) Worked professionally on web design for five years Worked primarily with WordPress for three years Fastest project planner in the West (you should see the spreadsheets) Super good at HTML, CSS, and logical thinking in general Easily confused by PHP, Javascript, or any other “big boy” language EXTREMELY creative & overly ambitious – know-how won’t slow me down! @Danny_Santoro | http://danielsantoro.com

What does this mean? This means that I often have a bunch of huge, grand ideas that I’d love to do – make a game, build an app, etc… But have no idea how to go about implementing it, because I have no time to learn a new coding language. Dozens of projects fall by the wayside per year… Or at least, they used to. Today, we’re going to break the illusion that you need in-depth coding knowledge to create a Minimum Viable Product (MVP) – using some front end tools and creative thinking, let’s build something totally unexpected. @Danny_Santoro | http://danielsantoro.com

The Setup A.K.A. How I got in over my head (and managed to stay afloat) @Danny_Santoro | http://danielsantoro.com

Circa Winter, 2012… A gaming friend had been managing an online pen & paper RPG website for a few years now, and with activity increasing (and other factors), he mentioned he needed an overhaul on the site. Managing dozens of characters, hundreds of NPCs, and thousands of die rolls was taking him hours, and he simply couldn’t keep up. The (very, very naïve 2013 Danny) said “Oh hey! Have you heard about this WordPress thingamajig? I’ve only just started working with it, but I totally bet it could do the job!” And with that, my fate was sealed. @Danny_Santoro | http://danielsantoro.com

The Grave I’d Dug (Website Target Specs) Allow for users to create their characters in a guided manner, which can then be approved or rejected by administrators (Game Masters, or GMs) Must support a database – pages and pages of information on vehicles, gear, characters, and everything else under the sun. Must allow for easy and open communication via an existing phpBB forum. Public rulebook with house rules that all members can access. Include capabilities that allowed an online RPG game to re-create the feeling of a shared gaming experience in a friend’s house. @Danny_Santoro | http://danielsantoro.com

The “Oh Crap” Moment • Ready and rearing to go with a gameplan in hand, I slapped up a dev WordPress installation to my server and… Was instantly stuck. • I tried a lot of plugins and ideas, but I was convinced I’d brought a screwdriver to drive nails. • With hundreds of database entries, I knew I could make an external database and call in information as needed, but I wanted an easy user experience and interface. • I understood what had to be done, but not the how. I’d finally resigned to the fact that I just couldn’t do it – with two jobs and what little of a personal life I had left, I nearly gave up, until I found the key… The golden toolset that gave me a shot. @Danny_Santoro | http://danielsantoro.com

WP Toolset – Bringing Ideas to Life I found a free plugin on WP.org called Types. Types allowed me to add custom post types, taxonomies, and variables, which meant I now had a way for users to add the information they needed. After looking into Types, I dropped an (expensive at the time) $149 investment in their line of premium products, primarily for Views, which allowed for custom post templates and loops. Types and views were simply meant to be together – like PB&J, it just worked. » I want to clarify that I’m no way affiliated with WP Toolset or OnTheGo Systems, the creators of the plugin. This may not be the solution for you, or you may have a gripe against premium plugins, and that’s okay! However, I wholeheartedly believe that this is an asset to any WordPress site owner, experienced dev or out-of-the-box newbie. It’s paid for itself a dozen times over. @Danny_Santoro | http://danielsantoro.com

Gettin’ Down with tha Lingo Regardless of how you proceed with plugins or hand coding (Sadist), let’s go over all the moving parts before we start building the machine. @Danny_Santoro | http://danielsantoro.com

POSTS, PAGES, & CUSTOM POST TYPES • Postsare primarily used for blog content and frequent releases – news updates, tutorials, reviews, etc. They’re what makes WordPress run* – everything is tied into this, so it’s best to leave it alone.  • * Everything in WordPress has its own “Post ID”, even custom post types. Don’t worry, everything is just a deviation of the regular Post. • Pagesare a kind of post type that allow for static content to display, like an “About Us” page, a contact list, or whatever else you would need. Keep in mind that these can be dynamic pages, meaning the content could change and update, but it’s something that needs a definite link or serves a use that someone may see multiple times, like a “My Account” page. Custom Post Types can use one of the two available types. A Post Type holds special information, which will likely be displayed differently than (or kept separate from) other information. There are two basic Post Types: @Danny_Santoro | http://danielsantoro.com

CATEGORIES, TAGS, AND CUSTOM TAXONOMIES • A Hierarchical taxonomy behaves as it sounds, and is identical to the included “Category” taxonomy. This means you can next taxonomies in others, allowing for things like: • Honda • Accord • Civic • Ford • F-150 • Taurus A Non-Hierarchical taxonomy does not allow for nesting, as all terms are equal. It is akin to the “Tags” taxonomy, and is useful for adding important keywords to a topic – say a Car Dealer posts an announcement about the vehicles on the left, he would use:Honda, Accord, Civic, Ford, F-150, Taurus, Cars, Trucks, NotARipoff Custom Taxonomies can use one of the two available types. Taxonomies can be shared between types, and there can be multiple taxonomies per post type. A Taxonomyis a method used to organize your content and keep it optimized for the user experience and for search results. There are two Taxonomy types:

Custom Fields Now, you’re starting to get the flow – a Custom Field is a field with a variety of options and ways for users to enter information, such as a WYSIWYG editor, a select box, radio buttons, checkboxes, text fields, etc. The great part about this method instead of an external database is that all of the information is saved to your WordPress database, so it can be easily read, exported, imported, and maintained from a WordPress installation. These fill out new Meta Fields in your SQL database. @Danny_Santoro | http://danielsantoro.com

Great! Now what? Now that we can ADD data, let’s talk about how we can DISPLAY it. @Danny_Santoro | http://danielsantoro.com

So where does it go? One method to display the custom fields and taxonomies is to edit a page template or area of a page and embed the code that calls for specific values. This value could be for a page that we specify (through the universal Post ID), or could be relational such as the value for the current page, parent page, or child page. This is ideal for single-page results, like a database entry (or in our case, a character sheet). Alternatively, you could use loops. Using WP-Toolkit, these are called Views – snippets of code that can repeat as many times as desired, pulling specific information from selected posts or post types based on taxonomy, date, or a variety of other functions. Views can display only one result as well, making them essentially modular blocks of code. In our example, this is used for database overview pages. We’ve created Custom Post Types, Taxonomies, and Fields, and have them filled out. It’s time to display our hard work, but how? @Danny_Santoro | http://danielsantoro.com

The Post Content For simplicity’s sake, let’s say that we’re using a Custom Post Type called “Landing Pages”, based on the Page style. There are two ways to accomplish this: • Create new files in your Theme or Child Theme like `landing-page-single.php` and `landing-page-loop.php`, which is super fun but also super tedious if you haven’t done it before • Use Views to not even worry about it and essentially embed your own templates in the regular post – a faster solution. Let’s do that. @Danny_Santoro | http://danielsantoro.com

The Page Template From Views, we can create a new Page Template. What this does is allow us to use simple HTML to style our content how we like it – essentially determining the layout of the page in the WordPress Administration Screens instead of in a text editor. It is entirely contained in the standard content section of a Page template. @Danny_Santoro | http://danielsantoro.com

Dust off that web editor While you can definitely use the WYSIWYG editor to create a page template in Views, I much prefer to write HTML and drop in short codes for the values I want to pull in. It gives me a little more control. The best part is that we don’t have to worry about using PHP to loop through multiple pages – it’s all done for us, which saves so much time. Okay, NOW we’re done preparing. Get ready, because… @Danny_Santoro | http://danielsantoro.com

It’s time to start cooking! Let’s go step-by-step on how I built a rudimentary P&P RPG system without once looking at the WordPress Codex @Danny_Santoro | http://danielsantoro.com

Our Demo Project MVP Specs For this session I’ve taken an entirely different RPG system that I created back in 2006 – we’ll use Version 1 as our target. Version 1 needs: • A Rulebook with Tests (to ensure quality members) • An item management/catalog system • Informational Sheets & Content (Pages) • Character Sheets • NPC Sheets • Abilities @Danny_Santoro | http://danielsantoro.com

Step 1: Creating the Characters The first thing we should tackle are the two most important areas – information pages about player characters (PCs) and about the non-player characters (NPCs). For this, we’ll need two Custom Post Types. PCs can use a non-hierarchical “Page” style post type, since a character wouldn’t likely have a sub-character (at least in this ruleset). NPCs are a little different – they might have stronger versions of enemy X or Y. We’ll make them like a “Page”, where they support hierarchical pages (so Enemy X could have Weak, Average, and Strong versions) @Danny_Santoro | http://danielsantoro.com

Step 2: Adding the Core Values First, we’ll fill in the page content and featured images with character bios and photos. The system calls primarily on three main traits – Strength, Dexterity, and Toughness. Types to the rescue. We also need to display the items a character has – once again, custom fields will do the trick nicely. @Danny_Santoro | http://danielsantoro.com

Step 3: Giving the Characters Life In the system used, there are a variety of traits and abilities that are shared between PCs and NPCs, such as resistance to damage or the ability to lockpick doors. Since I wanted this to be shared between different Post Types, I opted to make this a Taxonomy – this allows for easy skill selection. @Danny_Santoro | http://danielsantoro.com

Step 4A: The ITems Here’s one giant roadblock – how are we going to regulate items? Unfortunately, without actually getting into coding it’s a bit complex to limit what a character is holding, so there is some collaboration between the GM and player. That doesn’t mean it all has to be manual, though. Instead of wanting to just write in the damage for each weapon or effect for item in the character bio, I wanted a pretty catalog that the users could actually browse through and buy (with in-game money). Sounds hard… @Danny_Santoro | http://danielsantoro.com

STEP 4B: WooCommerce Saves the Day I’ve been immersed in WooCommerce nonstop for about a year and a half now. Most people use it (very successfully) to ship goods, but that’s just not original enough. Let’s make this WORK. Let’s get creative. By setting up all of the items in WooCommerce and enabling Store Credit as the only way to pay, this essentially creates virtual currency you can dole out as you see fit (or be evil and allow for microtransactions). Since the items are all virtual WooCommerce products, we can streamline the process by removing Shipping entirely and have a nice, fluid (literal) store for our characters to buy gear. Neat, and free! @Danny_Santoro | http://danielsantoro.com

Teaching the Users (And stopping the Bots) Now that we’ve baked a sweet internal system, we need a way to teach the system. @Danny_Santoro | http://danielsantoro.com

Teaching the Users For anyone who has had a total language barrier when trying to explain something to a family member or friend, you already see the issue – you absolutely don’t want to have to explain to every user how to play. In addition, you want only the dedicated members to actually get a chance to play – this stops the spambots and the people who might not really be interested, but the same question comes up… How do we do this without creating a massive time vacuum? Gosh darn it, WooThemes, you’re here for us again! @Danny_Santoro | http://danielsantoro.com

Sensei & Groups : The Perfect Testing System • Senseiis an online Learning Management System produced by WooThemes. • Sensei allows for you to create Courses that cover a broad and Lessons with content. • Sensei also provides tests at the end of lessons – you can grade on your own, or allow the computer to do it for you. Completing courses can grant access to new areas or Courses. • Groups is a free plugin that allows you to create user permission groups, restricting the right to access certain areas or perform certain actions to those who have met a certain requirement. • Groups isn’t the only plugin that can do this, but it’s by far my favorite – in addition, Membership is a good solution, and in the WP-Toolset they have a tool called Access. @Danny_Santoro | http://danielsantoro.com

Ding! There goes the oven timer. The timer’s up… Will we make an awesome tiramisu or a Brussel-sprout flavored monstrosity? @Danny_Santoro | http://danielsantoro.com

The Working Demo – A Zombie Apocalypse! Theory brought to life! Everything we just talked about is live and 100% available for you to look through. For the weekend, I’ve disabled certain features since I haven’t gone through and debugged it, but this system will continue to exist (with restored functionality) to the public at the following link: http://demo.danielsantoro.com/game/ @Danny_Santoro | http://danielsantoro.com

Character Profiles Here we’ve got a sample character profile, which shows the bio, picture, skills, abilities, and gear. Since it can be created via public form (unavailable ATM), the Author is the user, meaning they can add and update information as they see fit. You can even restrict what authors can edit, so only GMs can improve stats. @Danny_Santoro | http://danielsantoro.com

NPC Databases Want an extensive list of all the enemies that you might encounter in your runs to the city? Good, because it’s there! You can browse through different monsters and strangers, along with their variations and notes so you know what to prepare for. @Danny_Santoro | http://danielsantoro.com

An Equipment Storefront Give your users a starting amount, or let them add Account Funds through their User panel. From there, they can purchase whatever items they’d like, and easily browse through options. Thanks to WooCommerce being just super flexible, with extensions you can make this even more complex (like reward points) – the sky is the limit. @Danny_Santoro | http://danielsantoro.com

A Guided, Always Up-to-Date Rulebook With Sensei courses, you’ve created a scenario where users can get familiar with the rules and test their knowledge to prove competency. If they ever need a refresher, they can always re-take the course, or you could offer a more comprehensive rulebook/sample scenario for them to look through. @Danny_Santoro | http://danielsantoro.com

Now that we’ve finished the entrée… This is barely scratching the surface of what we can do. With some creative thinking and elbow grease (gross term), I give you an example: Interactive maps that show character positions, the environment, and enemies, all easily accessible and the perfect ‘dessert’, really bringing the feeling of that tabletop gaming to the web. Visit the sample sitebelow for a live mockup. @Danny_Santoro | http://danielsantoro.com

Up for seconds? It’s still a work in progress while we wait for a few things to fall into place, but the original project (that has far greater complexity than the demo site) can be found at http://imperialentanglements.org. Star Wars fan? Sign up, and together we can rule the galaxy… Or at least get the chance to command Star Destroyers, and let’s be honest, that’s all we ever really wanted in the first place. Unless you’re a Trekkie. Then you can kindly beam away or something – probably not enough lens flares for you here.  @Danny_Santoro | http://danielsantoro.com

Wrapping Up the Leftovers A.K.A. Explaining what the point of that was @Danny_Santoro | http://danielsantoro.com

How does this Apply to Me? Naturally, only most of you guys will go on to create RPG fansites, so the big question to ask is how you can use the information in other projects. Simply put, WordPress has no limits, even to non-coders. What we’ve done today is take a variety of unrelated plugins by entirely different developers and used them in ways that their creators could have never anticipated. A blogging platform becoming a literal game hub? Believe it or not, you just saw the A to Z, and not a single bit of hand-coded PHP was required. All you need is the idea, an open mind, and an internet connection to make something really special. @Danny_Santoro | http://danielsantoro.com

What else can you do? Plenty! The idea of bending WordPress into a fully-powered CMS instead of a blogging platform is something I’m going to continue to pursue, so you can view all of my demo sites using various plugins at http://demo.danielsantoro.com. I also want to see what you can create! If you find an awesome example, have an idea, or just want to say “Gosh Danny, you’re so cool and Taylor Swift is in town, do you want me to give you her number?” then IMMEDIATELY contact me at http://danielsantoro.com/contact. @Danny_Santoro | http://danielsantoro.com

Thank you! Have questions or need clarification? Think of a neat thing I should add? Do you know Taylor Swift? The floor is yours – I’ll be available all day to answer anything that comes to mind. Thank you WordCamp Philly for having me! @Danny_Santoro | http://danielsantoro.com

Cooking with Plugins – No Code Required