All posts by Zeaks

Use Genericons with Twenty Twelve Theme

Tutorials, ,

Twenty Thirteen and my Twenty Plus Pro theme use a font pack called Genericons, which is an efficient way to display icons on your site without increasing load times. They also allow for quick and simple styling without the use of an image editing program, which is great for me because I’m terrible at using them.

Here’s how you can use Genericons in Twenty Twelve theme to add small icons to your meta information “Posted by, Posted on, Posted in” etc etc.

Twenty Twelve does not use classes around each of these items, so we’ll have to add them ourselves which isn’t hard to do. Twenty Twelve allows us to use the same function in our child theme as it uses in its own functions, so we can just copy and edit it.

Genericons Twenty Twelve WordPress - zeaks.org

Keep in mind, when I refer to Genericons as fonts, it’s because they are fonts that are made to look like icons.

Add Meta info Function

Start off by using a child theme, once you have that, download or open a copy of functions.php from Twenty Twelve theme and open it.

Around line 362 you should see a line that reads like this

That’s the beginning of the function we need to copy to our Child Theme. Copy right down to line 398. The entire code should look like this.

Paste that into your child theme, you can remove the commented areas if you like. Now that we have this in the child theme, it will use it instead of Twenty Twelves.

Take a look at the second last section of this code where it says “// Translators: 1 is category, 2 is tag, 3 is the date and 4 is the author’s name.” the bit under it has 3 sections, one for tag pages, one for category pages and the last is for everything else. We need to add classes within this so we can style it and add our icons.

Add Classes to Meta Info

Our classes will be simple to read

Replace this block of code

With this

You’ll noticed I used span tags instead of div tags, for anyone who doesn’t know this already, span displays content inline and div displays them as block. We need them to display as inline, so we’re using span class.

Anyways, we have our classes added to the meta function so you can save and close functions.php.

Adding Genericons

Next thing to do is to download and add the Genericons to our theme. Visit Genericons and grab yourself a free copy of them, then extract them. Open the folder, you should see a folder inside called “font” rename it to “fonts” (I’m picky with my folder names) Upload the fonts folder to your child theme.

Now you should open style.css of your child theme and add this to it.

This tells the theme where the fonts are.

Next we’re going to style all of the fonts at once, so using our classes I mentioned before add this to your stylesheet.

Noticed I also added a comment-link class so we could include an icon to that as well. We’re also using the :before pseudo class which tells the icon to display before the element instad of on or after it. You can read more about pseudo classes here www.w3schools.com

You can do a lot with Genericons, if you want the fonts larger, or you want to change the color, treat them just as you would any other font. Use color: red; if you want them to be red. Feel free to experiment with them, this CSS will add a regular sized dark icon. You can also open the example.html file in the Genericon package you downloaded to get a list of all the icons available, in case you want to use them for other areas.

This last bit of CSS will add the icon to each class

Save and close style.css and refresh your site and check out your new icons! Remember you can go back and edit the meta info we added to functions.php if you want to change the text after each icon, or even remove it.

Let me know how your icons turned out by leaving a comment!

Embed Moot Forums into Twenty Twelve Theme

Tutorials, ,

I recently discovered a new type of forum software called Moot. It’s different from most forum scripts, it’s a system similar to Disqus or LiveFyre comment system. It’s still in beta and lacks a few upcoming features, but fully functional and seems to work really well.

It’s features consist of image posting, watched topics, email notifications, Facebook sign on, syntax highlighting, post reporting, Akismet spam control, create new forums, completely mobile ready, real-time post preview, instant updates (no need to refresh), SEO features for redirecting to your embedded site, and can even be used as a commenting system. A forum import system is also planned.

Moot Forums WordPress - Zeaks.org

Moot is meant to be embedded into your site, it uses an external style sheet which can be overridden with your own, so you do have a fair amount of control when it comes to the look such as colors and fonts.

