January 28, 20153 Comments

How to customise the Blog grid when using Semplice

I’ve switched to Semplice as my go to WordPress CRM platform. I won’t call it a “theme”, because it isn’t really. As they say, it’s a toolkit. They don’t design the site for you.

Semplice really is the "designers best kept secret", just as they sell it, because, you know, it basically just puts the good-old twitter bootstrap grid features into WP: And a designer needs nothing else. All he needs is a container and an image to fill it with.

Semplice is great for simple custom pages, and portfolios and the like - it uses industry standard tools - but it’s weak on the blog layout tools: If you want a better blog layout other than the default you will need to add your custom css, and do some tweaking on the actual grid, in the html editor.

The custom css is easy. There is a box for it. But what if you want to change the grid? Well, it's not so tough. Semplice uses bootstrap (v2) so all we need to do is go into the Appearance -> Editor and change the classes on the blog layouts we want.

For example: I didn't like the default 8 columns grid layout on the blog, so let’s change the default 8 column span blog layout for 6 columns: 8 is too long, 6 is Goldilocks.

Open the editor and the format-standard.php file, then look for the span8 offset2 class. Change it for span6 and offset3.

Of course, change it for whatever tickles your fancy.  Er.. that’s it. Have a nice day now.

UPDATE: I've updated to version 2.0 and they seem to have changed the blog formatting (and lost my changes). I looked under-the-hood and found they have moved the widths to some invisible option that is inaccessible. So, for now, I needed to actually hack the code until they make the option available: For you information I changed the format-standard.php file and commented out the line with the option altogether and manually added my span6 as above. Pretty crude, but their discussion forums are impenetrable. Hope they fix this. This is the line you need to comment out for now:

if(get_field('skinoptions_content_width', 'options'))

Update Two: Check the comments below, someone found out it has now been put into Advanced Styling option. So we are all happy.

January 10, 2015No Comments

Code Folding in Vim

Detractors of Vim highlight its many native flaws - yet there is a unlimited supply of extensions for those who look. Code folding is a pretty handy tool for coding, especially for closing tags.

Read more

January 10, 2015No Comments

How to create a github repo from the command line

The awesome thing about the command line is the intimate relationship you build up with the internet (as opposed to the world wide web). Not to mention the time saving... Why open a browser, navigate to github, click here and there to create a repo, when it can be done in one line from the prompt?


Here's how:
curl -u "yourgithub@email.com" https://api.github.com/user/repos -d '{"name":"yourdesiredreponame"}'

What is going on here? We are basically injecting data directly into Githubs database, via their API.

We are using curl (a tool to transfer data from or to a server) to call the Github API which we pass our username -u "email" and we specify that we pushing data with the -d '{"name":"var"}' flag.

Inside the data object we push to Githubs database we can specify more items than just the name, such as if a repo is private or not.

FYI here is the github API documentation

UPDATE: It's also possible to simply use the awesomeness of Hub - a command-line interface for GIT

January 28, 2014No Comments

How to set Vim to color code LESS files

Today's awesome dev snippet is a quick hack to set up VIM to colour-code syntax for LESS as it does for CSS.  Add the following line to your .vimrc file (or create on if you don't have it).

au BufNewFile,BufRead *.less set filetype=css


April 18, 2013No Comments

Using WordPress Jetpack Locally

This is just a quick snippet for developers who have had problems setting up Jetpack locally.

Jetpack was recently updated to include a developers mode, because previously it required a connection to a WordPress.com account.  All you need to do to activate Jetpack locally, without connecting to wordpress.com is the following:

  1. Open wp-config.php

  2. Add the following line - possibly best below the WP_DEBUG line.

define('JETPACK_DEV_DEBUG', true);

And save the file.  Don't forget to change that on the live version!

November 7, 2012No Comments

How to Create a Nice Inner Box-Shadow Effect with CSS

box-shadow: 1px 2px 30px 10px rgba(0,0,0,0.1) inset ;

Read more

February 15, 2012No Comments

How to Call Class Functions in WordPress Templates

Every WordPress developer should be using Classes for their plugins and extensions.  But how?

Read more