Categories
WordPress Themes

Introducing Popper – a new free WordPress theme for everyone

As an early present for Jul, I give you Popper, a new free WordPress theme with a focus on accessibility, mobile-first design, beautiful typography, and content-centric minimalism.

As with Simone, my theme from last year, Popper was built from _S and is the subject matter of the yet-to-be-released update to the popular WordPress: Building Themes From Scratch Using Underscores course at Lynda.com (release date tba).

Accessibility and Thumbs

Popper started out as a simple idea: Build a beautiful content-focussed theme that met or exceeded the WordPress Accessibililty Guidelines, and provided a user experience centered around how people visit the web today: with their thumbs on mobile devices.

The accessibility part was relatively easy: _S meets the Accessibility Guidelines out of the box, and extending them just means following the path already carved out by its developers. To enhance what came with _S, I also co-opted the exceptionally well built and accessible menu from Twenty Fifteen and used CSS and JavaScript to make it work as a horizontal menu on wider screens.

Popper's thumb-friendly menu
Popper’s mobile menu was designed with thumbs in mind, popping up from the bottom left to keep all menu items in reach on mobile devices.

In building the menu, I also answered my own challenge from my talk at WordCamp Miami 2015 to design the theme with thumbs in mind. To achieve this, I moved the mobile menu button, which traditionally is positioned in the top left corner, to the bottom left corner, and made the menu appear on top of the content rather than displacing it. As a result, the menu is always accessible and within reach regardless of what type of device or input method you choose to use.

Site Icon as a Home Button

A common request for themes is the ability to add a logo. In Popper, this is achieved using the built in Site Icon feature that normally populates the favicon for the site. The global home button in the theme appears as a square in the top left corner. If no Site Icon is added, the square shows the first letter of the Site Title. If a Site Icon is added, the square shows the Site Icon.

Carefully Considered Options

I am a big fan of options where options are appropriate, and Popper comes with some carefully considered options via the Customizer. In addition to the Site Icon, the site admin can change the background color and text color of the header, and add a header image as a background element.