Anyways, heres how to embed Moot into Twenty Twelve theme by creating a page template.

Start off by creating a new file, and name it moot.php and open it. We’ll be creating a page template, so at the top of your new file add this.

This gives the page template a name and calls the header into the it. We’ll also be adding an area above the forum that we can include post content in case you want to add a welcome message or information on forum rules.

To do this we will borrow some code from content.php. Add this below what you have in moot.php

Next, head over to Moot.it and get yourself a forum. It’s free and only takes a minute. Once you have your new forum, click the “embed this” link and copy the contents of the pop-up window onto a text file.

Open moot.php and under what we already have, add this.

The first line ensures Moot renders for media devices, the second link loads the latest rendering engine for IE. The last line calls the moot stylesheet which is hosted by a CDN.

Next a bit of style is needed for this template and moot allows us to add it right in the page. This will give you a basic style matching Twenty Twelve, you can add more to it later.
Add this to your moot.php.

Moot requires the jQuery 1.7 or higher, it also needs the moot application and your forum called into the template. Add this to your template next, be sure to change the forum URL to your own, otherwise you’ll show my forum on your site.

Finally we can close our dives and call the footer into the template and we’re done. Add this to the end of your file.

Save and close moot.php. Head to your admin section, create a new page, call it whatever you like, and on the right column select the Moot Forum page template and publish it. You can type information into the post editor if you want to display it above your forum.

You should check out the Moot Docs https://moot.it/docs/ for more information on embedding your forum. There’s optional Beta JavaScript and CSS you can try out if which usually contain new features.

Let me know how your forum turned out by leaving a comment!

Website Updates and Twenty Thirteen Theme

General, ,

If you’re a regular visitor you might of noticed the new theme and new forums along with a few other changes. The main reason for all of these changes is because of an issue I had with the database. I managed to restore most of it, but never got the forums working properly and all I could retrieve were the few sticky posts.

So since I was already working on it, I figured I might as well clean everything up and slap a new theme on the site as well. I’m using a Twenty Thirteen child theme by Otto with a few modifications.

The forums are now using Moot Forums. It’s a new (in beta) hosted forum software, I’ve been testing it for about a week now and I really like it. Usually I wouldn’t go with a hosted forum, but at least i won’t have to worry about loosing posts because of database issues, at least by me.

I decided to go back to using the old forums (xenforo) instead, I have never had a problem with them in over two years, I only switched to bbPress for the user integration, and there are still hundreds of useful posts on them.
Moot is a great forum software,I suggest you give it some consideration if you’re looking for a new, easy to use forum for your site.

For anyone wondering how to get a Moot forum of their own head over to Moot.it and sign up, it’s free and I’ll be posting a tutorial on how to integrate Moot forums into Twenty Twelve and Twenty Thirteen theme in the next few days.

I’ve also removed a few pointless plugins and widgets, added a new cache plugin to speed the site up.

If you notice any issues, please let me know.

Twenty Plus 1.3 – Update

Theme Updates, ,

Here’s the new Twenty Plus Pro 1.3 Twenty Twelve child theme Update. I’ve added several requested features and bug fixes to this version. It will be the last feature version for this theme, any future versions will contain bug fixes. Sorry for the long wait, I wanted to make sure I stomped out all (I hope) of the bugs and included everything I had planned.

Please read before updating!

As this is technically a child theme, please remember that if you update your theme any modifications you’ve made to template files or style.css will be overwritten.

If you have not backed these changes up or made note of what you’ve changed they will be lost! If you’ve added custom CSS to the custom CSS area in theme options, it will be saved while you upgrade. (widgets, menus, header images should also remain)

How to Update

My preferred method to update this theme is to download a backup of the theme folder using FTP or file manager, then set Twenty Twelve as your current theme, delete Twenty Plus Pro and upload the new zip file and activate.

Alternate method is to use FTP, download a backup of your current theme, then upload the new theme overwriting the files.

