18 November 2013

Use Bootswatch themes with Museum Core to “skin” your site

Museum Core offers a lot of flexibility. With all the custom color and typography controls, there are a ton of options for you to customize the look of your site. However, sometimes the color wheels are just too overwhelming — coming up with good color combinations is hard, especially if you aren’t a designer.

Museum Core is built on Bootstrap 3. Among other things, this means it’s built to be mobile first with easy-to-use classes if you wanted to add some custom content or display things in a certain way. That means it’s great for child themes, especially if you’re already familiar with Bootstrap, and there’s lots of existing documentation for Bootstrap so you can get a head start. But what it also means is that Museum Core — and likely any Boostrap 3-based theme — can be extended by using Bootstrap themes. Bootswatch is a site that offers Bootstrap 3 theme stylesheets that you can add to your project (though there are others out there which can be found by a simple Google search for “bootstrap themes”). Here’s how you can use Bootswatch (or other Bootstrap 3 themes) with Museum Core. This tutorial is going to assume that you already have a copy of Museum Core. If not, download and install it from the WordPress.org repository.

Get the theme

The first step is to get the theme. There are marketplaces that sell Bootstrap themes, but for this example, we’re just going to get a free one off Bootswatch. To start, I’m going to pick one with a white background, but later we’ll look at how to use one with a colored background which will need a few extra adjustments to get it to work. Click on the dropdown under Download to get just the CSS file.

 

This is a standard CSS file that is set up to work with Bootstrap’s classes and styles. Next we’ll need a way to add that CSS to your site. Leave this open (no need to actually download it) and move on to the next step.

Get a plugin

Since Core 2.0, in-theme custom CSS has been discontinued. There are better ways of handling it outside the theme. Both Jetpack and My Custom CSS give you nice-looking CSS editors and, in the case of Jetpack, support multiple file revisions so you can go back to an earlier version. If you’re already using Jetpack because of its numerous other handy components (comments, sharing, forms, stats, tiled galleries, carousels, etc), the easiest thing is to use the built-in CSS editor. Otherwise, if you don’t already have Jetpack — and don’t have any use for any of Jetpack’s numerous features — a slimmer solution would be to use My Custom CSS. Either way, you’ll get a CSS editor into which you can copy and paste the CSS that you just got from Bootswatch. So all you need to do is go to the CSS editor you got with your plugin and paste the CSS in there after copying the code from Bootswatch (in Jetpack, the menu item will be under Appearance. In My Custom CSS you’ll have a new, top-level menu item).

Customize

At this point, you may be good to go. Certainly if you downloaded the Cosmo theme pictured above, you’ll end up with a nice-looking variation of the default style.

At this point, you might want to tweak the fonts or any of the other settings in the customize panel. However, if you selected a theme that has a colored or dark background, you might have ended up with something that looked like this:

 

If that’s the case, you may want to make a few more adjustments. First among them is changing the content background color. You’ll probably want to match this to the overall background color, so in the CSS file, do a search (CTRL/Command + F) for body, and look for the rule that includes a background-color. Select and copy the hex value for the background color.

 

Paste that into the Content Background Color box in the theme customizer.

 

From there you can make any other tweaks you feel necessary to get the site to look the way you want, but Content Background is the main one you need to worry about.

That’s it. Now you have as many theme styles for Museum Core as there are Bootstrap themes, and all you need to do is a little copy and paste, no design or coding experience required!

 

10 May 2012

Making theme options modular

Today I submitted version 1.1 of Museum Core to the WordPress theme repository for review. Originally this was going to just be a simple update with some bugfixes, but I had thought of a way to make it easier to build child themes that include some options settings from the parent theme (Museum Core) without having to include all of the options from the parent. It started out with this ticket I created on GitHub.