If the header background color is set to hard white (#ffffff), the theme switches to a minimalist B&W mode that should appeal to even the most discerning minimalist.

The full header, displaying the Site Title and Description as well as the main menu and home button, is only displayed on the Home and archive pages. On single posts and pages, a reduced header is displayed to free up space for the content.

Popper has one widget area that displays at the bottom below the main content by default. From the Customizer, this can be changed to display the widget area as a sidebar either on the hard left or hard right of the view.

The theme also ships with two custom widgets: Enhanced Recent Posts which shows the most recent posts with featured image, post title, and excerpt, and Enhanced Recent Comments which shows recent comments with commenter Gravatar, name, excerpt, and a original post title.

Subtle touches

Because this theme was built as a learning tool, there are a lot of subtle touches that may not be obvious at first, but provide an improved user experience. CSS flex (a.k.a. “flexbox) is used for post navigation and widgets to create a more harmonious display of content, and when the widget area is set to default, the width of individual widgets changes depending on how many widgets are added to provide a more interesting display.

On the home page, the first post is displayed as full content with the option of truncation through the More Tag.

Featured Images and center-aligned images are displayed as full-bleed content on smaller screens and center automatically on wider screens.

Posts can have an optional deck (summary) displayed directly under the post title, powered by the custom Excerpt feature in the post editor.

 

In-content links are highlighted using a grey underline that grows on :hover and :focus.

And if a post author has a Gravatar associated with their email address, the Gravatar appears next to the post meta to show the visitor who wrote the post.

Work in Progress

Like all my themes, Popper is a work in progress, and it will continue to evolve as I come up with new ideas and issues/feature requests/pull requests are submitted. The theme is translation ready and I readily accept contributions from all interested parties in the form of issues, feature requests, pull requests, and translations. To follow the ongoing development of Popper, visit the GitHub repo.

Why “Popper”?

More than likely, you’re wondering why the theme is named “Popper”. The answer is simple: All my themes are named after famous philosophers. This theme is named after Karl Popper, who worked extensively on the philosophies of science, politics, and ethics. Popper is maybe most famous for his ideas on empirical falsification and the problem of scientific demarcation, but he also made great contributions to the study of ethics and politics as a proponent of social liberalism.

I first became aware of Karl Popper during my work on Thomas Kuhn’s Structure of Scientific Revolutions, the almost nihilistic anti-realist epos that birthed the idea of scientific revolutions and paradigm shifts. Kuhn’s work stood in sharp contrast to Popper’s positivism, and in my work with both men’s ideas, I found my own way of seeing the world, as a Kuhnian realist, or a revolutionary positivist. You be the judge.

Popper became the namesake for this theme due to it’s basic premise of building on what has been done before and moving the world forward by introducing evolutionary and empirically falsifiable theories about how to improve the user experience through accessibility and a focus on the hands of the mobile user.

And yes, you are welcome to call me a philosophy nerd.

Categories
WordPress Themes

Help translate Simone to your language

Simone, the free WordPress theme I released in May to coincide with the release of the WordPress: Building Themes from Scratch Using Underscores course on lynda.com, broke 7000 downloads today and is becoming a popular option for WordPress users worldwide.

To make the theme as accessible as possible to anyone and everyone who wants to use it I’ve started adding translation files for languages other than English. As of this writing Simone ships with Finnish, French, German, Hungarian, Italian, Norwegian, and Spanish translation files in addition to the default English. Now I’m reaching out to you to get Simone translated into your language.

Translating Simone

If you want to take part in this endeavour you have two options:

  1. Fork Simone on GitHub, translate the strings with an app like PoEdit, and submit a pull request.
  2. Use this simple Google form to translate the strings and I’ll build the translation files for you

If you are a WordPress user or developer I recommend trying out method 1, if nothing else to learn how to use GitHub and translate WordPress themes. I may even create a short tutorial video for this sometime in the near future.

If you are not comfortable with all this GitHub and PoEdit stuff, just fill out the form and be done with it.

Regardless of what path you choose you’ll be credited for your efforts and you can put a feather in your cap and congratulate yourself on having made this theme even more accessible to the masses.

Your translations will be added in to updates of Simone as they come in so jump on board now and get the ball rolling.

Questions and corrections welcome

If you have a question about this or you find a translation that you feel doesn’t pass muster, leave a comment below and I will respond ASAP.

Categories
WordPress Themes

A Test drive

If you are a frequent visitor of mor10.com or if you’ve visited Design is Philosophy in the past you will have noticed that a major face lift took place last night. What you see today is the beta test of a new WordPress theme I’m working on that in not too long will be released to the WordPress Theme Directory for you to play around with. The theme is actually part of a much bigger project I am working on at lynda.com – more info to come – and in designing and building it I’ve endeavored to follow the most recent standards and trends and look forward into what is coming on the horizon where web publishing is concerned.

Changes will happen to this theme on a daily basis for a while yet and improvements will be built in before the theme reaches the directory. As part of this process I’m test driving it live on my site to crowd source the initiative.

Once the theme is done and released I will also publish it and a growing list of extensions on GitHub for you to check out and collaborate on.

Have your say

So, what do you think? Do you see anything you like or don’t like? Are there elements missing or things that are not working as expected? Let me know in the comments below as I work up to the release.

I’d also like your input on the following:

  • Are Post Formats important to you, and if so which  formats would you use?
  • Is an author box displaying author bio and other info something you want or would you rather leave that to a plugin?
  • Would you like the option of turning off the right-hand sidebar?
  • Would you like a no-sidebar page template?

Of course I cannot guarantee to meet any requests, but I only have my own opinions to go on and I’m releasing this to the public so knowing what the public wants is important.

Categories
Lynda.com WordPress Themes

Free Responsive WordPress theme Anaximander – now available through lynda.com

The wait is over: The free responsive WordPress theme Anaximander is now available for you to use through my new course WordPress: Building Responsive Themes on lynda.com. If you don’t already have a lynda.com subscription you can follow this link – lynda.com/trial/mor10 – and get a free 7 day trial. As you can probably deduce, this theme release is a bit different, so let me explain how and why. But first, check out the features:

Anaximander features

Anaximander is a fully built out responsive WordPress theme built to use all the latest features in WordPress 3.4.1. Theme features include:

  • Fully commented and explained theme files
  • Flexible height header image functionality
  • Custom background colour
  • Custom header and link colour
  • Full Theme Customizer integration of all theme functions
  • Superfish main menu with advanced flyouts
  • Responsive menu for smaller screens
  • Masonry index front page
  • Automatic video embeds on front page
  • Responsive videos through FitVids
  • Responsive images
  • Featured images
  • Three post formats: Regular, Video, Image
    • Regular displays the post as is
    • Video displays any oEmbed video on the front page
    • Image displays the featured image at the top of the single post
  • Custom social media icons in the super-header
  • Advanced search and 404 pages with latest posts
  • Related posts feature with option to switch to Yet Another Related Posts Plugin (YARPP)
  • Optional footer widgets
  • and much much more

A theme you understand

Anaximander was built as a learning tool as well as a modern WordPress theme. The idea of Anaximander was always to ship it in such a way that using it was a learning process. This is how it works: To get Anaximander you have to follow the WordPress: Building Responsive Themes course on lynda.com from beginning to end. You start off with a static version of the theme and end up with a fully responsive theme with tons of extra features like jQuery Masonry, Superfish, and Flexslider built in.

The WordPress: Building Responsive Themes course takes the viewer through the process of converting Anaximander to a responsive theme addressing most of the issues raised by working with responsive themes including how to deal with layouts, images, videos, and menus as well as how to make the theme fit all screen sizes and work well for as many visitors as possible. The course also demonstrates how to incorporate JavaScript plugins and tools properly and provides the viewer with best-practice guides on how to make any WordPress theme responsive.

How exactly is this free?

I’m sure your next question is “How is this a free theme when I have to have a subscription to lynda.com to get it?” There is a simple answer. If you don’t already have a lynda.com subscription you can follow this link – lynda.com/trial/mor10 – and get a free 7 day trial. That’s enough time to follow the course and get Anaximander all set up. I know this looks like some sneaky marketing ploy, but it really isn’t. The whole point of Anaximander is for it to help you learn how to build responsive themes and give you a solid understanding of how the theme works. That’s why it’s not being released as a completed theme. To ensure that the theme would be available to anyone I was able to set the course up so that the static version of the theme is available to everyone including free trial subscribers. Bottom line is the theme is free to anyone who wants it.

Categories
WordPress Themes

Introducing Anaximander: New WordPress theme to be released in the near future

It’s been a long time coming, but Design is Philosophy finally has a new look and better functionality. The new theme which I activated over the weekend is called “Anaximander” and sports everything a modern WordPress theme should have: Semantic valid HTML5 throughout, responsive layout through CSS3 media queries, carefully enqueued javascripts where necessary and index pages running Masonry for ease of use.

The name “Anaximander” comes from my new theme naming standard. Inspired by the WordPress release naming standard I have chosen to name my themes after famous philosophers starting with Thales and movin up through the ages. The philosophy geeks out there will already know this, but Anaximander is the 2nd classical philosopher on that list. If you are curious you should go check out the Wikipedia page about Anaximander (the philosopher, not the theme).

Anaximander is a work in progress and I launched it here on Design is Philosophy to put it through its paces. That means more functionality will be added in the near future (AJAXified infinite scroll on index pages is first on the list) and I will be expanding theme options and customizability. Why you ask? Because Anaximander was built to be shared.

Anaximander: The Free WordPress Theme – coming to your WordPress site in due time

Yep, as with my previous non-client themes Anaximander will be released to the masses at some point in the not too distant future. But not in the normal way: Though I can’t really say anything about what’s in store for Anaximander, it will be released as part of a bigger plan. Unfortunately I can’t be any more specific than that. But stay tuned and you’ll find out.

Browse, play, and report back

Anaximander (and by extension Design is Philosophy) has a lot of tricks up its sleeve – from Masonry to responsive layouts to other stuff. I would love it if you took it for a spin, opened it on your different devices, left a comment and reported back if something didn’t behave the way you expected. I want to build this theme out to make it as user friendly as possible and that means the front end must be flawless. Your input and suggestions are welcome.

Categories
24 Days of WordPress Tutorials WordPress WordPress Themes

Day 24: Vidunder – a Free WordPress theme just for you

I promised something big, and here it is. On this 24th and Last Day of WordPress (for 2010 at least) I give you the new Vidunder WordPress theme that you see running on this very blog.

Download Vidunder right here!

More customization than you’ll ever need

Vidunder (means “wonder” in Norwegian) is a Twentyten child theme that takes what Twentyten does and builds on it. There are so many customization options in this theme it’s hard to list them all but here are the highlights:

Custom colours

The colour scheme of Vidunder is by default orange. But you can change it to any colour you want. Simply go to Appearance -> Background and change the colour. This will change the background colour as well as the link colours and some other elements.

Custom logo

To change the logo go to Appearance -> Header and upload your own. The logo is 87 x 87px and if you want a transparent logo like the one you’re seeing here you need to upload a PNG of exactly that size. If you don’t care about transparency you can upload any image file and WordPress will help crop it to size for you.

Twitter updates in the header

To activate Twitter updates in the header go to Settings -> General, scroll to the bottom and enter your Twitter handle. The theme will go to Twitter, get your latest tweet and display it in the header for you.

Custom header image

Using the Appearance -> Background setting you can also upload a custom header image of your choosing. This is independent of the custom colours.

Custom Author Box

Custom Author Box and Related Posts

To display the Custom Author Box underneath single posts go to Users -> My Profile and define your name, email address, website, bio and Twitter handle (yes, Twitter handle). The author box will grab your Gravatar and display it along with your info. If you don’t have a bio defined the Custom Author Box will not show.

Related Posts

If there are two or more posts in the current category the two latest ones will be displayed under the current post. The Custom Author Box and the Related Posts box can be hidden by the viewer by clicking the Hide button in the top right corner.

Sidebars Gallore

The theme features 9 widgetized areas. In addition to the standard twentyten areas there is Custom which is a full-width area jammed up against the header. You can see it displaying the graphic ads for my books and video series here. Use it with causion. In addition there are Left and Right. Experiment at your own leisure.

And last, but not least…

Download Vidunder right here!

God Jul og Godt Nytt Ã…r!

Now go install Vidunder, mess around with the settings and get your WordPress site going for the new year!

Categories
WordPress as CMS WordPress Themes

What would you want in the perfect WordPress photo theme?

After having finished a myriad of enormously time consuming projects I have decided I need to do something just for fun. So I’m going to build an advanced (and free) WordPress theme for photographers. I’ve noticed over the last couple of years that photographers really love WordPress but that the themes out there, great as they are, are quite inflexible and uniform. As a result a lot of photographers go out and buy a premium theme customized for photographers and advertised as being the greatest thing since the SLR only to realize they are just clunky and inflexible WordPress themes built on top of other clunky and inflexible free themes. So, because I have a lot of photographer friends and because I like building WordPress themes I’m going to build a rock solid WordPress theme specifically for photographers that has tons of customizability and functionality built in.

Have your say: What would the ideal WordPress theme for photographers look like?

I’m a photographer myself, but since I don’t actually sell my photography services I have chosen not to have a dedicated site for it. Therefore I am not the ideal person to make a list of what the perfect or ideal WordPress photo theme should do in terms of functionality, customizability and integration. So instead of making a list myself only to realize I left out all the important stuff I’m asking you point blank what you want.

Go to the comments below and give me your dreams, desires and crazy ideas for what a photography WordPress theme should and could do and I’ll bundle it all up and see if I can incorporate all of, or as much as possible of it into the new theme. Think of it as a collaborative effort: You provide the ideas, I make them into reality!

Categories
Events Speaking Engagements WordPress WordPress as CMS WordPress Themes

Vancouver WordPress Meetup Talk: Simple Yet Powerful WordPress Hacks

Below you’ll find the code examples for my Vancouver WordPress Meetup group talk Simple Yet Powerful WordPress Hacks held on August 12, 2010. This article will be expanded after the talk but for now it consists only of the code examples themselves.

Replace blog title with a linked image

One of my top 10 pet peeves is sites where you can’t click the logo to get to the home page but have to click the “Home” button. This code block can be inserted in the header.php file and it will insert an image (logo) that links back to the home page and also has the alternate text and link title set to the name of the site.


Add WP 3.0 menus to non-WP 3.0 themes

To add WP 3.0 menus to themes that were built before the new version of WordPress or don’t have them built in you need to activate the menu function in functions.php and then add a call to the menu in your template file.

Add to functions.php:

register_nav_menus(
	array(
		'menuName' =>__('Menu Name'),
		'2ndMenu' =>__('2nd Menu'),
	)
);

Add to template file:

 'primary'
	)); 