After the updated theme has been activated, visit Appearance > Theme Options and click the “Save” button at the bottom, this will input any new settings into the database in the off chance it doesn’t do it automatically.

More documentation on the new Twenty Plus Guides subforums.

If you require assistance updating your site, feel free to contact me using the contact form at the top.

Users that have already purchased Twenty plus Pro can simply use the same download link they were given when they purchased their theme.
You can purchase Twenty Plus Pro for only $10, your purchase includes support, installation if needed and any future updates.

Thank you Harry, Bernlo, Sanko and Malkie for your suggestions and input.

New Features

  • Font Previews!
  • Meta Icons are back, this time using Genericons
  • Meta Icons or Default text option
  • Meta Icon color picker, make your icons any color you want!
  • Now uses Iris Color Picker instead of Farbtastic
  • Select your own excerpt length for blog posts
  • Option to disable Google Fonts sitewide
  • Open to turn off top menu
  • Select from large or small featured image for excerpts
  • Show or hide featured image on single posts option
  • Slider images now link to the posts instead of just the excerpt title
  • Slider excerpts are bigger and set to default length as requested

Meta Icons Genericons

Color Pickers

Bug Fixes

  • Footer widgets now properly align when stacking more than one widget in a widget area
  • Javascript conflicts should be resolved with My Calendar and other plugins
  • Image captions should no longer show in excerpts when an image is at the top of a post
  • Wp-Update script removed, auto updates are not a good thing for child themes
  • Fixed issue with default link and icon colors not changing on new color scheme selection
  • Added icon color to theme customizer
  • Resolved Debug messages

Changelog Notes

  • Changed license to GPL as forced to by WordPress. (For some reason the license of the this theme directly effects getting a free GPL theme reviewed at WordPress.org)
  • Updated depreciated code borrowed from Twenty Eleven that is apparently only allowed to be depreciated in their themes
  • Updated documentation via sub forum, will continue to update as needed
  • Version number changed to 1.3 to avoid confusion with 1.1 which was supposed to be 1.2

Other Notes

I know some users will love the new icons, and some will hate them. The reason I picked Genericons is simple. They are lightweight, they are fonts not images, so they can be styled (drop shadows colors etc), and they have a neutral look to them. I try to pick colors and features that I think will appeal to the majority of users.

If you don’t care for them, you can always add your own.

I was planning to add two new layouts with 300px wide sidebars but changed my mind. The options panel is becoming a bit overwhelming so I’ve written a quick “how to” on the forums for anyone wanting to increase their sidebar width to 300px.

NomNom Update 2.0.3 and 1.7.3

Theme Updates,

Here’s a small update to NomNom Twenty Eleven child theme for both free and premium versions. The only fix was the menu thickness. Something was changed in the last update to Twenty Eleven that moved the default menu slightly which caused an issue with Nomnom.

Here’s some tips on updating for those who have done modifications to the templates in their theme.
If you just want to upload the modified file, open the zip, and upload includes/color_options_css.php and upload it to your site overwriting the current file.

If you want to edit the file yourself (it’s very easy) open includes/color_options_css.php scroll to the very bottom and change #access { margin-top: 0px;} to #access { margin-top: 8px; } save and close.

For anyone else, just delete your old theme and upload the new one, your settings and anything in the custom CSS area will remain intacted.

This fix applies to both the free and premium versions.

Grab the update from the NomNom Theme page, premium users can use the link they received in the email.

Twenty Twelve – Footer Widgets Tutorial

Tutorials,

Adding footer widgets to Twenty Twelve theme, Part Two of a five part series on Modifying Twenty Twelve theme. If you’ve read the first part of this tutorial, we added a second sidebar, created a custom body class and designed a few three column layouts to choose from.

If you’re just now starting this tutorial, feel free to download the free Twenty Twelve blank child theme to begin creating your own theme. Each section of this tutorial is independent and can be done individually, so you can use what you want of it and in any order.