Now, the ticket evolved from that first sketch of an idea, and I ultimately abandoned the concept of using actions and remove_action to change what options get used. But the current approach is, I think, a pretty powerful way to approach theme options development so that things can be reused or abandoned in child themes and it isn’t something that I’ve seen other people doing. (To be fair, this is actually what’s described in the WordPress Codex, but I haven’t seen it in action on very many theme options pages, or any tutorials talking about how one would go about writing a theme options page, so I thought it was worth writing about.) And it reduces my entire theme options down to this code:

So let’s take a look at what we’re doing in ap_core_do_theme_options

First of all, I’ve pulled out all the code and put it into a new file called option-setup.php. This handles all the stuff that was previously where the _do_theme_options function is now but everything has been pretty drastically rewritten. First we have ap_core_do_theme_options which looks like this:

If you’ve tried or are currently using Museum Core, you’ll already know that the theme options page sports some tabs. So the first function we’re calling in _do_theme_options is the tab setup. This is a pretty straightforward function that just spits out the html needed to set up the tabs. The real meat is in the next three functions. We won’t look at every single function, we’ll just dig into the main highlights so you get an idea of what’s going on. Let’s peek at ap_core_general_settings which handles the, wait for it, general settings tab.

ap_core_general_settings looks an awful lot like ap_core_do_theme_options, with a bit of HTML thrown in to set up the table that’s going to hold the actual options. That uniformity is intentional, the idea is that you can swap functions in and out however you want. You can use your own modified version of ap_core_general_settings in your child theme, or you can do away with the tabs and just put all your options straight into ap_core_do_theme_options. Or you can mix and match options from the various settings tabs and create your own tabs, it’s up to you. Let’s take a look at what an individual option looks like now.

That’s got a bit more heft to it. But it’s still pretty basic. All I did here is pull the table row from the original theme-options.php and added it to this function. I’m using output buffering to store all the php/html as a variable and echoing the variable at the end which is what gets sent to the function calling this function (in this case ap_core_sidebar_option). I’m also calling the defaults and options from the database so our values are loaded and stored. This is done ad nauseum for each setting, so each setting gets called separately and can be isolated, grouped, cut out, whatever as needed by a child theme.

So what happens when I want to build a child theme and use some of these options? Here’s an example:

First what I’m going to do is start with a new theme options function. I’m keeping the 3 tabs from Core, but I’m adding a 4th tab. Since Core only supports 3 tabs, and I’ll need to set up the title for the fourth tab, I’m doing my own tabs. We’ll start by setting up the tabs. Remember, you don’t have to use the tabs at all; if you just want all of your options on the Theme Options page, you can just cut out the tabs function and then they’ll display normally, one on top of the other.

The two things that are changed are highlighted by the fact that the textdomain (‘museum-core’, ‘my-theme’) has changed. We don’t need to change the textdomain of the other tabs, because, assuming the text was translated in a language file, those would already be covered by the existing translation in Core — only the new translation strings need to be added (of course, none of this is necessary, really, if you don’t care about localization of your child theme). We changed “Typography & Fonts” to “Font Stuff” and added the fourth tab, “Custom Tab”. So far, so good. This is what it looks like:

Theme Options 2039 Localhost Test site 2014 WordPress


Now that we’ve got the tabs, and we’ve added the options pages that we’re pulling from Core, it’s time to create our new settings page. We’ll do this really minimally and just add one option. We won’t add a bunch of function calls (although we could), we’ll just put our option straight into the new my_custom_theme_settings function. It looks something like this:

Now, in order for this to be actually functional, we’d need to define some new options for our theme so we could store them in the database, this is just meant to be an example and illustrate how we’re able to still pull functions from the parent theme and mix them into our custom theme functions. Here’s what that new tab looks like:

custom tab

To summarize, what I’ve got is a modular way of calling individual settings that can be swapped in and out at will and replaced with custom settings (or not) however you want. If you have any thoughts or questions, feel free to post in the comments. If you’d like to dig into the source files, you can grab the latest version of Museum Core from GitHub. You can also take a look at the complete code from this tutorial on GitHub. And if you want to take a look at the files on your computer and hack them up, you can download the source files used to create the child theme in the screenshots here.

3 May 2012

One theme to rule them all