?>

Note that the theme_location call points to the name of the menu as set in functions.php. To target the menu name set inside WordPress use this code instead:

 'Menu Name'
	)); 
?>

Highlight current page or category in menu

I’ve already written an extensive article on this subject that can be found here. The core of the CSS code is this style:

.current-menu-item,
.current-page-ancestor,
.current-post-ancestor {
	... style info goes here ...
}

Custom page template in 5 lines of code

To create a custom page template simply insert the following 5 lines of code at the top of your template file and give it a name other than “whatever”. Once saved (as something other than page.php) it will appear as one of your template options inside WordPress.


Add Featured Image (thumbnail) functionality to your theme

To activate the Featured Image panel in WordPress admin an enable the function you need to add a small piece of code to the functions.php file. Once this is done and Featured Images have been defined you can call them from within any template file using one of the calls below.

In functions.php:

add_theme_support( 'post-thumbnails' );

In theme file:


The above call will produce the thumbnail in the size defined inside WordPress admin under Settings -> Media. To call a different size use one of the following:

the_post_thumbnail('thumbnail');
the_post_thumbnail('medium');
the_post_thumbnail('large');
the_post_thumbnail(array(nnn,nnn));

For the last one replace ‘nnn’ with any pixel width and height.

Categories
Events Expression Web Speaking Engagements WordPress Themes