We’ll be editing three files

functions.php
style.css
footer.php

The first thing to do is to copy footer.php from the Twenty Twelve directory into your child theme folder.

Adding Footer Widget Areas

In the last tutorial we added a new sidebar (widget area), we’ll be adding three more widget areas but this time they will display within the footer area of our theme.
If you’ve done the last tutorial the following code can be placed just before this line

If you’re just starting now, simply add it to your functions.php after the opening php tag.

This will register three widget areas. Just like the sidebar we added last time, each widget area has it’s own ID. Twenty Twelve has three widget areas with IDs sidebar-1, sidebar-2 and sidebar-3, since the extra sidebar we added used the ID sidebar-4, we’ll continue from there with 5,6 and 7.

The order these widget areas show up in Appearance > Widgets can be changed, but it involves de-registering the default widgets then adding them back in our own order. This also causes issues with a particular full-width body class in twenty Twelve. It can be done, I’ve done it in Twenty Plus Pro, but it’s really more work than it’s worth, so I’m not including it.

Save functions.php and close it. If you check Appearance > Widgets you should notice three new widget areas. Go ahead and place widgets in them, I usually put calendar widgets as they are the widest widgets available and work nicely for testing.

Don’t worry if you don’t see them on the front page, we still need to add them to our template files.

Add Widgets to Footer.php

Open footer.php that you copied to your child theme folder and find the line that reads..

Directly under this line add the following code

Save and close footer.php.

This calls each of the widget areas we registered in functions.php. Notice each one uses the same ID as we used when we registered them. Now your widgets should show up on your website, but we still need to style them.

Style Footer Widgets

Open style.css in your child theme and add the following code to it.

The first bit of code simply tells the entire footer widget area to display 100% wide, each widget area within that is 30.85% wide with a 3.7% right margin. This gives us our basic layout, a lot like Twenty Eleven used.

We also placed the CSS within an @media conditional, so the widgets will display like this only if viewed on a desktop.

Next we need to add CSS for IE8 and IE7, below what we’ve just added copy and paste this.

It’s basically the same as above, but we’ve made the widget areas slightly more narrow 29.85% so they look good in IE.

Since Twenty Twelve includes a homepage template with 2 footer widgets already, we won’t display these ones on that particular template, so using a CSS conditional, we’ll hide them for that page.

Your new footer widgets should now look just about perfect, here’s a screenshot of how they should look.

Twenty Twelve - Footer Widgets

There’s one last thing I’ll add to this tutorial, it’s a small fix for the default Homepage Template widgets in IE8.

If you view the Twenty Twelve Official Demo in IE8 you should notice the footer widgets stack on top of each other. They don’t in IE7 or IE9 and 10, only in IE8, so here’s a fix for that. It’s entirely up to you if you want to add it or not.

You can view the theme so far on Github where I’ll be updating this as the tutorial continues.
I hope you enjoyed this tutorial and let me know how your theme turned out by leaving a comment!

Twenty Twelve – Three Column Layout Tutorial

Tutorials, ,

Creating a three column layout with Twenty Twelve theme. Part one of a five part series on Modifying Twenty Twelve theme.

We’ll be editing 3 files to create out three column layout, functions.php, style.css and sidebar.php.
I’ll explain how to add a new widget area, add a new body class and how to style the new sidebar for 3 different style layouts. Left and Right sidebars, Two Left sidebars and Two right sidebars. Each layout will also contain styles for IE8 and the layouts will keep the responsive structure of Twenty Twelve theme.

I’ve updated the blank child themes to also include an empty functions.php file since it’s commonly used in child themes.

Start off by downloading the Free Blank Twenty Twelve Child Theme I’ve supplied (at the bottom of that page). Open the style.css and change the information at the top to whatever you like. Upload it to your website and activate it.

