corenominal

Full stack web developer, interested in all the things, but especially the web, code, design, Linux, OS X, PHP, WordPress, JavaScript & robots.

Tagged: theme development

Conditionally include additional CSS and JavaScript for page templates in WordPress

I’m currently working on a large’ish WordPress theme that has a number of custom page templates. The custom page templates require their own CSS and JavaScript files, so I’m using the following code to enqueue the additional files. This allows for a file structure like so:

themes/mytheme/page_template_foo.php // custom page template
themes/mytheme/css/page_template_foo.css // additional CSS
themes/mytheme/js/page_template_foo.js // additional JS

The code should be self-explanatory, but see the comments for explanations as to what’s happening.

Notes: this method increases overheads as it tests for the existence of files, if you’ve only got a couple of custom page templates, you’d be better off hardcoding. That said, if you’re using caching it shouldn’t be a big deal. Also, unless you’re using HTTP/2, you’ll probably want to use something like Autoptimize to concatenate the CSS and JS files.

A Blank WordPress Theme

Tonight, I created a new WordPress theme. The theme is intentionally blank and it only took a couple of minutes to create. The theme serves one purpose. Imagine the following scenario:

As a security precaution, and to prevent unnecessary updates, a WordPress developer has removed all the default WordPress themes, leaving him/her with just the single theme he/she is using/developing. The developer then realises that in order to test a theme activation plugin, he/she needs another theme. Doh.

Today, I was that developer.

This blank theme enables the developer to quickly switch between themes, without any security risks or any unnecessary updates.

Animated gif showing the Blank theme's single purpose

Animated gif showing the Blank theme’s single purpose.

P.S. I’m not sure if there are other themes like this already, to be honest, it was probably quicker to create the theme than it would have been to research it.

Transport New Web Font

A mockup of a road sign using the Transport New font.

Web font || webfont? Either way, this site is now using the Transport New font. The process of picking a font for this site probably took longer than it needed to, but I wanted to choose something a bit different. I knew I didn’t want to use a font from the Google Fonts service, every man and his dog uses those, but I wasn’t too sure where else to look. With this in mind, I decided that I’d just wait until I found something I really liked.

So, the other day I was researching fonts for a project at work and I came across Transport New, and I instantly knew that I wanted to use it. The font is a redrawing of the typeface (New Transport) designed for British road signs and it was created by K-Type, a small, independent type foundry based in Manchester, England.

The font cost just £12 with a commercial license, which permits @font-face use without any pageview limitations. The download only contained TTF and OTF versions, so I headed over to Font Squirrel and used their excellent generator service to create a webfont kit. I’m really pleased with how it looks on this site, I think it’s rather spiffy.

P.S. The only issue with using the font on this site is that I’ve had to add it to my WordPress theme’s .gitignore file, so that I don’t illegally distribute it via the theme’s GitHub repo.

UPDATE 2016-01-16: The webfont lasted less than 48 hours on this site. I wasn’t entirely happy with its weight (it was a little too heavy), so I removed it. Oh well, the search goes on.

Recognising When To Move To A New Project

In a recent article on 24ways, Ros Horner wrote:

Building your own websites is tough. You’ll never be happy with it, you’ll constantly be updating it to keep up with technology and fashion, and by the time you’ve finished it you’ll want to start all over again.

I can associate with her words (especially the part about wanting to start all over again). There comes a time when you need to recognise that you’ve accomplished most of what you wanted to achieve with your website. You’ll never be entirely happy with it, and sure, there will be tweaks and updates that you’ll still want/need to do, but for the most part, the website will be done.

I think I’ve reached that stage with this site and WordPress theme. I’ve still got some additional features and functionality that I want to add, but for now, the site is serving its purpose and it’s time to move on to another project.

Regarding the new project, I was planning to start it in the New Year, and I may still, but I’ve got some time off over the Christmas period, so I may make a start on it early than planned. Or, I may continue messing around with the HTML5 canvas element — sometimes I just like to create fun stuff.

 

Disabling WordPress Smilies & Emoji

Call me old, or whatever, but personally, I think smilies and emoji in WordPress should be enabled by plugins or themes, they should not form part of the WP core system. There, I’ve said it.

Anyhow, when attempting to disable the emoji in my theme, I came across an issue whereby the option to disable the conversion of :) to images was missing in the WP admin area. The problem was, I didn’t know it was missing, so when I tried to implement this, I was still seeing emoji in my posts and comments. Annoying.

To workaround the issue, I’ve added a function to the ‘after_switch_theme‘ action that sets the ‘use_smilies’ option to false. Voila, no more smiles :)

No Longer Naked

I’ve pulled down the CSS for my site’s WordPress theme from the GitHub repo and it’s no longer naked. This is a good thing and I’m pretty happy with the result.

The design is still quite basic and there is more to do, but I think I hit my target of replicating my Twitter profile page. It’s not identical, obviously, but I think I’ve captured the overall style quite well. See below:

My current Twitter profile:

Screenshot of my current Twitter profile page.

 

My website design:

Screenshot of my website's design.

TADA!

Styling My WP Theme

I’ve begun styling my WordPress theme. It’s going well, but it’s taking some time as I didn’t quite realise how many markup elements there are in a theme. In case you’re wondering, there are lots and lots and lots.  Still, I’m enjoying it, so it’s all good.

Regarding my style choices, I’ve opted to try and replicate my Twitter profile page. It’s totally different from the minimalist style I’d normally go for, but I like it and think it’s kind of fun. Interestingly, or not, I didn’t realise, until I started to attempt to replicate it, how good the current Twitter page and UX design is. Personally, I think it is a work of genius.

I’m sure my attempt at replicating it will pale in comparison, but as long as I get the basics right, I’ll be happy. Anyhow, the code has been going up to the GitHub repo and I’m hoping to pull it down to this production server soon.

A somewhat funny observation: I’ve used Twitter’s Bootstrap in pretty much every project for the past year, but now, as I’m attempting to replicate my Twitter profile page, I’ve opted not to use it. Go figure.

A Custom Post Type For Links

Tonight, I pushed a commit to my WordPress theme to include a new custom post type and taxonomy. The custom post type is ‘link’ and I’ve included it so that I can create short-form posts that link to some of the interesting content I come across on a daily basis.

Before I did this, I thought about whether or not I needed a custom post type. I mean, I could just use a category, or post format, but I figure that a custom post type will provide better separation, and the separation will possibly provide more options for front-end customisation. That said, I’m not entirely convinced of this, so I think I’ll see how well it works, and then decide if I keep it or not.

Talking of the front-end, I’ve not coded the custom post type templates, yet, but I’ll probably do that next.

WordPress Options API

Tonight, I have mostly been playing with the WordPress Options API to create some admin pages for my theme. I was pleasantly surprised by how easy it was to create the admin pages and associated custom options. I think I’m going to be able to have a lot of fun with these.

Screenshot of admin page showing custom theme options.

My only concerns with using these custom options are:

  1. How do they impact on performance?
  2. When should I use them in a theme, as opposed to a plugin?

I guess I can test the performance impact, but I’m thinking that caching will negate any concerns I might have. With regards to my second concern, I’m thinking I’m probably the only person to decide this and it’ll depend on how self-contained I’d like my theme to be.