Categories
Lynda.com WordPress Themes

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

Responsive WordPress theme Anaximander from WordPress: Building Responsive Themes from mor10 and 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.

By Morten Rand-Hendriksen

Morten Rand-Hendriksen is a staff author at LinkedIn Learning and lynda.com specializing in WordPress and web design and development and an instructor at Emily Carr University of Art and Design. He is a popular speaker and educator on all things design, web standards and open source. As the owner and Web Head at Pink & Yellow Media, a boutique style digital media company in Burnaby, BC, Canada, he has created WordPress-based web solutions for multi-national companies, political parties, banks, and small businesses and bloggers alike. He also contributes to the local WordPress community by organizing Meetups and WordCamps.

138 replies on “Free Responsive WordPress theme Anaximander – now available through lynda.com”

Morten, I am still loving (and tweaking) Anaximander, but I haven’t yet deployed it. I have figured out that I would like to apply the Masonry behavior to certain categories and shop pages, rather than the home page.

I have a general idea of how to do this, but could use a nudge. If you were doing this, how would you start?

TIA

@Lisa: Start by looking at the front page index loop. You’ll see there how the Masonry elements are instigated. If you want them to kick in for certain category pages, create new template files called category-categoryname.php and place the index code with the Masonry elements in those files.

By Post Author

The static version of Anaximander is available to all people with access to the course. You build out the theme to the fully responsive version by following the course and by the end you have a theme you can not only use but also understand.

By Post Author

hello morten,
i have an overlapping bug with the facebook widget (sfp – like box) when working with masonry.
masonry reloads and the bricks are arranged before the like box reloads. I saw you have solved the problem.
i would appreciate your help.
thanks in advance.

I love the theme and whole design concept. However I notice that content templates are not supported in the anaximander but i need to have different templates for different page types. What is the best way to go about adding page templates to anaximander?

Many thanks

Ciaran

Hi Morten, thanks for the great course on responsive WP theme design, really taught me a lot and I am considering this theme for my blog, as it looks awesome. Thanks again, Bob

I finished the course!! Thanks so much. You are a wonderful teacher. I did have two issues that, after scrolling thru all the comments here, I saw there were a few others with the same problem.
1) when making the menu responsive and having it drop out of the blue header, my menu never actually dropped below the blue header. I continued to have 20px bottom margin no matter what. and
2) the white background for the responsive menu did not extend the full width of the screen.

I did eventually get it to look right (float left instead of none and added “width: 110%” but I have absolutely NO idea if that will eventually cause me problems. And I wonder why it didn’t work for me and a few of the others.

At any rate, thanks so much for your clear instruction. I just love your accent too! So fun to listen to. I find myself imitating you around the house. how weird is that? 🙂

I have installed WordPress on our Godaddy site and thanks to your excellent WordPress Essential Training on Lynda, I was able to set up an “under construction” front page with a second contact page. I am now going through your Building Responsive Themes course. My question is: can I load the Anaximander theme to WordPress on Godaddy from the exercise files on Lynda? I do not see Anaximander when I do a theme search through WordPress.

Hi there!

I’ve been a subscriber to Lynda.com for 5 years. I love it.
I cannot find out how to get this theme. I am watching your videos for featuring this theme. Do I have to wait to the end of all the videos to find out how to get it? I am confused.
: )

Thanks for your help!

The base theme is available in the exercise files for the course. You build it out and make it into the finalized version as you work your way through the course and by the end you have a theme much like the one powering this site.

By Post Author

Hey Morten, I’m currently following the Lynda video now and loving it! I was wondering how you go about tweaking the super header for the theme… I was looking to put a LinkedIn icon up there. Thanks!

Hello! I was just wondering if there was a way to add more icons into the pre header? I’d specifically like to add a linkedin and perhaps google+. Thanks for your time.

I downloaded the Anaximander theme and took most of your lynda.com course. One of the listed Anaximander features is “featured images.” I assume this feature works the same way as the featured image in the twentyeleven theme — allowing you to display a different header image on each page. However when I try to define featured images in Anaximander, I still get the default header image on every page. Do I need to enable some other setting to activate the featured image in Anaximander?
TY

I downloaded the Anaximander theme and took most of your Lynda.com course. One of the listed Anaximander features is “featured images.” I assume this feature works the same way as the featured image in the twentyeleven theme — allowing you to display a different header image on each page. However when I try to define featured images in Anaximander, I still get the default header image on every page. Do I need to enable some other setting to activate the featured image in Anaximander? TY