If you follow us on Twitter or Facebook, you may already know that we recently released our first theme to the official WordPress repository.  It’s called Museum Core.

Museum Core is the product of over a year of development.  A solid foundation built on responsive design, HTML5 and CSS3, with a theme options page that is secure and flexible.  It also supports localization into any language you want.  In less than a month, it’s already been downloaded more than 3,000 times.

Core marks the beginning of our shift in scope for Museum Themes.  Rather than maintaining dozens of different themes independently, all themes, past and future, will become child themes of Core.  Additionally, we’ll be using Core to build WordPress versions of our most popular and favorite Blogger templates — we’ve already released WordPress versions of Grandma’s Hat Box and dear Audrey, and more are on the way.  Soon all our themes will be driven by the powerful Core framework, while maintaining the same level of customization options they currently offer.

Exciting things are coming in the next few months for Museum Themes.  For now, here’s our promo video for Core and some more information about what it supports.

Here’s a list of some of the features in Museum Core:

  • customizable sidebar (left or right)
  • full posts or excerpts on main blog page and archive pages (excerpts support post thumbnails)
  • customizable footer text (no hard-coded author credit)
  • five typeface options for 3 different locations (headings, body and alternate) with an eye for international language support
  • customizable link colors via an easy-to-use color-picker
  • custom favicon
  • optional support for Twitter hovercards
  • responsive design that supports smaller screens and mobile
  • supports all WordPress post formats with different layouts optimized for each
  • internationalization support.  Complete Polish translation in 1.0.9 courtesy of anemoone.

 

3 May 2012

Polkadot Prince

Polkadot Prince uses real textures and photos scrapped together to create a handsome backdrop for your sweet little man. You’ll treasure showing off your little guy’s greatest moments with this theme and he’ll adore the robot, paper airplanes and toy cars decorating his space. We know, because our little guy checked it over for quality assurance!  Polkadot Prince uses Cufón in the Blogger variation, and embedded webfonts from Google for the WordPress theme (shown above) for cross-browser compatible custom font in your site title (and post titles for WordPress).

If you like this and have a little girl who needs her blog dressed up, look for our Polkadot Princess template.

$25 | View Demo

Changelog
Polkadot Prince for WordPress is a Child Theme of Museum Core. To use Polkadot Prince, you must first install Museum Core. Download Museum Core free from the WordPress.org themes repository.


$5 | Blogger Template

$8 | Get Polkadot Prince with Polkadot Princess

Learn how to install Museum Themes’ Blogger templates.

3 May 2012

Polkadot Princess

Polkadot Princess uses real textures and photos scrapped together to create a sweet and fun look for your little princess’ blog or digital album. Not only will you love looking at pictures of her on this pretty theme, but she will love looking at the butterfly, polkadots, and flowers decorating her space. And, if you love purple, this is full of beautiful purple patterns! Polkadot Princess uses Cufón in the Blogger variation, and embedded webfonts from Google for the WordPress theme (shown above) for cross-browser compatible custom font in your site title (and post titles for WordPress).

If you like this and have a little guy who needs his blog dressed up, check out our Polkadot Prince template.

$25 | View Demo

Changelog
Polkadot Princess for WordPress is a Child Theme of Museum Core. To use Polkadot Princess, you must first install Museum Core. Download Museum Core free from the WordPress.org themes repository.


$5 | Blogger Template

$8 | Get Polkadot Prince with Polkadot Princess

Learn how to install Museum Themes’ Blogger templates.

19 April 2012

dear Audrey

This charming Blogger template and WordPress theme is a little bit vintage, a little bit writer and a whole lot of personality! It uses neutral colors and inviting paper textures with an added vintage style ornament as accents to create a warm and sophisticated setting for your words of wisdom, adorable pictures or online diary.  Dear Audrey uses embedded webfonts for cross-browser compatible custom header for your site.

$25 | View Demo

Changelog
dear Audrey for WordPress is a Child Theme of Museum Core. To use dear Audrey, you must first install Museum Core. Download Museum Core free from the WordPress.org themes repository.


