Blog

Class Based Wordpress: Using Object Oriented Programming in Wordpress... and why!

I use WordPress a lot. It's definitely one of the easiest ways to create a site. Yet, programming in WordPress can also be a pain. The way it's structured promotes a lot of bad habits and its procedural nature forces you to write the same code over and over again, even though most sites share a lot of similar functionality. There are many advantages to using WordPress and there's a lot of really good reasons to use it as a web framework. Some of these are: Best admin experience out of any CMS or web framework Easy extensibility with plugins (although a plugin is rarely the solution!) Good Basic API for creating websites (Posts, Pages, Taxonomies, Custom Post Types) Some of the WordPress weaknesses are: Procedural Programming A framework based on templates rather than models and views A lot of repeated code, not following DRY principal. No separation of data and presentation (even in the functions.php file!) Lead to spaghetti code These problems are all inter-related and are Recently, after using some MVCs like Django, I've started try to MVCfy WordPress. You can see a repo with a sample theme here. The idea behind all this is to make my code more reusable by creating 'models' for posts, pages, custom post types and images (maybe I'll include taxonomies in the future). These models take in an id or a post object as a parameter and then created a new object. This new object extends the default WordPress object by adding things like permalink, featured image, HTML title, custom meta, excerpt, template... etc. These are given to you for free, so there is no need to go in a call another function to get the permalink. These can also be extended to include even more data and can include methods by which custom meta (especially fields with ACF) can be cleaned and parsed. For example, compare this: $post = get_post(get_the_ID()) $post_thumbnail_id = get_post_thumbnail_id( get_the_ID() ); $post_thumbnail_url = wp_get_attachment_url($post_thumbnail_id); $permalink = get_permalink( get_the_ID() ); $custom_meta_1 = get_post_meta(get_the_ID(), 'custom_meta_1'); // Array $custom_meta_2 = get_post_meta(get_the_ID(), 'custom_meta_2'); // String echo $post->post_title; echo '<img src="' . $post_thumbnail_url . '">'; echo '<a href="' . $permalink . '">'; echo 'Field #1: ' . $custom_meta_1[0]; echo 'Field #2: ' . $custom_meta_2->property; With this: $post = new Post(get_the_ID()); echo $post->post_title; echo '<img src="' . $post->featured_image->url . '">'; echo '<a href="' . $post->permalink . '">'; echo 'Field #1: ' . $post->fields['custom_meta_1'][0]; echo 'Field #2: ' . $post->fields['custom_meta_2']->property; Not only is the second one much shorter and easier to write, but it's more readable and more consistent. By creating classes, you can create your own API that is consistent through out the whole site. This keeps your code DRY and makes it easier to read. It also makes your code easier to maintain and extend, since every time you need to make a change, you only have to make it once. How does this `Post` model look like and how can I extend it? These models are declared as PHP Classes and they usually extend a `Single` class which does most of the work of getting and $id or $object and turning that into it's own extended post object. To declare your model/PHP class, you only need to do this: <?php class Post extends Single {         // Custom Meta Tags will get queried just by declaring them in this array         // These can be set with ACF         public $field_names = array('custom_meta_1', 'custom_meta_2');         const CLASS_NAME = 'post';          public function __construct($post_id_or_object) {                 parent::__construct($post_id_or_object); $this->string = $this->parseCustomMetaData();        }         // Extend your model by creating a method         public function parseCustomMetaData () {          $string = "";          foreach($this->fields['custom_meta_1'] as $custom) {          $string += $custom;          }          return $custom;         } } Now that you have your models setup, you can go on to your views. These can be very complex, or they can be very simple. Since most of your data is already structured, most of your views will be quite simple since they will just query a Post or Page. It's important to know that views should only contain code that prepares your data for presentation, looks for data that is specific to that view, or parse the relationship between different models. It should not deal with model data directly. For a simple post page, this would look something like this: <?php class PostView extends View { const NAME = 'PostView'; public function __construct($post_id_or_object) { parent::__construct($post_id_or_object); $this->post = new Post($post_id_or_object); } } Basically, you just create a post object using your $post_id and you're done. For querying a page with multiple posts (all posts with custom post type `image-post` in this case), your view might look something like this: <?php class ImagePostArchiveView extends ArchiveView { const NAME = 'ImagePostArchiveView'; public function __construct($post_id_or_object = false) { parent::__construct($post_id_or_object); if ($post_id_or_object) { $this->post = new Page($post_id_or_object); } $this->posts = $this->get_posts('ImagePost'); } } This uses a `get_posts` function declared in the `View` class where you can pass the name of your class as an argument and it returns an array of `ImagePost`s. Now we're only missing our template. This is by far the best part, because our template will be short, clean, and will only have our HTML. In `archive-image-post` we use the following code: <?php $view = new ImagePostArchiveView(); ?> <?php get_header(); ?> <?php foreach($view->posts as $post): ?> <div class="row"> <div class="small-12 columns"> <h1><?php echo $post->post_title; ?></h1> </div> </div> <div class="row"> <div class="small-4 columns entry-content"> <img src='<?php echo $post->image->url; ?>' /> </div> <div class="small-8 columns entry-content"> <?php echo $post->post_content; ?> </div> </div> <?php endforeach; ?> <?php get_footer(); ?> As you can see, this is not that different from a regular WordPress template. We still use `get_header` and `get_footer` and we loop through some of our PHP variables. But we don't call any PHP functions here and we have no logic and no data fetching in our templates. This is only our presentation layer.    

5 Reasons to Use Foundation and 5 Things You Need To Know About It

Zurb Foundaiton is a great front-end framework, but it's also a massive framework with a lot of features. Instead of going through the whole thing, I'm going to write about the top 5 things you should know about Foundation to start using it in your next project and decrease development time, improve code quality, and reduce debugging time. 5 Reasons For Why You Should Use  Foundation 1. Faster development time With Foundation, you don't have to write any boilerplate code like grids, buttons, typography, etc. This means you spend less time in development! 2. Responsive Out Of The box Most of the time you spend adapting a responsive site is spent writing proper CSS for layouts. With grids, you don't even have to think about wether your code will work in a responsive layout. It's responsive out of the box. Any changes in the responsive layout are only a couple of class name changes away. 3. Less Debugging Time Since most of your boilerplate code (like grids) is already written, tested for different browsers, and is already responsive you spend less time debugging your site in different browsers. They'll be bugs, but those will probably go away as you learn the framework. 4. Helps in Making Your Frontend Code DRY By providing variables and default styles out of the box, you end up repeating yourself a lot less. Rather than trying to write styles for every single element, you end up trying to write sensible defaults that will work for the whole site. In this way, you are creating a framework by which other people can extend your site. 5. Foundation Forces You To Work With Modern Technologies If you use Foundation's CLI (Command Line Interface), your project comes with a grunt, bower and sass already integrated into your project. You only have to used one command to use foundation, sass, grunt and bower in your project, making it that much more faster to get your project up and running. Bonus: 6. None Of The Code Is in  UPPERCASE The technical advantages of lowercase and capitalized comments are obvious and well-documented, so I don't need to go too much into this. 5 Most Useful Features In Foundation 1. Installation Installing foundation is very simply and surprisingly useful. Installing Foundation through foundation's CLI will install grunt and bower, and will create the necessary scss, css, and javascript files. It will even add a default .gitignore. If you have never installed Foundation on your computer, just run the following commands: [sudo] npm install -g bower grunt-cli gem install foundation This will install all the necessary requirements to run Foundation. Now you can create a project by typing: foundation new project_name --libsass If you don't want Foundation to create a a project, you can just import foundation into your Compass project, by adding it to your config.rb: require "zurb-foundation" http_path = '/' css_dir = 'css' sass_dir = 'scss' images_dir = 'images' javascripts_dir = 'js' relative_assets = true line_comments = true output_style = :expanded https://github.com/thejsj/jsj-9/blob/master/config.rb Now Codekit, bundler, and or grunt, will automatically import any Foundation dependencies (since your gem is already installed). 2. Modules Like Bootstrap, Foundation is very modular. If you only want to use a specific part of Foundation, you can do so by only importing some of the requirements you need. Foundation requires only two modules ('settings' and 'foundation'). All other modules come commented out in the default installation and can be included or excluded at will. @import "settings"; @import "foundation"; // Or selectively include components // @import // "foundation/components/accordion", // "foundation/components/alert-boxes", // "foundation/components/block-grid", // "foundation/components/breadcrumbs", // "foundation/components/button-groups", // "foundation/components/buttons", // "foundation/components/clearing", // "foundation/components/dropdown", // "foundation/components/dropdown-buttons", // "foundation/components/flex-video", // "foundation/components/forms", // "foundation/components/grid", // "foundation/components/inline-lists", // "foundation/components/joyride", // "foundation/components/keystrokes", // "foundation/components/labels", // "foundation/components/magellan", // "foundation/components/orbit", // "foundation/components/pagination", // "foundation/components/panels", // "foundation/components/pricing-tables", // "foundation/components/progress-bars", // "foundation/components/reveal", // "foundation/components/side-nav", // "foundation/components/split-buttons", // "foundation/components/sub-nav", // "foundation/components/switch", // "foundation/components/tables", // "foundation/components/tabs", // "foundation/components/thumbs", // "foundation/components/tooltips", // "foundation/components/top-bar", // "foundation/components/type", // "foundation/components/offcanvas", // "foundation/components/visibility"; As you can see, this is a lot of modules! Rarely will you need all of these, so delete at will! In my recent portfolio site redesign, I included only a couple of modules: /* Theme Name: thejsj9 Theme URI: http://thejsj.com Author: Jorge Silva-Jetter Author URI: http://thejsj.com Description: Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html */ @import "compass/reset"; @import "compass/css3"; @import "modules/icons"; @import "settings"; @import "foundation/components/global"; @import "foundation/components/visibility"; @import "foundation/components/grid"; @import "foundation/components/buttons"; @import "foundation/components/type"; @import "foundation/components/inline-lists"; @import "modules/mixins"; @import "modules/global"; @import "modules/header"; @import "modules/footer"; @import "modules/front-page"; @import "modules/content"; @import "modules/blog"; @import "modules/forms"; https://github.com/thejsj/jsj-9/blob/master/static/scss/style.scss As you can see, I'm importing this modules along with a couple of compass modules and I'm also including them along with my own custom site modules, just to have all SCSS dependencies in the same places. My sass compiler will include them as if they were regular sass files. 3. Overwriting Globals As with any framework,  Foundation comes with a lot of defaults. These defaults are often quite sensible, but rules are meant to be broken. Often times you want to overwrite those defaults and that's totally fine. There are two main ways of doing this: 1. changing sass variables 2. including mixins and 3. writing you own custom sass. For simple customizations, you often only need to change default variables (base font-family, primary color, etc). For elements, such as buttons, you would use mixins, and for more complex behavior you'll probably just need to write custom sass (which is would you would do anyways). For example, default buttons look something like this:   If I just want to change the color of the blue buttons I only need to change one variables in my Foundation/global settings: // We use these as default colors throughout $primary-color: #FE00E4; // Magenta // $secondary-color: #e7e7e7; // $alert-color: #f04124; // $success-color: #43AC6A; // $warning-color: #f08a24; // $info-color: #a0d3e8; Now that I change my primary color to magenta, my buttons look like this:   Since the variable $primary-color is also used elsewhere, the colors in my page change quite dramatically.   This changes the default color, but it still doesn't change the default behavior of all buttons. .button { @include button( 1rem, // padding rgba(50,50,255,0.7), // background-color 0.1rem, // radius false, // full-width false, // disabled true // is-input ); } Now, our buttons looks something like this (throughout the whole site):   Sometimes, though, you will need to write specific behavior into your elements that are not part of the Foundation framework... and that's totally fine! Say, for example, you want to make your background a gradient and add some text shadow to your button text. You can just write some sass for that: // UGLINESS ALERT - FOR DEMONSTRATION PURPOSES ONLY! DO NOT USE UNDER ANY CIRCUMSTANCES .button { @include button(1rem, rgba(50,50,255,0.7), 5rem, false, false, true); box-shadow: 0px 0px 3px rgba(0, 0, 0, 1); text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.79); background: radial-gradient(#00009C, rgb(10,10,200)); letter-spacing: 0.3em; text-transform: uppercase; font-size: 0.4em; } Which end up looking something like this: 4. Grids My All Time, Hands Down, Million Dollar feature is definitely grids. Grids make it easy to give your website a responsive layout. This is done through css classes, added to the HTML of you code. This might seem a bit weird, since you're not doing everything in your css/sass, but the effect is that it makes your frontend development that much faster! Having your layout in your html, means it's much easier to experiment and make changes, since you don't have to go through your CSS to find where those changes need to be made. Grids in Foundation are very similar to grids in bootstrap (although not exactly the same) and are based on the same system of 'rows' and 'columns'. So some html like this: <div class="row"> <div class="large-12 columns"> <h1>Welcome to Foundation</h1> </div> </div> <div class="row"> <div class="large-6 columns"> <h2>I really Like Grid</h2> <p>Lorem ip... ac leo mollis, sed volutpat libero rhoncus. Nullam adipiscing convallis nisi id faucibus.</p> </div> <div class="large-6 columns"> <h2>I Really Like Buttons</h2> <p>Lorem...d faucibus.</p> </div> </div> Will look something like this: and in smaller screen, it would look something like this: These grids can be as complex or as simple as you want to make them. Grids can be nested inside of each other ad-infinitum. 5. Top Bar Responsive Menus I'm tired. I'm going to sleep. You can google this one! http://foundation.zurb.com/docs/components/topbar.html

Foundation: A Short Guide

Why Do I Even Need This? Make development faster, period Enforces DRY on your front-end code Provides a consistent way to structure all of your projects and makes it easier for teammates to pick-up Provides a lot of boilerplate code that every project needs (grids) Is modular and compatible with SASS Why I like Foundation over Bootstrap? 1. More Modular and Easier Customization I decided to start using Foundation because when I wanted to use Boostrap grids I would do the following: 1. Go to the Boostrap website 2. Go to customize:   3. Uncheck everything except grids: 4. Configure My Grid Settings: 5. Copy-Paste Files 6. Rename files to .scss   If I needed to change something, I had to do this process all over again. Terrible workflow! In Foundation, I just do the following: 1. Setup a foundation project foundation new PROJECT_NAME --libsass 2. Add the grid modules in the app.scss   3. Configure my grid in the settings file: Basically, if you're using a SASS based workflow, Foundation is much more maintainable and extensible. 2. Not as Much Visual Undoing Bootstrap impose a very specific visual style that is hard to undo or overwrite, especially without SASS support. For example buttons in Boostrap:     VS buttons in Foundation: Bootstrap is getting a lot better about not imposing certain visual styles, but Foundation is still a lot better. So, for example, if I wanted to change the styles of buttons I could just do the following:   // Change Default Font-Family $body-font-family: courier, 'new courier', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; // Import Buttons Module @import "foundation/components/button-groups"; @import "foundation/components/buttons"; // Re-write SCSS For Buttons .button { background-color: white; color: $primary-color; border: 1px solid $primary-color; &.secondary { background-color: white; color: $secondary-color; border: 1px solid $secondary-color; } &.success { color: $success-color; background-color: white; border: 1px solid $success-color; } &.alert { color: $alert-color; background-color: white; border: 1px solid $alert-color; } } This ends up looking something like this: What Can I Do With Foundation? Features and Functionality 1. Grids Personally my favorite foundation feature is grids. This is the biggest time-saver and it will completely change your workflow. Grids in Foundation are based on a 12 column system, so if, for example, I want something to span the width of the container I would add a row make it 12 columns long. <div class="row"> <div class="large-12 columns"> <h1>Welcome to Foundation</h1> </div> </div> If we want two columns that span half the width of the page we would write this: <div class="row"> <div class="large-6 columns"> <h2>I really Like Grid</h2> <p>Lorem ip... ac leo mollis, sed volutpat libero rhoncus. Nullam adipiscing convallis nisi id faucibus.</p> </div> <div class="large-6 columns"> <h2>I Really Like Buttons</h2> <p>Lorem...d faucibus.</p> </div> </div> This would look something like this: The best part about all this is that we don't need to worry about it being responsive. It's already responsive right out of the box.   These grid patterns can become very complicated and have layers upon layers of different grid structures. That's perfectly fine, as long as the structure is clear. The other good thing about these grids is that they can be targeted by size, so that in different ways depending on screen size. A Real World Example Recently, I redesigned this website using Foundation. It was one of the quickest projects I have ever worked on, despite the fact that this was my first time using the framework.  

JSJ Gallery Slideshow Example

An example of JSJ Gallery & Slideshow with images of the beautiful mountains in eastern China. The shortcode for this is a simple WordPress Shortcode, meaning this is a plug-and-play as it gets! [gallery ids="1423,1425,1424,1432,1433,1434, 1429"]

4 opening sequences and a Helvetica clip

Presentaiton Type Presentaiton 4  opening sequences http://youtu.be/Tek8QmKRODw http://youtu.be/gaLDyrun_Cc http://youtu.be/SEZK7mJoPLY http://youtu.be/7jK-jZo6xjY and a Helvetica clip... http://youtu.be/Bw7bVD-V8rs In Video:

JSJ's NYClean

Update #2: None of these methods work. Just follow this tutorial. Update: I now created a google extension that is much easier and user friendly. Just install it and never worry about it ever again. It's that simple. Before: Want to read New York Times articles for free? As many as you want?   JSJ's NYClean   ( Just drag and drop the link into your bookmarks and click on it every time you're in an article) After a few days of tinkering around with a New York Time's fee wall, bookmarklets, urls and a little javascript I was able to figure out a way out of the pay wall in a way that's clean and efficient. This bookmarklet simply refreshes your page to remove the wall through hampering with your url a little. You will view the page as is it was meant to be seen without adding or removing anything else. Thanks to Eurica! for the inspiration!

Great Artists Do What?

Apparently, the famous Picasso quote was actually uttered by T.S. Eliot. Here is a quote from one of his actual books: One of the surest tests [of the superiority or inferiority of a poet] is the way in which a poet borrows. Immature poets imitate; mature poets steal; bad poets deface what they take, and good poets make it into something better, or at least something different. The good poet welds his theft into a whole of feeling which is unique, utterly different than that from which it is torn; the bad poet throws it into something which has no cohesion. A good poet will usually borrow from authors remote in time, or alien in language, or diverse in interest. Eliot, T.S., “Philip Massinger,” The Sacred Wood, New York: Bartleby.com, 2000 Taken from: http://nancyprager.wordpress.com/2007/05/08/good-poets-borrow-great-poets-steal/ It's impressive how popular a quote that was never said can become...

Precursors of the Personalized Identity

Nike...   MTV Science Channel http://www.underconsideration.com/brandnew/archives/follow-up_science_channel.php     http://www.underconsideration.com/brandnew/archives/meet_morph.php Cooper Vision http://www.underconsideration.com/brandnew/archives/coopervision_looking_good.php                 Art Works http://www.underconsideration.com/brandnew/archives/artistic_triangle_threesome.php http://channel.walkerart.org/play/eddie-opara/ Casa Da Música http://www.casadamusica.com/default.aspx MIT Media Lab Experimental Identity   MIT Media Lab Identity | Youtube   http://www.thegreeneyl.com/mit-media-lab-identity-1 http://www.eroonkang.com/work.php?pid=40&dir=MIT-Media-Lab-Identity      

Personalized Corporate Identities

Contemporary times have brought upon may technological and cultural developments that have strongly affected the practice of Graphic Design. In this post I would like to discuss how two very important ones will contribute to the development of one perhaps the biggest development in the field of graphic design: personalized corporate identities. These two developments are 1. The ability of computers and programming languages to create (thru programming and not through human interaction) visuals images based on certain parameters. It is very simple for example to program a script to choose any color in RGB completely randomly, or based on certain parameters. <?php echo dechex(mt_rand(0,255));?>. This principle now applies also to web techonlogy, with the advent of CSS Animations and Processing (with Flash Techonlogy). The other cultural development, brought also because of the increasing techonology, is the substantial increase in personalization. In contemporary societies the ability to personalize the world around you is almost infinite. You can personalize all sorts of techonological devices ( cell phones, personal computers, tablet PC's), computer programs to fit your needs, and even Google can be personalized to your language and your choice of backgrounds. This is not only true in technology, but also in fashion, preference of food, furniture, automobile decisions, real estate choices... Our contemporary society dictates that you must not just have any car, but a car that is "you". You should not have just any clothing, you should wear something that is "really you". Groceries and dining choices have also risen so much in variety that even your choice of food is supposed to somehow reflect your personality. It's no coincidence that overpriced coffee chains call you by 'your name' (instead of just a number, which is substantially more practical). The funny part about the individualization of society is that companies are thinking of all the possible ways to profit from this. This more personalized and individual approach is part of why companies spend millions of dollars in Social Media. Customers like that companies pay the 'special' attention, through the power of the internet. As companies look for more and more ways to 'personalize' consumption, graphic design will eventually lead the way to Personalized Corporate Identities. Which is the adaptation of a the corporate identity for the individual, through a certain amount of rules (which will proably be dictated by an algorithm). This way for example, a company can adapt their own identity depending on your name, your city, your birthrate, your favorite color. On the next post i will talk about the implications in visual language that this will have and some examples on how this might be done. I also intend to explain how this movement is already happening, through some visual identities that have been created recently.    

Hello world!

Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!