@Chuck: The featured image function works differently than in Twenty Ten and Twenty Eleven. The featured image appears in the index pages and also appears at the top of each post if you select the Image post format. If you don’t use the Image post format, the featured image only appears on the index pages but not on the single pages and posts.

By Post Author

Hi mor10, I’ve taken many of your courses on linda.com and am now beginning your class on Building Responsive Themes. I have a need for using the Woo Theme Flexslider on a Twenty Twelve child theme. I’ve tried to use your instructions from the course and apply it in the child theme to no avail. Can you point me in the right direction?

Hi,
I’m a fan of lynda.com and I’ve been following many of your tutorials, thanks they are fantastic! But recently I’ve had come up against a recurring problem with Anaximander theme. The index page that displays the post does not show the image thumnails. Also in the customise area it does not have a header image either. This has made it impossible to get the wootheme flexisider to work either. Now I know this has worked in the past but there appears to be a bug. Please Please could you help, I’ve spent hours trying to figure this out.
Many Thanks

Hi Morton,

You have done a wonderful thing with the Building Responsive Themes and supplying such a great theme to start with! I am going through the course now and you’ve done a fantastic job. I do have one question that I cannot solve: How does a person disconnect the Header and Link background colours from the theme_colour?

Thanks Again,
Don

Disregard my last post. For whatever reason the child theme would not kick in. When I restarted everything is working as expected. : )

Don

I have not had both Firefox and Safari not reload a stylesheet on refresh before. I’m working in a local environment which may have something to do with it?

Hi Again Morton,

Apologies for bothering you with this again. The child theme overrides are back to not working for the theme colours. This time I cannot make it go away. I’m not sure what is keeping that from working, but my guess is that it is in the functions.php. It seems to be highly preferred in the theme, which I would normally agree with. It’s a beautiful design touch and works very nicely. However, the site I am working on is for a print artist and the site is showcasing his work. The header is a very strong element and competes with the artwork when in color. With the header set to white it works very well but the hover for links also turns white and they disappear, which is not a good option either. Any ideas?

The footer is also not responding to changes. You have supplied us with wonderful instruction and a fantastic theme. Keeping your credits in the footer is the right thing to do, but I would like to remove the WordPress info and replace it with copyright info for the artist. Any ideas on this?

Thanks again for all you do,
Don

Let’s see… The theme colours can be overridden in the Theme Customizer. There shouldn’t be a need to do anything else. The hover links in the header are controlled by the #access a classes. You’d have to make special classes for the white contingency. Look at how that is done for the up states and you should be able to figure it out.

You can keep or remove the WordPress credits, it’s completely up to you.

By Post Author

It’s not the header links, it’s the links that have their background colour controlled by the “Header and Link Colour” option in the theme customizer.

To accomplish what I am trying to do the control of the background colour for the “Header and Link” need to be disconnected from each other. It’s very strange as they would not change with the child theme overrides yesterday until the entire computer had been restarted. Then this morning they were not responding to the child theme again and nothing seems to be resolving that.

That’s alright Morton… I’ll get figured out. This has taken enough of your time. Thank you!

Have a great day,
Don

I was working through your responsive wordpress tutorial on lynda.com and installed the anaximander theme but it is missing the option in the customize section for header image. I’ve downloaded it twice to no avail.

Thanks

Just completed the course on making the static theme responsive, looking to deploy it for an education website… Learnt so much.
Interested to read “I’m working on an update to the theme with new features. Stay tuned for more release info.”
Look forward to hearing what the new features will be.

Hi and thanks for this theme. I’ve been taking a number of your courses on lynda.com. However, I’m still learning. I’m trying to move the 3 widget areas to my static home page, but they don’t appear. I’ve tried making a new template and adding code there, but it is not taking. Any advice?
TIA

Hi Morten,

Thanks for a great Theme and Tutorial!