Next we’ll need a copy of Twenty Twelves sidebar.php file, so download that from your server, or download a new copy of Twenty Twelve from WordPress.org, upload it to your child theme.

Your child theme should now contain a style.css, functions.php, sidebar.php and screenshot.png.

Add a New Widget Area

First thing we’ll do is register a new widget area, this will be our second (left) sidebar. Open functions.php and add this to it

Notice the sidebar uses the ID sidebar-4, this needs to be unique. Other widget areas in Twenty Twelve use the ID’s sidebar-1, sidebar-2, sidebar-3, last two are for the homepage template footer widgets.

Save and close functions.php

Add Sidebar to the template

If you check Appearance > Widgets you should see a new widget area, if you do then great, but it won’t actually display anything if we add a widget but go ahead and add a new widget it to it anyways.
I usually add the Calendar widget when working with widget areas as it’s the widest default widget and is great for picking up any issues with the sidebars.

Now open sidebar.php and under the current sidebar code add the following

This displays the new widget area. Any place that get_sidebar is used, will display the main sidebar and our new sidebar. Save and close sidebar.php and view your website.

You should see the new widget area (if you’ve added a widget) but it will probably display directly under the default sidebar.

Increase Twenty Twelve Site Width

Twenty Twelve was designed to display only one sidebar, the default width is 960px or 68.571428571rem, we’ll be increasing the width of Twenty Twelve theme to 1000px or 71.42857rem. To figure out what the rem value is simply divide the px number by 14. Thanks to VooDooPress for helping me understand this and more, take a look at their article on Modifying the Width of Twenty Twelve Theme.

Open functions.php and under the sidebar code we added earlier, add the following

This decreases the content width to 500px, and increases the full page content width to 1000px which will be our new widths with both sidebars displaying.

Since we’re changing the content width, we also need to add a new thumbnail size so our images are not stretched or squished to fit in the new content side. Add this to functions.php

This creates a new image size of 500px wide and unlimited height.

Tip An easy way to figure out the needed image size is after the sidebars are in place in FireFox, right click on the image and go to “View Image Info” it should say something like “651px × 406px (scaled to 500px × 312px)” The 500px width is the width we need to create a new image size for.

The last thing we need to add is a new body class. We’ll use this body class to target every page but the full width page template and the homepage template. Add this to functions.php

This adds the body class .custom-layout to your theme. This saves us from reverse styling the full width template and the home page template of Twenty Twelve after we add our three column layout CSS.

If you look at the body class in FireBug you should see this.

twenty-twelve-body-class

Save and close functions.php

Three Column Twenty Twelve Styles

Now that we have all of our functions and template changes complete, the next step is adding the CSS to display everything how we want.

I’ll explain something before we begin. Twenty Twelve theme uses a mobile first layout. This means that it was created to display properly on media devices (cell phones tablets) first, then by the use of @media conditionals it was made to display properly on desktop screens.
This is why for every layout you’ll see something similar to @media screen and (min-width: 600px). This tells the theme to use the CSS between these tags if the screensize is greater than 600px.

You’ll also notice the use of .ie This is a conditional class added to Twenty Twelve to specifically target Internet Explorer 7 and 8 because they don’t understand media queries (@media). It’s also why any .ie conditionals are not also used between @media screen and (min-width: 600px).

Open style.css of your child theme. The first thing we’ll do is change the site width to 1000px as mentioned above, so add this.

Notice the .ie conditional, the regular code added between @media tags and the last part adjusts the footer area to reflect the new width.

Next part is the layouts. For this tutorial I’ll be using the left and right sidebar layout, I’ll also give the CSS to display a two left sidebar and two right sidebar layout, you can chose whichever one you want.

Add this to your style.css next

Notice the .custom-layout body class that we created in functions.php is being used.

Now for the .ie conditionals, add this directly under it

