code Archives - circlecube

WordPress Core Contributor and my WordPress Story

Posted on December 7, 2018December 7, 2018 by Evan Mullins

As I updated a WordPress site today (the new 5.0 version just shipped) I was proud to see my name in the list of core contributors! I’m listed as a core contributor in versions 4.9 as well as 5.0! I didn’t get around to sharing the news last year, but seeing my name in the credits as I upgraded today I realized I should share my WordPress story.

My WordPress Story

I share because as an aspiring developer over a decade ago, I fell into WordPress quite accidentally. I was studying in art school at the University of Georgia and creating my own interdiscipline degree with art, technology and animation. I happened to sign up for a Web design for Artists course to create a portfolio site because I was friends with the teacher. We learned flash and stepped into WordPress for blogging. I learned some coding from flash as well as the basics of HTML and CSS to customize the look of my kubric2 blog. The more I learned about coding online, the more I just ate it up!

I loved the immediacy of it all, in contrast to the long time required in my animation classes. For animation you must develop the story, the characters, do the modeling, and rigging and textures and lighting and keyframes etc etc etc, and then you have to let the computer render the animation to see the final. One of my final animation projects for a full semester project was literally half a minute long and it was a rendered movie file that I couldn’t even email because it was so large! It was a motion capture video and was still rather jumpy, but was pretty exciting stuff at the time.

In contrast, in my website class, my final project was viewable anywhere in the world and I could change the look on the fly. I even uploaded my animation so that others could view it online. I was excited for the new world of the internet! It was also interactive! You can do more than just watch it, you actually engage with it and touch (click) it and explore it. Though it can have some movement like animation, it’s a more simple type of movement.

Under pressure to support my pregnant wife, I found a job as a web designer and learned more about javascript and php on the clock. I’m happy that years later, I’m still using WordPress to build sites and grow my skills. WordPress has helped me make sense of web development and grow my career to support a growing family. I’m still extremely grateful and even fascinated by the open source community surrounding the software. I’m humbled to be included in the names of contributors. If I can do it, so can you. Keep working at it and chase your dreams.

My (small) Contributions

Last year, for 4.9, I was able to fix a bug I found in the media library where clicking on the edge of an image failed to select it. It was minor, but I found it annoying, so I created a ticket and after tinkering a while on it figured out how to submit a patch. I discussed the patch with some others and at WordCamp spoke with a committer who pushed it through!

I got involved with the early development with Gutenberg (the new block editor) on github. I figured out how to submit the pull request via github and participated in the wordpress slack discussions. That was a long time ago, but finally with the release of 5.0 Gutenberg is now included. That is until I got too busy to continue and then when I was about to pick it back up, I changed jobs. I know they have been small contributions, but I’m proud nonetheless. I have a goal to continue my contributions and perhaps even up the amount of code I’m able to share. I feel like I’ve come a long way since those early years, as well as WordPress has come a long way.

Modifying Your Theme’s Design – Learning CSS: Atlanta WordPress Users Group Presentation

Posted on March 9, 2016March 10, 2016 by Evan Mullins

Here’s my presentation for the Atlanta WordPress Users Group to continuing their discussion on theming. The meetup gives you a first hand look at modifying your Theme’s look and feel. We’ll be showing you how to make typical changes to existing themes. We will not be showing you how to create your own theme from scratch, though we will have a meetup later in the year to do that.

During this meetup we discussed:

• What is CSS and why do we use it?

• What are ‘typical’ modifications to themes and how to make them

• Using ‘inspect element’ and/or ‘firebug’ to find and test

• Correct way to change Fonts

• Simple color theory and design

Here’s the slide deck for the presentation

Modifying your themes design – Learning CSS – Atlanta WordPress users group from Evan Mullins

The presentation overviews the internet, teaches us how to spell HTML and other web programming “languages” that come together to form a WordPress website, like HTML, CSS & PHP. We even discussed web development tools like FTP clients and which text editors to use. We went over what makes up a wordpress theme and then the concept of child themes. Discussed the process of creating your own child theme with just a couple files and that you can create a child theme for any theme out there. We demoed how to view source and dissect any website, but more importantly, how to inspect elements on your site and live-edit the css for any element. Then to write these CSS rules to our theme to lock in the edits in your child theme.

If you have any further questions that you would specifically like reviewed, leave them in the comments below and I’ll respond.

We created a child theme for twentysixteen

We created our own child theme and discussed the benefit to creating a child theme over other ways to modify a WP theme. Our twentysixteen child theme did wonders for the look:

We explored the code to create our own WordPress child theme

Here are the code snippets for review

https://gist.github.com/circlecube/e5605fab0327105a1efd

How to Add a class to the WordPress comments submit button

Posted on October 2, 2015March 21, 2016 by Evan Mullins

This WordPress feature slipped by me, but since the release of WP 4.1 there is a great and simple new filter that I’ve been watching for a number of years here. Interestingly this ticket was opened 5 years ago today, so some have literally been waiting years! The commentform.php file now has a couple more options available as explained in this changeset.

I have been using foundation and bootstrap on sites and have struggled with the best way to add a button class to this button since I wanted it to inherit the frameworks styles for a button. I’ve seen a few ways to go about doing this, like using javascript (ug), or adding an extra button and hiding the original button with css (meh). But now it’s a simple little filter to add to comment_form_defaults. Just add your desired class value to ‘class_submit’ in the args. I’ve put it into a simple little gist to add a ‘button’ class to my input type equals submit:


	function circlecube_comment_form( $args ) {

	$args['class_submit'] = 'button'; // since WP 4.1

	return $args;

	}

	add_filter( 'comment_form_defaults', 'circlecube_comment_form' );

view raw

functions.php

hosted with ❤ by GitHub

WP Features: Theme or Plugin

Posted on February 15, 2013August 29, 2014 by Evan Mullins

Reading my wpdaily.co updates today and saw this post talking about WordPress theme features. Eric explains the debate:

Generally-speaking, the conversations have always circled around features: There are those that believe every feature you could ever imagine should be included like text color, font selector, and more. On the flip-side, there are those that feel WordPress themes should be finite and extra features should only be added when it’s niche specific.

He says the the main problem is theme bloat, but I think it’s more about the lock-in effect some themes have on users. If they customize it or add content via functionality provided by the theme, then if they switch they no longer have access to it (although the content does persist in the database, there’s just no longer an interface to accessing it).

If users are stuck in your theme because it’s the only way they know how to show their content then it becomes problematic. I’m curious as to how often users are going around changing themes though. Are they changing themes for more/different functionality or for a new look? I find myself changing a theme every couple years or so to update the site, but that’s usually in a whole redesign phase and not just switching around for fun. Should theme switching be more frequent?

I also see it from the user perspective. They just want to purchase/install a theme and be running, they may not have the patience or expertise to 1) find the right plugin 2) install it and set it up, so they’d prefer it be in the theme as a package deal.

Partly, I don’t see it a problem including CPT info in a theme, because that’s where you have to style it anyways, right? Users want their post types, but they also want the templates and styles and functionality/integration with the site that go along with them, and I think a theme is the easiest place to keep all that for the developers as well as the users. Plugin shouldn’t have all the styles for the CPT content and can’t have the template files because then if they switch the theme the styles conflict with the new theme. They may end up having to learn CSS to switch the theme anyways. The users are going to want their data displayed properly as well as it be accessible on their site. So if a new theme would not properly display or integrate the CPT data, then why have it included at all.

Eric does offer some alternative solutions:

Offer a Support License purchase option that allows users to follow tutorials for their own customization.
Offer free downloadable plugins that work exclusively with your premium theme that adds easy functionality.
Offer tiered theme versions–beginner, advanced and developer.

I like the idea of including a plugin to add functionality, but I’d suggest that rather than making it exclusive, make it work with any theme, just make sure your theme supports it (along with other popular plugins).

There is talk about making extra theme functionality ‘opt-out’ for those experienced enough to do so. Set a variable in the functions.php file or even comment out a block of code to remove some customization options to it can be done via a plugin. This, although more work, seems like a good option. Providing the features by plugin makes sense, but asking beginner users to do that extra work seems like unnecessary friction.

Also, it’d be nice if WP had a built in UI for custom post types and custom taxonomies and even custom fields and meta boxes in core. Lay users could then easily create content types and manage data. WordPress would be a tool to create your own custom CMS. Theme developers could create post types as well and then WP would be smart enough to detect data in a CPT table and include the needed UI. Then the users could create/manage content types so if they installed a theme that created a custom post type, since it was now in the database, it would stay even if the theme changed. There are many rabbit holes here, but I feel like I’m onto something and would be excited to see WordPress go this direction.

Thoughts?

On Going Responsive (responding to Where to Start)

Posted on February 8, 2013August 29, 2014 by Evan Mullins

