Month: August 2017

CrankedBlue – A responsive WordPress theme in HTML5 & CSS3

Posted on | by John Endicott

I’ve had quite a few questions and requests for examples in regards to my experience with responsive web design and WordPress themes. I’ve worked with WordPress frequently over the last 10 years, and I wanted to do a quick example for those asking about my experience and figured I’d just release it free. There are lots of easy UI frameworks like Bootstrap where you can whip together responsive design with virtually no knowledge of HTML5, CSS3, media queries, etc but I wanted to create a project that showed I have the knowledge to build a responsive website design from scratch without using any UI frameworks, jQuery plugins, or similar technologies – just pure HTML5 and CSS3. I also wanted to demonstrate my knowledge of coding themes from scratch into WordPress, so I broke this project down into two sections.

The Mock-Up
So to start this project, I needed to put together a mock-up in just HTML and CSS. You can see that mock-up live here. I have started with the most basic necessities for a WordPress theme: a header, 2 columns (a posts/content column & a widgets column), and a footer. I coded this from scratch using CSS3 media queries to make it responsive. The most complicated part of the design was the responsive menu – I needed the dropdowns to go at least 3 tiers deep in preparation for WordPress. The nav menu is mostly composed of CSS, but eventually I had to add a little Javascript for toggling the dropdowns on smaller screens. You can download a zip of the mockup here.

Coding to WordPress
Coding to WordPress is fairly straight-forward. Their documentation is long-standing and the API hasn’t really changed drastically over the years. Went smoothly, wrote several things in PHP using several action hooks and even a filter. I integrated WP Customization API so you can change the logo, header image, background color, header text colors, menus, etc via the WordPress Customizer in the admin panel. After I was finished, I did quick testing using Theme Unit Test provided by WordPress and also the Theme Check plugin recommended by the WordPress Theme Developer reference.

Overall, this serves as a quick example that I was able to throw together in some spare time over the weekend. I will most likely be following up with updates to CrankedBlue; and maybe a sister theme based on Bootstrap and/or some jQuery plugins, and maybe some WordPress custom plugins as well, just because to broaden my portfolio.

Live Demo & Download
Live demo is available here. I am submitting to the WordPress theme database, however apparently after searching, it appears the wait on review can be 6+ months. In the meantime, CrankedBlue is available for download and is licenced under GPL.

Introducing: Hoptender Business & the new Hoptender.com

Posted on | by John Endicott

Introducing: Hoptender Business

Hoptender Business Panel is now live! Hoptender businesses can claim and manage their listings by signing in via Facebook or Twitter. Here are some of the details:

Claim Your Business Listings

Sign in via Twitter – Log in via Twitter and any Hoptender business whose Twitter account matches yours will automatically be claimed.
Sign in via Facebook – Log in via Facebook and any Hoptender business who has a Facebook page to which you are an admin of on Facebook will automatically be claimed.
Update Business Listing – Edit contact information, opening hours, thumbnail photos, and more.

Manage Your Events

Business Calendars – View and edit events being imported from Facebook, your website, or exportable feeds.
Manage Events – Add, edit, and delete events from your calendar.
Tag Businesses – Tag other businesses and reach their audience via push notifications (example: a food truck tags they are going to be at a brewery, Hoptender users who favorite your truck and that brewery will get a push notification). You can also untag yourself from events other businesses tagged you in.
Sync Events from Exportable Feeds – Automatically sync events from your website via Google Calendar or iCalendar / ICS feed.

Misc Features

Dashboard – Overview of your listings, events, and tags
Hoptender Business Account Profile – Update your contact information so Hoptender can send you some free stuff or contact you if required.
Website & Social Badges – HTML codes for websites and blogs for “Find Us on Hoptender” badges. Also, there are some similar social media images available for sharing.

New/Redesigned: Hoptender.com

Hoptender.com has received a major face-lift! We have redesigned the entire landing page. The feature-limited web version of the Hoptender app will soon be depreciated, however you can still access it here for the time-being. It has been decided efforts are better focused on the app as that’s what the bulk of our users are using.