$5 | Blogger Template

Learn how to install Museum Themes’ Blogger templates.

22 March 2012

Grandma’s Hat Box

Grandma’s Hat Box Blogger is inspired by vintage sewing and scrapbooking. It will give your website a unique, lovely look and remind you of cherished moments and treasured memories. Great for a photo blog about your little one’s cutest doings or an elegant journal filled with your own reflections.

The WordPress version supports custom headers, a Theme Options panel, 3 custom menus, widgetized sidebar and footer, sidebar options, a customizable footer, post formats and more!

$25 | View Demo

Changelog
Grandma’s Hat Box for WordPress is a Child Theme of Museum Core. To use Grandma’s Hat Box, you must first install Museum Core. Download Museum Core free from the WordPress.org themes repository.


$5 | Blogger Template

Learn how to install Museum Themes’ Blogger templates.


18 March 2012

Museum Core is coming

Over 2 years of thought, research and development has gone into our new theme framework (and free WordPress theme) Museum Core. It’s currently available on GitHub and will be available to download, for free, in the WordPress.org repository soon. Core supports post formats, custom backgrounds and header images, custom menus, has an all new theme options panel with customizable font options and link colors. There are a lot more features under the hood and this will soon be the framework for all of our themes. It will also mark the beginning of a new model for selling themes and support. Core will always be free, all our existing and future themes will be child themes of Core, and we will put an immediate priority on porting our existing Blogger templates to be WordPress child themes of Core. Once that’s done, we will introduce a new membership model in which you pay a monthly membership fee and have access to all our themes. That will be over 25 themes with more to come for one monthly subscription. We’ll have more information as we get closer to the change. We’ll still continue to support and sell themes individually but the membership will be a much better deal.

28 November 2011

Cyber Monday Sale!!

We’ve got two Cyber Monday specials for you today.  Hurry and take advantage of them now, both of these expire at midnight (MST) tonight.

$10 any Museum Theme

All our premium WordPress themes are $10 off. You should see the coupon “Cyber Monday Sale” appear in your cart when you check out. This applies to all theme purchases. So if you buy two themes, you get $20 off, 3 themes = $30 off.

Buy 3 Blogger templates for the price of 1

Add any 3 premium Blogger templates to your cart and you’ll see the “Cyber Monday Blogger Special” coupon appear, cancelling out the cost of 2 Blogger templates ($10).

The two discounts cannot be applied on the same order, so if you want to take advantage of both, you’ll need to make a separate purchase.  Hurry and grab these now before the special ends!

25 November 2011

Create a site down notifier using iftt, Yahoo Pipes and ismyblogworking.com

This is a bit off the usual WordPress topic, but I discovered a handy tool to get automatic notifications sent to your email (or IM, or Twitter or whatever you want) if your site is down or broken.  This can be particularly helpful if you are a designer or webmaster or if you just maintain a bunch of different websites and don’t check each one everyday.  We’ll be leveraging several different sites/technologies, so I’ll go step by step.

ismyblogworking.com

The first tool we’ll be using is ismyblogworking.com.  This is a fantastic resource particularly for WordPress users as it will give you some valuable insight into how your site is working and if there is anything that needs your attention.  Types of things it can check on a WordPress site are things like what version of WordPress you’re running and if your RSS feeds are validating.  ismyblogworking.com will also give you a message if it thinks your site is loading slowly.  This is the crux of this tool since I just discovered that ismyblogworking.com can create an RSS feed for your status.

The RSS feed URL it generates looks like this:

http://ismyblogworking.com/YOURDOMAIN.com?feed=1

This is fairly easy to remember and if you have multiple sites, you can just copy and paste the URL and change the domain inside the URL, which is exactly what we’ll be doing.

Yahoo Pipes