I needed to write this up about going responsive in response after reading Where to Start (by Trent Walton of Paravel) about getting started with responsive web design. Thanks for sharing your thoughts Trent, I agree whole heartedly. In my experience it is the same. I wanted to share his post and also add my commentary for the parts that I really think Trent is spot on. Some dynamite points.

Longer On-Ramps Have Benefits

I believe Trent is talking about the on-ramp of beginning to create responsive sites. But when I first read the headline about the benefits of a lengthy on-ramp I was thinking about the ‘pre-design’ work that goes into a website. All that work that comes before design and has always been super beneficial to proceed thoughtfully with content strategies, sketching, architecture, wireframes and prototypes. This ‘on-ramp’ stage is even more important in RWD. The time well spent upfront before getting into designs and especially programming really really pays off. Think through all scenarios and purposes and requirements of the site before you hit the ground running. Or else you may get to the finish line realizing you forgot the baton. This is so important concerning responsive from the beginning, when making wireframes for example, we really must think about the available space to render the content.

Design

It’s no longer for prescribing exactly what a site should look like. Instead, it’s used for quick layout exploration and asset creation. As for which view/layout size one should start with, I don’t think it matters. Remember, a single photoshop comp will only express a sliver of the layout potential a fully-flexible responsive site has. It’s impossible to accurately assess a responsive layout in .JPG form.

Yes! Agencies (and clients alike, but I feel that the agencies and developers need to lead the way) need to move past the relic ideal of pixel perfect websites. Not that they should look bad, but they should not all look the same. The nature of the web is to be flexible, right? Let’s embrace progressive enhancements and move on when old browsers don’t see it as nice as current browsers.

CSS

All my values are relative (em, rem, etc.) and based on the 100% 16px base, so I can move code around without losing proportion.

Yes, Again! We need to be relative and fluid all the time. We’ve all picked up some bad habits along the way, but RWD can be seen as a good excuse to remove these.

Breakpoints should always be dictated by our content. Not by `insert popular device of the day`. We should be starting to learn that we shouldn’t rely on any specific device or measurement, because they change all the time. Let’s FORGET device resolutions at the media query stage. These dimensions should be thought out earlier and influence our content strategy. Nothing wrong with using 480 as a breakpoint if it makes sense for your content, but don’t force a square peg into a circle hole. Who knows, next year all these circle holes may become triangles (or spheres) and then we’re stuck shoehorning the square we started with again or starting over. Weird analogy, but I’m just going to let it be.

Regarding Grids, I agree here too. It seems that when using a grid for Responsive Web Design I feel constrained to the grid more than I should. Plus I think it takes the fun out of the process of laying out the content as prescribed. I love the idea of ‘content coreography’ too. It really adds to the sense the required craftsmanship by the developers/designers behind the site well done RWD. It also makes me think of site creators as the directors who layout and present data and lead the story telling of the site.

I’ve said it before, but I’m constantly excited by the web design industry because as it is such a young field, we are still making up the rules and discovering as a community what processes are best. At the same time, the technology driving the field is changing so fast that just when we start to settle into a routine it all gets flipped on it’s head and we’re reconsidering everything again.

Please read Trent’s full article as I’m sure it’s packed with good nuggets for you too.

When making the transition to building responsive websites, the hardest part can be getting started.
I get my fair share of questions about how to choose a direction and chart out the first few steps from industry comrades and potential clients. It can seem daunting, so I thought I’d attempt to sum up a few of my own current thoughts on the matter.

via Where to Start | Trent Walton.

Add Parent Page Slug and Parent Template to WordPress Body Class

Posted on February 8, 2013August 29, 2014 by Evan Mullins

Add CSS body classes for the parent page on all child pages and the parent page template on of a WordPress site with this body_class filter. Ever need to style all child pages of a parent page in the same way or have you wanted to access every child page of a parent page via css selectors for styling? What about selecting all pages that are descendants of a page which is using a specific template?

Building large websites gets complicated, even in WordPress. Large sites usually mean there are many subpages and sections to the website that may need to be styled similarly. I’ve found it helpful to add a page’s parent page slug to the body class to allow me to alter or target the page or group of pages via css. By default the themes I’ve used have been generous in adding classes to the html body element for easy css selection rules. Things like the post slug, page template, logged in status, page vs post (or custom post type), post id, author… you get the idea. While half the time I don’t need half of this and the other half the time I find myself needing more.

Place this code into your functions.php file and your html body element will have a couple additional classes if they apply. It will have a class delineating the slug for the parent page on all child pages as well as a class delineating the template used by the parent page. This lets me apply styles to a whole sibling-section of a site pretty easily by just targeting the parent-slug on the body. Also adding the template of the parent in case I needed to use that.