MIX10 Proposal: I Reject Your Stylesheet and Substitute My Own

I reject your stylesheet and substitute my own t-shirt

Ever since I was invited to attend Microsoft’s web design and development conference MIX in 2008 I’ve been itching to submit my own session proposal and get on the podium to share with other developers and designers my experiences working with Expression Web and WordPress. The plan was to submit a proposal for MIX09 but life and work intervened and made it impossible for me to even attend (truth be told I was going to a wedding in Hawaii the same week so I really shouldn’t complain). But this year March is wide open and I’ve jumped in head first and submitted a talk with the modest title “I Reject Your Stylesheet And Substitute My Own – Rapid site design and prototyping with Expression Web 3 and WordPress” to the OpenCall portion of MIX10. And now I need your help to get my proposal accepted so I can get in and do my thing.

OpenCall is literally a popularity contest: The ten most voted on proposals get a slot at the conference and the rest are left by the wayside. As far as I can tell my proposal is the only one focusing on Expression Web (at least it’s the only one that shows up on a search) and also the only one talking about WordPress so my hope is that both those interested in the web authoring application and those interested in WordPress specifically or open-source or CMS design in general will find it compelling and want to vote for it. Only time will tell.

To vote for I Reject Your Stylesheet and Substitute My Own visit the OpenCall ballot page found here and click the Add session to ballot button. You can vote for a total of 5 sessions with one ballot. The rest of the sessions can be found here. Once you’re done voting, spread the word and get all your friends to vote for me as well. Voting ends on the 15th of January so there’s little time but I am certain with your help my name will appear on the roster alongside the many other fantastic speakers at MIX10.