The .ie conditional is basically the same, but it’s not added within the media queries. Sometimes a margin will need to be adjusted for Internet Explorer, sometimes it’s fine as is. Anyways, if you notice something looks out of place just in IE, you can use this conditional .ie to correct it.

Save and close style.css and refresh your website. You should see two sidebars, one on the left, one on the right. Resize your browser, both sidebars should drop below the content and display full width.

Check out the Homepage page Template, and Full Width page templates, they should look normal.

Here’s what your website should look like.
twenty-twelve-three-column

The last thing I recommend doing is once you’ve decided on a layout, run Ajax Rebuild Thumbnails plugin to create the new image sizes for all of your previously uploaded images. Run it once, then deactivate it.

As promised, here’s the code for the Two Left sidebars and Two Right sidebar layouts.

Two Left Sidebars

Two Right Sidebars

You can replace the Left and Right sidebar layout CSS with either of these.

Check back soon for the next part of Modifying the Twenty Twelve theme where we’ll be adding three footer widgets to our theme.

Thanks for reading, let me know how your new layout turned out by leaving a comment!

Use a Default Category Post Thumbnail

Tutorials,

In this tutorial I’ll explain how to set the post to use an excerpt, and display a left aligned featured image thumbnail that will display an image based on the category of the post in Twenty Twelve theme.

What I’ve done with this site is used a bit of code that selects an image based on the post category and displays it as the featured image. I can still set one if I want, but I don’t have to. Now one of four images are selected according to the category of the post as the post thumbnail.

**Issues – this works fine for my site, but there is an issue I noticed that may affect yours. If there’s an image at the top of the post content, the thumbnail will not display for some reason, it will however display a manually added featured image as it does by default.

Use a Child Theme

Start off by creating a child theme, if you add this to Twenty Twelve it will be overwritten in an update. You can download a Blank Twenty Twelve Child Theme here.

Images and Category IDs

The code we will be using rely on the image using the same name as the category ID. To find the category ID visit Posts > Categories, hover over any category and look at the bottom of your browser, you should see a URL and within that URL something similar to ID=123, that 123 is your ID. Make a note of each ID number and what category it’s for.

As an example lets say you have a “Tutorial” category and the ID number is 195. Rename the image you want to use for that category to 195.png. Do the same for all categories and images. Images sizes can be whatever you like, I use 140x140px. Remember the size, you’ll need it for later on in this tutorial.

Here are the images I’ve used


When you’re done, put them in a folder (EX: images) and upload the folder to your child theme directory.

Editing the Template

The next step is to add the code to the child theme. Copy content.php from Twenty Twelve to your child theme directory and open it.

Find the line around line 33 that reads

change it to

This will tell your theme to display excerpts instead of a full post. Most people don’t set featured images as large as Twenty Twelves default unless it’s for a photography site or similar where the images would be unique anyways.

Add the Featured Image

In content.php around line 34, just under the code you added earlier, look for

Directly below it add

What this code adds a css class .excerpt-thumb, checks if there’s a post thumbnail already, if there is it displays it, if there isn’t it checks the category the post is in, then displays an image in the directory you’ve selected that matches the category ID.

Next we have to remove the large featured image that is displayed by Twenty Twelve.

In content.php around line 18 find the line that reads

Remove this line, save and close content.php.

Add Image Size to Functions

The last thing we need to do is add a function that will create the image size in case you do want to use your own featured image. I use 140×140 px, you can use whatever size you like, it should match the size of your category images you made earlier.

Create a file and name it functions.php and add this to it.

Save and close functions.php

Refresh your site and you should see your default post thumbnails next to each post displayed as an excerpt.

If the images are not displaying here’s a few things to check first before posting a comment.

  • Check to make sure the image path is correct, the path used in the tutorial is /images.
  • Check to make sure the category IDs are correct.
  • Check to make sure the image names match the category IDs.
  • If you’re using .jpg change the code we added for the thumbnails from .png to .jpg

Let me know how it worked out for you by leaving a comment.