Walking through the code here we’re filtering the body_class function is how we are able to add this. We name our own function and give it a $classes parameter. Then throughout our function we can add classes to this $classes array and they will be output with the rest of the body classes. We need to hook into WordPress at the body_class function with add_filter and specify the hook and specify our own function to be called. In this case we grab the page properties of post_parent and the template of that parent. First set the post variable to reference the global scope, and then check to see if the post is a page with is_page. Then if the post object has a value for the parent (post_parent) we add the parent’s name to the classes array. Then we get the _wp_page_template meta data from the parent to find the template it’s using (if there is no template specified, then it returns default). This is added to our classes if it exists and then we return the classes array to the original body_class WP core function.

[cc lang=”php”]
/////////////////////////////////////////////////////////////////////////////////
// Body class adding page-parent
//
function cc_body_class( $classes ) {
global $post;
if ( is_page() ) {
// Has parent / is sub-page
if ( $post->post_parent ) {
# Parent post name/slug
$parent = get_post( $post->post_parent );
$classes[] = ‘parent-slug-‘.$parent->post_name;
// Parent template name
$parent_template = get_post_meta( $parent->ID, ‘_wp_page_template’, true);
if ( !empty($parent_template) )
$classes[] = ‘parent-template-‘.sanitize_html_class( str_replace( ‘.’, ‘-‘, $parent_template ), ” );
}
}
return $classes;
}
add_filter( ‘body_class’, ‘cc_body_class’ );
[/cc]

There are many more classes we can add to the body_class and like I said, sometimes you need more than what’s already provided and sometimes you need nothing. It all depends on the theme you’re using, what it provides and what your specific site and design require. What other classes have you wanted to see here? How have you filtered body_class to fit your site’s needs?

Android App Development Keystore for Beginners

Posted on February 6, 2013August 29, 2014 by Evan Mullins

Getting into some mobile app development for Android and I was unprepared for the keystore file that is required to be included in the apk file. Using PhoneGap Build to compile my app the interface requires a keystore file uploaded.

After some digging on google it seems that the most common way to create a keystore file is by using some Java IDE like Eclipse, but the whole reason I was using build phonegap was because I didn’t want to fool with one of those. I finally pieced together what I needed with a few posts and wanted to put it all together to help at least myself in the future.

Luckily with a mac apparently you can do this with terminal! Following a couple tutorials, I managed to create a proper file, and going through a few steps to set the expiration or validity and the alias.

To create a keystore on mac OSX, first, open terminal. We’ll type keytool and then there are some commands to type and our keystore file will be created. -genkey (generates the key), -v turns on verbose mode so full details will be output, -keystore tells it what to name the actual file (it actually saves to the root directory, I’m sure there’s a way to specify location somewhere) and you type the filename (including the .keystore file extension). Once you enter this in you are prompted to fill out your name and company name and info like city, state and country. Then it verifies everything and you must type ‘yes’. Then it will prompt twice for a password, remember this it is how you will update/rebuild your app.

keytool -genkey -v -keystore file_name.keystore

This got me going but I had to do some back and forth to know some other requirements specifically for android marketplace and working with PhoneGap. PhoneGap Build was asking for the alias when I uploaded the keystore file to build my project, but I hadn’t set one. I had no idea what it would be and after trying my name and company and even filename I had to do some more digging. We can in fact set the alias name when I create the key with the -alias command. It doesn’t matter what this is, you just have to remember it. I think of it like the username to my previously entered password. The default is set to mykey, so you don’t really need to set it. This got me through the Build process with PhoneGap, and then I set up my app on the android marketplace (after paying the $25 license fee). Once I uploaded my first apk file I was getting errors regarding the keystore again. The marketplace was telling me that the validity was not large enough. The validity (or expiration) of the key by default is set to 90 days, but the marketplace requires at least 10000 days… quite a difference, no? So to set validity we add the -validity command followed by the value of 10000. Once i did this round I re-uploaded the keystore to PhoneGap, rebuilt the app and resubmitted to the Android Marketplace and it was accepted! Wow.

keytool -genkey -alias alias_name -validity 10000 -v -keystore file_name.keystore

I hope that helped someone. I’m surprised that the PhoneGap doesn’t aleviate some of the pain in this process. Since the whole point of using Build PhoneGap is so that I don’t have to set up an IDE or get complicated. A simple online keystore gen process would go a long way, and better yet if they automated it somehow!