I am working on a modified version of the theme (anaximander is a great start), and having problems with the Masonry. The images are overlapping each other, and found out there is a solution to add a plug-in called imagesLoader (http://masonry.desandro.com/appendix.html) into the theme.

I just haven’t got that to work. What and where should this be placed in ‘functions.php’ in the theme for work?

/Steffot

img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
.attachment img,
#sidebar img,
.wp-caption {
max-width: 100% !important; /* When images are too wide for containing element, force them to fit. */
height: auto !important; /* Override height to match resized width for correct aspect ratio. */
}

img.aligncenter,
.wp-caption.aligncenter {
margin: 0 auto 1.5em auto;
max-width: 100%;
height: auto;
}

Please would you like to check this code.
Responsive Image not working with this code Wp 4 version.
What will be solution for this ?

Getting Infinite Scroll to work with the Masonry Index, got it working after hours of trying. Guess there is mutple better ways of get it working, but here you find my solution.

Do the following steps.

Open functions.php, in the pagination part, uncomment following line:

if ($paged < $pages && $showitems < $pages) echo 'Next ›';

you also want to ad a class to this button (e.g. next). I added the class into the li, but would also work on the a. add ’class=”next”’ like:

if ($paged < $pages && $showitems < $pages) echo 'Next ›';

then you need to enqueue the js for infinite scroll, download here: (https://github.com/paulirish/infinite-scroll/blob/master/jquery.infinitescroll.min.js) and place in your js folder.

enqueue infinite scroll script in functions.php like this:

// INFINITE SCROLL
function anaximander_infinitescroll() {
if (!is_admin()) {
wp_register_script('infinitescroll', get_template_directory_uri(). '/js/infinitescroll.min.js', array('jquery') );
wp_enqueue_script('infinitescroll');
add_action('wp_footer', 'anaximander_add_infinitescroll');
function anaximander_add_infinitescroll() { ?>
<?php
}
}
}
add_action('init', 'anaximander_infinitescroll');

And change the masonry script in functions to the following:

/*/
jQuery(document).ready(function($){
$('#masonry-index').masonry({
itemSelector: '.index-post-container',
});
});
/*/
jQuery(document).ready(function($){
var $container = $('#masonry-index');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.index-post-container',
//columnWidth: 100
});
});
$container.infinitescroll({
navSelector : '.paginationBox', // selector for the paged navigation
nextSelector : '.pagination li.next a', // selector for the NEXT link (to page 2)
itemSelector : '.index-post-container', // selector for all items you'll retrieve
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/6RMhx.gif'
}
},
// trigger Masonry as a callback
function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
});

Cheers

Hi Morden.
I am new to Web development and have been watching your tutorials on lynda.Com with huge interest. I’m practicing on your anaximander theme and encountered a problem with video posts. Whenever I embed a video from youtube and set the post type to video, insread of having video thumbnails I get random numbers. This is after I have done all the steps from the tutorial, fitvids is set up as well. I could not find a solution on forums. Hope you will be able to help. Cheers

Hi, I have the same problem, and I can figure out what happened, one moment was fine and next the videos are not longer displaying. I would appreciate any suggestion.

Thank you very much

I’d like to chime in to say ‘thank you’ for providing this course along with the theme to take home. I greatly appreciate it and am now tweaking it to fit my own needs but have run into this same problem as mentioned above. Videos work splendidly on the single post pages but on the index page, I get only what appears to be random numbers instead of the video. Of course, as I’ve watched the videos over several times, I’ve come to realize that you never showed a working video on the index page.

If it is supposed to work, I’d really love to find out what I’ve done wrong. (I also realize this thread is several years old now but I can hope for a response 🙂

Thank you!

I use Allavsoft to download Lynda video courses .

It can directly download Lynda courses to MP4, AVI, WMV, 3GP, MOV, MKV, MP3, WAV etc.

Hi, Morten: I hope you are still reading these comments. Last week, I (belatedly) took your “Building Responsive Themes” course. Great class, by the way. I typed (and cut and pasted snippets) and everything worked perfectly until the end section “Exploring Hidden Features.” I have been unable to get the video format to appear on the front page. I use the oembed technique exactly for the one you used. https://vimeo.com/39211033. It shows on the post. I also tried a YouTube video without success. Instead I get {{unknown}} where the video is supposed to be. Any suggestions? I could really make use of this video player on a front page. Can you point me in the right direction. I have taken many of your Lynda classes and have enjoyed them all.

Resolved it. Perhaps I’m the last person on earth to know this, but apparently now (end of June 2015) there are two keys from Vimeo and YouTube that begin with ‘oemb’ . The second key is called ‘oembed_time’ and that is the one that ends up in the $embedhtml variable unless you filter it out.

Hi James, I have been looking for a solution to this problem for a while, but really I do not understand what do I have to change or add.

I would appreciate some help.

Thank you

Javier

Comments are closed.