If you’ve never used Yahoo Pipes before, it’s a fantastic tool that allows you to create complex operations or alerts based on different types of inputs.  I won’t go into all the potential uses here, but basically it allows non-programmers to do things that pretty much would only be possible otherwise with some complex scripting or programming knowledge.  What we’ll be doing today is joining a bunch of different RSS feeds, sorting them by date, and then filtering out updates that are just telling us that our blog is working.

Step 1 — Get your ismyblogworking.com RSS URL

First, from the Sources menu in Yahoo Pipes, select Fetch Feed and click the + to add it to the Pipe.  You can add up to 10 RSS URLs, so if you need more, you’ll need to create a new Fetch Feed module and join them together with a Union module (more on that later).

Step 2 — Add a sort module

We’ll want to sort them in descending order, so the most recent updates are at the top.  To do this, we’ll need to add a Sort module.  These are located in the Operators section.  To connect the two modules, simply click and drag from the circle at the bottom of your Fetch Feed source module and connect it to the top (input) of the Sort module.  You’ll see a friendly-looking “pipe” appear to connect the two.  Once they’re connected, you’ll get a number of different items to sort by.  You want to select the item.pubDate to sort by date, and then select Descending to put the newest first.

Step 3 — (Union and) Filter

I’ll be using a Union to combine a bunch of different feeds.  You may not need to, so you can skip this.  Unions are in the Operators menu as well and they’re pretty simple; they just provide a bunch of different connectors for sources and a single output connector.  I will join all my source feeds with a Union module and send that to a Filter module.

Filter is in the Operators menu as well (right above Sort).  Our filter is going to be on the item.title.  We want to Block all all items that are “Your blog is working.”  It’s important to have the period if you are going to use this filter, otherwise it won’t be an exact match.  The reason why we’re doing an exact match is that you may get a result like this “Your blog is working (but needs attention)!”  We don’t want to filter those out because if our blog needs attention, we probably should be aware of that as well, so we’re only going to filter out the “everything is A-OK” results.

This is what my Pipe looks like when I’m done:

If you click on the Pipe Output, you can see an example of the results.  You can do this on any module to debug specific parts of the pipe.

Step 4 — Create an RSS feed

Now we’ll want to create an RSS feed that we can send to iftt to create the alert.  You could use something other than iftt (like create a FeedBurner feed and then activate the subscribe by email feature, or create a Google or Yahoo Alert) but iftt provides the most options in terms of how you want to deliver the notifications.

First, save your Pipe.  Give it a name like “ismyblogworking.com site notifier” or something that you’ll recognize later.  When it’s saved, click Run Pipe.  After it does the initial run, you will have an option to get an RSS feed.  I’m not too worried right now about errors fetching the RSS feed.  All we’re getting at this point is just historical data and we can look at the actual pipe to find sites that might actually be having issues.

Step 5 — Create an iftt trigger

iftt stands for if this then that, and it is a system that allows you to take some trigger (an instant message, email, RSS update, weather, time, and a whole bunch of other things) and turn it into something else (a Tweet, an instant message, a post to your Facebook wall, an email, etc).  So we’ll be doing something pretty tame as far as iftt goes: taking an RSS feed and turning it into an email, but you could potentially use this to feed a Twitter account that posts status updates on all the sites you maintain or something like that.

The first step is to select the trigger “channel”.  In our case, it’s RSS.

We’re going to select “New feed item” but we could have done our filtering here if we wanted to.

Paste your RSS feed URL into the box and click the “Create Trigger” button.

Once it’s done, you should have something that looks like this:

Step 6 — Create the email alert (or whatever)

Click on the that link to create an “action channel” (the part of the if this then that that does the thing you want it to do).  I’m going to select Email to get an email alert.  If you want, you can customize what gets sent in the email.  I’m just going to leave everything at the default.

Click “Create Action,” give it a name, then click “Create task.”

The brilliant thing about this is that there are services that you pay a fee for that give you the same information you can get from this for free.  This may not be a perfect solution (basically limited by Yahoo Pipes’ ability to fetch the feed from ismyblogworking.com) but it couldn’t hurt, it’s free, and it’s much easier than checking 20 – 40 (or more) different websites every day.