Basic Maths

is a theme
for WordPress

WordPress Documentation Download as a PDF


Installation Instructions Requires WP v3.0 or higher

  1. Upgrade or install the latest version of WordPress (3.0 or higher).
  2. Download the Basic Maths Theme.
  3. Extract the zip file and upload the resulting /basicmaths/ folder to your WordPress /wp-content/themes/ directory.
  4. Navigate to Appearance > Themes in the Backend and activate Basic Maths.

Using Basic Maths


Settings

Before uploading new images, go to the Settings > Media page in the WordPress backend.

  1. Set the Thumbnail max width to 170 and the max height to 170 (Be sure to crop the thumbnail).
  2. Set the Medium max width to 440. Then set the max height to 440 or larger.
  3. Set the Large max width to 620. Then set the max height to 620 or larger.

More info

Please note: you may need to change the sizes of the images that you currently have in your blog. Sounds tedious, but there is a really great plugin that can handle it all for you. Try the Regenerate Thumbnails Plugin. It will make your life a lot easier.

Theme Options

There are also a number of Theme Options that allow you to customize certain areas. These option can be found at Appearance > Basic Maths Options in the Backend.

  1. Link Color: Change the color of links, backgrounds and borders by entering a HEX color number. (ie: 003333)
  2. Hover Color: Change the color of hover links by entering a HEX color number. (ie: FF3333)
  3. Top Tag Count: Choose the number of ‘Top Tags’ to display in the header. (Set to 0 to show all tags)
  4. Show Categories: Check this box to display a list of Categories in the header instead of Tags.
  5. Archives: Use this option to insert the slug of the page using the Archives template. (example: For a page Titled “History” that uses the Archives template, insert the slug history so that the “All Tags” link points to the correct page).
  6. Footer Text: Type in the HTML text that will appear in the bottom of your footer. (example: ©2010 < a href="http://basicmaths.subtraction.com" >Your Copyright Info< /a >. All rights reserved.

Custom Page Menus (WordPress 3.0 only)

Basic Maths supports the new custom menus feature built into WordPress 3.0. This feature allows you to create your own custom menu links with up to two levels of depth. Take a look at the video above to see how it works. More info.

Custom Header Logo / Image (WordPress 3.0 only)

To add a custom header image, navigate to Appearance > Header in the WordPress backend and follow the on screen instructions to upload your own custom header images. You can also choose one of the defaults. Near the bottom of the page you can also choose to show or hide the text in your header image. More info

Hanging Content

Basic Maths also has some custom shortcodes which you can use to hang content outside of the default content area. Here is a blog post that illustrates how the different shortcodes work with the grid. There’s also a cheat sheet below to help out with this. Make use of the SHIFT + ALT + G jQuery plugin which will help out quite a bit as well.

Example: [hang1column element="div" width="260"]This is some hanging content.[/hang1column]

    Parameters (Defaults)
  • element="div" (Defines which custom HTML element to hang for example: div, ul, ol, span, etc.).
  • width="260" (Defines the width in pixels).

Usage: [hang2column foo="bar"] %content% [/hang2column]
Adds a wrapping element for floating content 2 column to the left.

[hang1column foo="bar"] %content% [/hang1column]
Adds a wrapping element for floating content 1 column to the left.

[nohang foo="bar"] %content% [/nohang]
Adds a wrapping element for adding non-floating content.

Be wary of nesting short code items which can cause errors when done incorrectly. Here’s an example of how to use the shortcode correctly. More info

Image Styles

WordPress adds a number of image classes to every image that you place in a post or page with the WordPress Media Uploader. Basic Maths uses a few of these classes to hang images to the left of the post measure while still holding to the grid. Here is a blog post that illustrates how the different class selectors will work with the grid. There’s also a cheat sheet below to help out with this. Make use of the SHIFT + ALT + G jQuery plugin which will help out quite a bit as well.

    No Hanging
  • no-hang (recomended)
  • alignleft
  • aligncenter
  • alignright
  • alignnone
  • alignnone + size-medium
  • alignnone + size-thumbnail
  • alignright + size-medium
  • alignright + size-thumbnail
  • aligncenter + size-medium
  • aligncenter + size-thumbnail
    Hang Left by 1 grid column
  • hang-1-column (recomended)
  • alignleft + size-medium
  • alignleft + size-thumbnail
    Hang Left by 2 grid columns
  • hang-2-column (recomended)
  • alignnone + size-large
  • alignleft + size-large
  • aligncenter + size-large
  • alignright + size-large
  • size-large

More Info

Page Layouts

This theme includes templates for an Archives page, which shows a list of all your Tags and Categories along with a date based Archive at the bottom. To use it, go to Write > Pages in your WP Admin. Create a new page and select the Basic Maths Archive Template from the Page Template dropdown menu. More Info

Page Content Shortcode

Basic Maths comes with some custom shortcodes which can be used to display Page content in a number of different ways as seen in this example. Here is a list of the shortcodes and how they can be used:

  • [topcolumn] your text [/topcolumn]: Fills page content to the full width with and adds a border to the bottom of the text block.
  • [leftcolumn] your text [/leftcolumn]: Creates a left column at 50% of the width of the page content. Also adds a divider to the right of the text block.
  • [rightcolumn] your text [/rightcolumn]: Creates a right column at 50% of the width of the page content.

Be wary of nesting short code items which can cause errors when done incorrectly. Here’s an example of how to use the shortcode correctly. More info

Adding Widgets

Within the theme files of Basic Maths, there is a folder called /widgets/ where all of the default Basic Maths widgets are stored. You can add your own widgets to this folder or the /widgets/ folder of a Basic Maths child theme. You’ll need to follow the documentation in the WordPress Widgets API to add your own widgets. More info

Grid Overlay

Basic Maths comes withe a grid layout overlay feature that allows you to view your website with a grid to test the alignment of elements

  • Press ALT/OPTION + G to show the grid until you release.
  • Press ALT/OPTION + G + H to show and hold the grid (Pressing ALT/OPTION + G will remove it again).
  • Press ALT/OPTION + G + F to toggle the grid to the foreground and back. Pressing ALT/OPTION + F while the grid is held also works.

Child Themes & Basic Maths

We strongly suggest using child themes for any and all customizations you may want to make to the Basic Maths theme. Using child themes will allow you to make non destructive, future proof edits to your themes. Basic Maths comes with a sample child theme which you can use to make edits.

To use the child theme simply locate the /sample-basicmaths-childtheme/ folder and move it to your /wp-content/themes/ directory. Then, navigate to Appearance > Themes and activate the Sample Basic Maths Child Theme. You can then add your custom theme edits to the theme-edits.css file which will override the default styles of Basic Maths. There are some sample color and font styles added to the sample child theme to help you get started.

If you’d like, you can rename the folder to something more specifc like: /my-theme/. You can also change the theme name to something more specific, by editing the information in the /basicmaths-childtheme/styles.css file. More information on child themes and how they work can be found here.

Change log


Version 1.1.1

    14-Jun-2011
  • Added the_excerpt() to loop.php.
  • Added post IDs to "Continue Reading..." click-through links.
  • Added Hashgrid JS for overlay grid.
  • Fixed Tag Cloud floating issue.
  • Fixed long links in sidebar issue.
  • Fixed HashGrid key command typo.
  • Removed sidebar widget preset variable.
  • Removed Hotkeys Plugin that caused JS errors.

Version 1.1

    15-Nov-2010
  • Added custom styling and markup for iPhone browsers.
  • Added advanced support for Child Themes.
  • Added a widgets folder for adding widgets easily.
  • Added a widget title option for all Basic Maths widgets.
  • Added the WP 3.0 get_template_part() function for the loop.php template file (Less code duplication).
  • Added custom WYSIWYG styling to match the Basic Maths grids & styles. More info.
  • Added support for wp_nav_menu() and comment_form() with backwards compatibly (WP 3.0).
  • Added conditional state widget areas which allow for ‘empty’ sidebars.
  • Added styling for Video and misc content with div.hang-1-column & div.hang-2-column classes.
  • Fixed threaded comments. A max 2 level of comment threading is recommended.
  • Fixed margins for misc. HTML tags in page columns.
  • Fixed nested list styling.
  • Fixed search box styling for WebKit & Safari based browsers.
  • Fixed menu markup for static front-pages using wp_page_menu() and wp_nav_menu().

Version 1.0.1

    02-Dec-2009
  • Added a conditional ‘Leave Comments’ link for when comments or trackbacks are turned on, off, both or none.
  • Changed grid key command to Alt+Shift+G for browser compatibility.
  • Fixed various IE6 cosmetic bugs.
  • Fixed various IE7 cosmetic bugs.
  • Fixed a bug where the post counts on Archive pages were limited by the WP reading settings.
  • Fixed favicon mark-up validation.
  • Fixed footer and admin documentation links.
  • Fixed the layout of the default widgets built into sidebar.php.
  • Fixed the search box in the main navigation so that it aligns to the right at all times.
  • Replaced ‘pretty’ Basic Maths archive permalinks with query based archive links.

Version 1.0

    14-Nov-2009
  • Initial release.

Other Details


HashGrid

Basic Maths uses the jQuery HashGrid plugin to display the layout overlay grid.

Sample Images

All sample images are courtesy of their respective authors.

Support

Please make sure that you have followed all of the instructions to the smallest detail and make sure that you are using the latest version of WordPress. The WordPress Support Forums is a great resource for everything related to WP and theming — we are sure that you will be able to find your answers there.

Contact Us

basicmaths@subtraction.com

Licensing

Basic Maths is Copyright © 2010 by Khoi Vinh. It is released under the GNU General Public License, version 3, as published by the Free Software Foundation.

ENJOY.