Instructions

    Contents

  1. Best Practices
  2. Requirements
  3. Installation
  4. Settings
  5. Menus
  6. Widgets
  7. Header Images
  8. Fonts
  9. Video
  10. Mobile Video
  11. Multimedia
  12. Shortcodes
  13. Shortcodes - Columns
  14. Shortcodes - Boxes
  15. Shortcodes - Buttons
  16. Hooks
  17. Common Problems
  18. Installation Troubleshooting
  19. Recommended Plugins
  20. Credits
  21. License

Base is minimally styled theme framework for WordPress. You must have WordPress installed to use Base. This theme validates as Strict XHTML and has been tested on Chrome, Firefox 3.6+, Safari 4.0+, Opera 10+, IE8, and IE7

  1. Best Practices

    If you want to make changes to how this theme looks and feels, then you should create a child theme. Never make changes to the original theme files. Why? Because when a new version of this theme is released, all of your changes will be lost when you update. Plus, making a child theme is incredibly easy. Here is how you do it.

  2. Requirements

    • PHP5 - make sure your server is running PHP5.
    • WordPress 3.0 or higher - make sure you have the latest version of WordPress installed
  3. Installation

    1. Unzip the base.zip file to your computer's desktop. It should be contained within a folder called base
    2. Upload the folder and its contents to the themes directory of your blog via FTP, located in wp-content/themes where WordPress is installed.
    3. Click on Appearance - Themes menu from the WordPress admin panel and then activate Base.
    4. The next page that loads will be the Theme Options page. This is where you can customize the look and feel of your site.
    5. Click on View Site at the top of the page. Bam. Hot site!
  4. Settings

    1. Click Settings -> Media. Set your thumbnails to 200 x 150. Set your medium photo size to 620 x 0. Set your large size to 940 x 0.
    2. Set your external video embed width to 620. Leave the height blank. This applied for your YouTube or Vimeo links. Change this to 950 if you plan on have the Sidebar disabled.
    3. This theme will automatically create thumbnails from the images that you upload, when you upload them.
  5. This theme uses WordPress' Menu feature for configuring your site navigational menu. To configure your menu, visit the Appearance -> Menu tab on your WordPress dashboard. Here is a video tutorial.

  6. Widgets

    This theme comes with five Widgetized areas: Home, Sidebar, and four optional Footer widgets that you can enable on your Base Theme Options -> Widgets page. You can add a variety of Widgets to this theme on the Appearance -> Widgets tab in WordPress. We create plugins that add Widgets to your site, such as a Welcome Message, About Section, Testimonials Section, Slideshows, etc. Many of these plugins were made specifically for Base and Base child themes. You can download these plugins from the WordPress repository.

  7. Header Images

    Select from a variety of header images, or, upload you own header image. Header images add personality to your site and can change on a per-post basis if you select a Featured Image for a specific post. You can choose your own header image on the Appearance -> Header tab.

  8. Fonts

    This theme can use any font from the Google Font Directory. Add your font on the Colors & Fonts theme options page.

  9. Video

    This theme has a built-in HD video player that plays FLV video files. You are no longer restricted to pixelated YouTube videos.

    To add a self-hosted video using the built in player, you need to familiarize yourself with using Custom Fields in WordPress. Then, follow these instructions:

    1. Compress your video file into FLV format using your preferred video compression software.
    2. Upload the file to your server using your favorite method. Use FTP for large files. Use WordPress' built-in media upload tools for small files.
    3. Copy and paste the url to the file into a custom field called video.
    4. Upload a video thumbnail using the Add Media tools. You can do this the exact way that you add regular thumbnails, except, you will want to add an image large enough to fit the maximum size of the video player. If you have the sidebar enabled, you will want to copy the url to the 620 pixel wide image. For sites with sidebars disabled, use the 940px wide image. Add the video thumbnail to a custom field with key value video-thumb.

    For multiple videos within a post or page, try different values for the same video key which mean you can have 2 or more instances of video key. Same goes for video-thumb. Note that each thumbnail should be in the same precedence as that of video for them to match.

  10. Mobile Video

    To serve mobile-friendly video files to users with Flash either disabled or not available, first enable the Mobile Video option on the theme options page. Then, follow these instructions:

    1. Compress your video file into one of the recommended mobile-friendly video formats.
    2. Upload the file to your server using your favorite method. Use FTP for large files. Use WordPress' built-in media upload tools for small files.
    3. Copy and paste the link to the file into a custom field called iphone.
    4. If you haven't done so already, add a video thumbnail. You can do this the exact way that you add regular thumbnails, except, you will want to add an image large enough to fit the maximum size of the video player. If you have the sidebar enabled, you will want to copy the url to the 620 pixel wide image. For sites with sidebars disabled, use the 940px wide image. Add the video thumbnail to a custom field with key value video-thumb.
  11. Multimedia Embeds

    You can also add other multimedia, which can include virtually any media with embed capabilities. Enter "multimedia" as the key value and paste your YouTube, Vimeo, or any other html embed code into the value field.

  12. Page Templates

    This theme comes packaged with three page templates: Default, Blog and Wide Page. The Default template inherits the Sidebar settings on your theme options. The Blog template pulls in all Blog posts onto one page so you can create a page url like this: http://site.com/blog/. You need to specify your Blog category on the theme options page before creating this Blog page. Simply create a Page called Blog and assign it to the Blog page template (located to the right underneath the Page Attributes section. If the Page Attributes section is not visible, you can click the isn't visible, toggle the Screen Options tab located in the upper right and check the Page Attributes checkbox.) Publish the Page out (it will not have any content). The Wide Page template does not have a Sidebar. Use it for creating Pages with Column Shortcodes (more info about shortcodes in next section).

  13. Shortcodes

    This theme comes with a selection of Shortcodes for adding column layouts, boxes and buttons to Posts and Pages with ease. You can use the following shortcodes [one_sixth], [one_fourth], [one_third], [one_half] in any combination as long as they total 1 in then end. The start of each column begins with a shortcode that ends in _first, like this: [one_sixth_first]. Each row ends with a shortcode that ends in _last, like this: [/one_third_last]. Simply copy and paste the Shortcodes below and add your content between each Shortcode, like this: [one_sixth]This shows up on the page[/one_sixth]. Below are some examples to learn from:

    Six Columns

    Shortcode:

    [one_sixth_first][/one_sixth_first]
    [one_sixth][/one_sixth]
    [one_sixth][/one_sixth]
    [one_sixth][/one_sixth]
    [one_sixth][/one_sixth]
    [one_sixth_last][/one_sixth_last]

    Generated Layout:

    First Column

    Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.

    Second Column

    Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.

    Third Column

    Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.

    Fourth Column

    Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.

    Fifth Column

    Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.

    Sixth Column

    Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.


    Four Columns

    Shortcode:

    [one_fourth_first][/one_fourth_first]
    [one_fourth][/one_fourth]
    [one_fourth][/one_fourth]
    [one_fourth_last][/one_fourth_last]

    Generated Layout:

    First Column

    Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.

    Second Column

    Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.

    Third Column

    Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.

    Fourth Column

    Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.


    Three Columns

    Shortcode:

    [one_third_first][/one_third_first]
    [one_third][/one_third]
    [one_third_last][/one_third_last]

    Generated Layout:

    First Column

    Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat.

    Second Column

    Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat.

    Third Column

    Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat.


    Two Columns

    Shortcode:

    [one_half_first][/one_half_first]
    [one_half_last][/one_half_last]

    Generated Layout:

    First Column

    Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.

    Last Column

    Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.


    One-Sixth & Five-Sixth Columns

    Shortcode:

    [one_sixth_first][/one_sixth_first]
    [five_sixth_last][/five_sixth_last]

    Generated Layout:

    First Column

    Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.

    Last Column

    Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat.


    One-Third & Two-Third Columns

    Shortcode:

    [one_third_first][/one_third_first]
    [two_thirds_last][/two_thirds_last]

    Generated Layout:

    First Column

    Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.

    Last Column

    Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.


    Multi-row mix-match

    Shortcode:

    [three_fourths_first][/three_fourths_first]
    [one_fourth_last][/one_fourth_last]
    [one_fourth_first][/one_fourth_first]
    [one_fourth][/one_fourth]
    [one_fourth][/one_fourth]
    [one_fourth_last][/one_fourth_last]
    [one_half_first][/one_half_first]
    [one_half_last][/one_half_last]

    Generated Layout:

    First Column

    Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat.

    Last Column

    Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.

    First Column

    Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.

    Second Column

    Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.

    Third Column

    Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.

    Fourth Column

    Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.

    First Column

    Donec sed tellus eget sapien fringilla nonummy. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Donec sed tellus eget sapien fringilla nonummy. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Donec sed tellus eget sapien fringilla nonummy. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Donec sed tellus eget sapien fringilla nonummy. Suspendisse quam sem, consequat at, commodo vitae, feugiat.

    Last Column

    Donec sed tellus eget sapien fringilla nonummy. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Donec sed tellus eget sapien fringilla nonummy. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Donec sed tellus eget sapien fringilla nonummy. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Donec sed tellus eget sapien fringilla nonummy. Suspendisse quam sem, consequat at, commodo vitae, feugiat.


    Box Shortcode

    Shortcode:

    [box_grey]This is a grey box. This is a link.[/box_grey]
    [box_green]This is a green box. This is a link.[/box_green]
    [box_yellow]This is a yellow box. This is a link.[/box_yellow]
    [box_red]This is a red box. This is a link.[/box_red]

    Generated Layout:

    This is a grey box. This is a link.
    This is a green box. This is a link.
    This is a yellow box. This is a link.
    This is a red box. This is a link.

    Button Shortcode

    Shortcode:

    [button link="#"]Default Button[/button]
    [button link="#" size="large"]Large Button[/button]
    [button link="#" align="right" size="large"]Large Right Button[/button]
    [button link="#" color="dark"]Dark Button[/button]
    [button link="#" size="large" color="dark"]Large Dark Button[/button]
    [button link="#" align="right" size="large" color="dark"]Large Dark Right Button[/button]


    Generated Layout:

  14. Action Hooks and Filter Hooks.

    We recently introduced the GPP Base Hook Widgets plugin that turns all of the available Hooks in Base into Widgetized regions. This allows users without coding knowledge to easily take advantage of the Base Hook system. The links below are mainly for theme developers and those looking to create child themes for the Base theme framework without relying on the GPP Base Hook Widgets plugin.

  15. Common Problems

    Javascript Conflicts

    This theme uses jQuery javascript to do lots of fancy stuff. If your theme looks broken, than you likely have a plugin that uses a conflicting javascript library. Deactivate your plugins, one-by-one, to determine which plugin is conflicting with jQuery.

    Thumbnails

    If you are migrating from an old theme to a new theme and your thumbnails look squished or distorted, you might need to re-upload the image you plan on using for the post thumbnail. This is because WordPress creates your image sizes based on the dimensions you specified above. Old thumbnails will not be automatically resized. You can also regenerate your thumbnails so that your old uploaded media have the new settings applied to it.

    By default, thumbnails are auto cropped by WordPress. This theme checks first to see if you have added the URL to your preferred thumbnail to custom field called, you guessed it, thumbnail. If not, the theme will defer to the first photo that you uploaded using WordPress' Add Photo icon. If you haven't uploaded a photo using the Add Photo icon, the theme will can the post body for an image, and use it. If no photo exists in the post body, the theme will use a default image. As you can see, this series of "checks" allow you to have 100% control over your post thumbnails.

    Still having trouble? Consider becoming a member of Graph Paper Press so you can get access to our private, well-groomed support forum, tutorials, and additional themes.

  16. Installation Troubleshooting

    If you've performed a clean install of Base and are having problems, make sure that the following conditions have been met:

    1. Make sure that you've installed Base properly. You should use an FTP program like FileZilla, WinSCP, or Fetch to upload your files. Do not use WordPress' Install a theme in .zip format option.
    2. Permissions: On most servers, Base files should be set to 644 and folders should be set to 755.
    3. Make sure that you've deactivated all of your plugins before installing and/or upgrading Base.
    4. Your Base folder should be named base. Do not rename this folder.
    5. If you are upgrading your version of Base, make sure to backup first and completely delete your old version of Base from your server before uploading the new version of Base to your server.
  17. Recommended Plugins

    • W3 Total Cache: This plugin generates static html files from your dynamic WordPress blog. After a html file is generated your webserver will serve that file instead of processing the comparatively heavier and more expensive WordPress PHP scripts.
    • Regenerate Thumbnails: If you moved from another theme to this theme, and you are having image size issues, then after setting proper image sizes, feel free to use this plugin and regenerate all the image to the new image size.
    • Graph Paper Press Plugins: We create plugins that add Widgets to your site, such as a Welcome Message, About Section, Testimonials Section, Slideshows, etc. Many of these plugins were made specifically for Base and Base child themes.
  18. Credits

  19. License Details

    There are a few things to know that you can and cannot do with this theme:

    • Give credit where credit is due. Keeping the credit link intact is recommended. If you want to remove the credit, consider becoming a developer-level member of Graph Paper Press.
    • You may use this product for personal and commercial purposes.

    This theme was created for by us for you. Contact us for inquiries, comments, or suggestions