Did I miss any steps? Are there better ways to do this? (I sure hope so) Share a comment.

Also, check out the app I made from web technologies html, css and javascript with the help of PhoneGap. It’s a quiz that tests and teaches users facial recognition of leaders at church. It’s called LDSQuiz and shows images of modern day prophets and apostles and asks you to identify them by name.

Reference links that helped me:

Set Default Terms for your Custom Taxonomies

Posted on January 31, 2013August 29, 2014 by Evan Mullins

Custom Taxonomy Default Term(s) for when it’s left blank

After looking through the WP codex and various plugins, I couldn’t find anywhere to set a custom taxonomy default term. WordPress has allowed us to create custom taxonomies for a while. Before we only had categories and tags hard coded in core. One feature from those days that didn’t seem to make it to the custom taxonomies of today is the possibility to select a default taxonomy term if none are selected. Did you know about this feature? Odds are you did, even if you didn’t realize it. Have you ever seen that ‘uncategorized’ category? That was the default category added for any content that didn’t have a specific category and was left, well, uncategorized.

An annoying feature if you weren’t expecting it, but nice to have if you took the moment to actually set up your default properly. I was working on a project recently with custom post types and custom taxonomies and suddenly needed this feature, but it didn’t seem to exist, so a few google’s later I found this nice snippet from Micheal Fields. Adopting the hook and adding some to allow for custom post types I wanted to share it here for my own safe keeping as well as the benefit of the community.

To Code Custom Taxonomy Default Terms

[cc lang=”php”]
/**
* Define default terms for custom taxonomies in WordPress 3.0.1
*
* @author Michael Fields http://wordpress.mfields.org/
* @props John P. Bloch http://www.johnpbloch.com/
* @props Evan Mulins https://circlecube.com/circlecube/
*
* @since 2010-09-13
* @alter 2013-01-31
*
* @license GPLv2
*/
function mfields_set_default_object_terms( $post_id, $post ) {
if ( ‘publish’ === $post->post_status && $post->post_type === ‘your_custom_post_type’ ) {
$defaults = array(
‘your_taxonomy_id’ => array( ‘your_term_slug’ )
//’your_taxonomy_id’ => array( ‘your_term_slug’, ‘your_term_slug’ )
);
$taxonomies = get_object_taxonomies( $post->post_type );
foreach ( (array) $taxonomies as $taxonomy ) {
$terms = wp_get_post_terms( $post_id, $taxonomy );
if ( empty( $terms ) && array_key_exists( $taxonomy, $defaults ) ) {
wp_set_object_terms( $post_id, $defaults[$taxonomy], $taxonomy );
}
}
}
}
add_action( ‘save_post’, ‘mfields_set_default_object_terms’, 100, 2 );
[/cc]
This code hooks to ‘save_post’ and fires when the post is saved. It will check the post status and only execute if the post status is set to publish. My addition will also check the post type against your custom post type. Then it sets the default for any taxonomy that you want to set a default for. Either a single term or multiple terms can be set as the default taxonomy term. If you want multiple default terms then you just use a comma separated list. This hook will then load the existing taxonomies and if they are not yet set on the post it will set them to your designated default(s). It’s nice and flexible as you can have multiple taxonomy defaults set quickly in the defaults array. Thanks Michael!

Set Default Terms for your Custom Taxonomies via Michael Fields » Set Default Terms for your Custom Taxonomies.

A Practical Guide to HTML & CSS – Learn How to Build Websites

Posted on January 21, 2013August 29, 2014 by Evan Mullins

I came across Shay Howe’s website today for the first time and am very impressed with his learn section. He’s created the content for a course (or 2) to learn HTML and CSS. There is a beginner’s guide and then an advanced one is scheduled too. This is great content or curriculum and would be a great boost to anyone interested on the subject. It is very thorough and teaches good practice with bad vs good examples throughout.

A Practical Guide to HTML & CSS – Learn How to Build Websites.

http://learn.shayhowe.com/html-css/
http://learn.shayhowe.com/advanced-html-css/

Separate HTML and CSS for fast clear & clean code

Posted on April 24, 2012August 29, 2014 by Evan Mullins

Another great article from Jonathan Snook reasoning thorugh the benefits of specific css class selectors with some good examples. Really calls to mind his SMACSS principles I've been loving.

Embedded Link

Decoupling HTML From CSS | Smashing Coding
For years, the Web standards community has talked about the separation of concerns. Separate your CSS from your JavaScript from your HTML. We all do that, right? CSS goes into its own file; JavaScript…