Oh, and if you’re interested the extremely limited edition I Reject Your Stylesheet and Substitute My Own T-shirts are available in green, blue, tan and black sizes S, M and L (Fruit of the Loom, heavy cotton) for $20. Contact me with your name and mailing address and I’ll wrap one up and send it to you.

Categories
WordPress Themes

Introducing WaveFront – a new free WordPress theme

WaveFront

Click here to download the free WaveFront theme from the WordPress Theme Directory.

The WaveFront theme is a free generic WordPress theme designed to replicate the looks and features of the two custom WordPress sites Stop Living in the Past and AnnyChih.com.

WaveFront provides calm yet stylish layouts customized for basic CMS functionality with several custom page templates including a no-sidebar front page (Front Page template) with three bottom boxes. The theme also has a list of hidden features and extra content that can be turned on and off by editing the template files.

For a full rundown of WaveFront’s features and customization options please visit the dedicated theme page here.

Categories
WordPress Themes

Typograph Critical Update for WordPress 2.8

It was brought to my attention last night that there is a critical conflict between the popular Typograph theme and the new WordPress 2.8. Knowing that most Typograph users will update their WordPress installation in the coming days finding the reason for the conflict and a solution was a number one priority and I am happy to say I’ve already created a fix that solves the problem. A full upgrade of Typograph will be published later today but for current installations the fix consists of just replacing one file. Here are instructions:

Upgrade Typograph to work under WordPress 2.8

  1. Download and unzip the archive with the fixed functions.php file here.
  2. Access your Typograph theme directory in your hosted WordPress installation (should be under www.yoursitename.com/wp-content/themes/Typograph).
  3. Delete the old functions.php file under the Typograph theme directory.
  4. Upload the new functions.php file to the Typograph theme directory.

I have tested this critical fix and it works.

Categories
Tutorials Video Tutorials WordPress as CMS WordPress Themes

Using WordPress in Alternate Configurations – My WordCamp Whistler 09 Presentation


Finally, after a full week of catching up, here is the video tutorial version of my presentation at WordCamp Whistler 09 for those who were there and those who couldn’t come. The video is also available on WordPress.tv if you’d rather watch it there. I recorded the video over the weekend and it contains the entire presentation including all my fancy slides as well as the code examples and demos. The only thing you won’t see is me waving my hands around and messing up the code like I did at the actual event ;o)

Code Snippets

The last half of the presentation centers around creating Custom Page Templates and Custom Fields for layout purposes. To help you along in your own WordPress site development, here are those code snippets ready to be cut and pasted into your templates:

Custom Page Templates in 5 lines of code

This block of code is inserted at the very top of the Custom Page Template file. To get started, simply open the page.php file, save it under a different name, paste these 5 lines of code at the top of the document, save and upload to your server. To activate the new Custom Page Template just select it from the Template menu under Attributes in the Page Editor within WordPress.

 

Custom Fields in one line of code

This code can be used in any template file including but not limited to page.php, any Custom Page Templates, index.php, archives.php, single.php etc etc. The code returns a string of text that matches the text inserted in the custom field. Remember to replace $key with the actual name of the custom field. You can read more about Custom Fields and how to use them in the WordPress Codex.

 ID, '$key', true); ?> 

Custom Field that parses PHP code

This code is used to parse (interpret) PHP code inserted into custom fields. It is a bit wonky – for instance it terminates any other custom field code placed directly after it in a page – so use it with caution. Otherwise it works exactly as the code above.

 
ID, 'centerBox', true); ?> 
'.$boxContent); ?> 

Applications Used in the Presentation

After the presentation several people came up to me and asked what applications I used, so here is a short list:

BitNami WordPress Stack

The demo site I used in the presentation was actually installed and running locally within Windows 7. To achieve this I used an ingenious application named BitNami WordPress Stack. Once installed this application will run a fully functional version of WordPress with database entry, plug-ins, custom themes and everything else you want to throw at it right inside Windows (XP, Vista and Windows 7 supported) so you don’t have to keep uploading your files to a server or hassle through complicated XAMP installs to play around with WordPress while offline. You can even install several different WordPress and other open source CMS stacks on your computer simultaneously to further increase your productivity. I have no idea exactly how it works but BitNami works incredibly well. Just remember to set the IP address to “localhost” when you install it.
You can download the BitNami WordPress Stack here. For Mac users there is a similar application called MAMP but I know nothing about it.

Web Developer Add-On for FireFox

FireFox is my absolute favourite browser and I use it for browsing as well as in the design process. One of the main advantages of FireFox is the myriad of add-ons you can install that make web site development a lot easier. The one I use the most is the Web Developer Add-On. This small application within an application lets you see and mess with CSS, turn styles and JavaScript on and off and do tons of other stuff that makes it easier to dissect and troubleshoot buggy web pages. Combine it with the HTML Validator add-on and you have a true powerhouse in a small browser window.

Microsoft Expression Web 2

My web development platform of choice is Microsoft Expression Web 2. This new offering from Microsoft is what enables me to build custom WordPress themes and web sites like AnnyChih.com from scratch in less than 24 hours. There are many great things you can talk about with Expression Web 2 but for WordPress theme development the two main features is full PHP support, unrivaled CSS integration and Standards Based CSS generation right out of the box. If you want to know more about Expression Web 2 or want to learn how to use it you can read more on this blog or pick up a copy of my book Sams Teach Yourself Microsoft Expression Web 2 in 24 Hours. It’s a good read, I promise.