› Codon

Codon

Codon is a starter theme for WordPress that’s perfect for building. It features minimal styling, plenty of useful Customizer options for content presentation, and filters and actions for developers to use.

Codon is built with Zurb’s Foundation 5 framework and Automattic’s _s starter theme. The Foundation backbone ensures sites built with Codon are fully responsive and optimized for mobile and tablet delivery.

Developer contributions are much appreciated, and should be handled at Github.

Screenshots

Documentation

Documentation is on-going, so please reach out if your question is not answered below.

Installation

Install Codon as you would any other standard WordPress theme. To start, visit the Appearance->Themes panel in your WordPress dashboard.

1) Click on “Add New” and search for Codon in the WordPress theme repository.

2) Hover over the Codon thumbnail in the search results and click “Install.”

3) Click “Activate” to make Codon the active theme for your site. If you wish to preview it first and use the customizer to tweak the settings, click on “Live Preview.”

Alternative Manual Installation

If you’ve downloaded Codon, you can alternatively install the theme manually. To install manually:

1) Visit Appearance->Themes and click “Add New.”

2) Click on “Upload Theme,” and then “Choose File.” Select the theme’s zip archive from your hard drive.

3) Click “Activate” to make Codon the active theme for your site. If you wish to preview it first and use the customizer to tweak the settings, click on “Live Preview.”

FTP Installation

Alternatively, you can install Codon via FTP (File Transfer Protocol) using an FTP such as Filezilla. To install manually, you will need to download the theme’s zip archive, and then extract it to a location on your hard drive.

1) Connect to your server using your FTP credentials.

2) Navigate to the /wp-content/themes directory in your WordPress installation.

3) Upload the Codon theme directory into the /wp-content/themes directory. The directory structure should look like this: /wp-content/themes/codon/

4) Activate the theme via the Appearance->Themes panel in your WordPress dashboard.

Options and Initial Setup

After you’ve installed Codon, take a few minutes to spend some time with the Theme Customizer panel to set things up. The Theme Customizer is basically a theme options/settings panel, but it lets you see live results as you make changes — no more saving options and refreshing your page each time. Customizer provides an awesome user experience for site mods.

Visit the Apppearance->Customize panel to get started, and browse through the available options:

Header Options

There are two choices here — the traditional header (default) and the still-in-beta sticky top bar. After changing and saving this setting, refresh the customizer page to load up additional options related to your choice.

a) Traditional Header

This is the default header which comes with an optional search bar, logo upload field (you can also use a standard text header), and an optional header-widget area. These three options are only available when the traditional header is selected — the topbar uses a different logo field due to its constrained height.

b) Topbar Header

This option enables the Foundation 5 sticky top navigation bar, which features its own logo upload field (max-height: 45px) and an available menu container.

c) Site Description

Enable or disable the site tagline as it appears beneath the site logo or main title text. This option is only enabled when the traditional header is selected, so if you’ve recently made changes, and you don’t see this option, try refreshing the customizer.

d) Header Search Bar

Enable or disable the header-search bar, which appears on the right side of the header by default when using the traditional-header mode. This option is only enabled when the traditional header is selected, so if you’ve recently made changes, and you don’t see this option, try refreshing the customizer.

e) Header Widget Area

Enable or disable the header-widget area, which appears on the right side of the header when using the traditional-header mode. This option is only enabled when the traditional header is selected, so if you’ve recently made changes, and you don’t see this option, try refreshing the customizer.

Archive Content Options

This panel lets you customize all archive templates (i.e. category, tag, search results and date-based archive pages).

a) Archive Sidebar

Choose whether or not to show a sidebar on archive pages. If disabled, the archive pages will collapse to full-width to fill the extra space, and the widget area will be deactivated in Appearance->Widgets.

b) Post Display

Choose the style of your archive pages. Codon comes with three options: 1) blog style 2) two columns 3) three-columns. The blog-style layout shows your posts in a standard one column layout, while the two and three-column display options serve up post columns using Foundation’s block grid.

If using the three-column layout, set your posts per page option (Dashboard->Settings->Reading) to be divisible by three (i.e. 9 or 12) to prevent the last post from hanging out on an island by itself (islands are lonely, right?)

c) Post Thumbnails

Here you’ll choose your post-thumbnail size, or choose to turn them off altogether (thumbnail, medium, full-column, or off). The post thumbnails (“Featured Image”) are disabled by default. I recommend enabling them if you are using post excerpts for your archive page. The “Full-Column” option is a larger thumbnail that works well with either of the column-post displays, as it will automatically fill the post container with a full-column width image.

The thumbnail and “medium sizes are connected to your settings in Dashboard->Settings->Media. By default, the thumbnail is 150×150, and the medium size is 300×250.

d) Post-Thumbnail Alignment

Choose how you want to align the post thumbnails, if applicable. If you are using the full-column thumbnails, this setting is mostly irrelevant. These settings are tied to WordPress-specific classes, like alignleft, aligncenter and alignright.

e) Post Meta

Choose whether or not to display the post meta on archive pages. The post meta box is directly beneath the title by default. It contains the author, publish date, category, and, if applicable, the post format type (audio, video, link, status, chat, gallery, image, etc.)

f) Post Excerpts

Choose whether to show the post excerpts or the full content of each post on archive pages. The latter option is only recommended if you are using the blog-style post display, as things can get cramped when showing the full content in column posts.

Single Content Options

Here you’ll make your choices for all single-content templates — such as the generic page template, the single-post template, and the single template for post formats.

a) Authorbox

Choose whether or not to display the author box at the end of each post. This box contains a byline, the author’s bio as set in Dashboard->Users->Profile, as well as any applicable social links and the author’s gravatar image. The social links include support for fields added by the popular WordPress SEO plugin by Yoast, including Facebook, Twitter and Google Plus, as well as the author’s website URL as specified within the profile editor.

To set up a Gravatar image for an author, visit gravatar.com and sign up for free using the email address associated with the author profile.

b) Post Meta

Choose whether or not to display the post meta on single-post pages. The post meta box is directly beneath the title by default. It contains the author, publish date, category, and, if applicable, the post format type (audio, video, link, status, chat, gallery, image, etc.)

c) Post Breadcrumbs

Enable or disable the built-in post breadcrumb trail above the title. This feature is enabled by default, and includes a link to the post categories if applicable.

d) Page Breadcrumbs

Enable or disable the breadcrumb trail for static pages. This feature is enabled by default, and includes a link to the page parent, if applicable.

e) Post Extras

Enable or disable the post-extras box. The post extras box is a meta box that appears beneath the content box on the page and post editing screen, which contains fields for an optional page/post subtitle (appears directly beneath the title on single-content templates), as well as a Featured Video embed box. The video embed field automatically pins the video to the top of the content, using Foundation’s flex-video wrapper to work with all screen sizes.

Disabling the post-extras box not only removes the meta box from the page/post editing screen, but also disables any previously saved subtitles or featured videos on the front end. It does not, however, delete the content, and re-activating this feature will re-enable any previously saved subtitles or videos.

f) Post Style

Choose your post style for single-content views — full width or with a sidebar.

Display Options

The display options panel provides site-wide configurations which can be enabled or disabled with ease.

a) Infinite Scroll

Turn this off to disable infinite scroll (enabled by default). If infinite scroll is disabled, the standard WordPress content nav (i.e. next-page style links) is used with Font Awesome’s arrows for navigation.

b) Post Default Image

Here you can upload a default post-thumbnail to be used for posts that do not have a “Featured Image.” This is a fallback for posts without uploaded thumbnails, and is only used when a) no featured image is present b) post thumbnails are enabled for archive content.

c) Excerpt Length

Set your excerpt length here (the WordPress default is 55 words) using the number selector. You can enable post excerpts up to 100 words in length.

Footer Options

This panel lets you select options for the main site footer.

a) Footer Widgets

Enable or disable the footer-widgets panel (three columns). Once this is activated, navigate to Appearance->Widgets to set up your footer widgets.

b) Footer Credit link

Enable or disable the footer-credit link (enabled by default). This simply adds a non-obtrusive link to your site’s footer: “build on the codon framework.” This is a great way to show support in lieu of (or in conjunction with) a donation.

c) Footer Menu

Enable or disable the footer menu. If enabled, navigate to Appearance->Menus and add a menu to the “Footer Menu” location.

d) Return to Top Link

Enale or disable the “return to top” link. This adds a small Font Awesome arrow icon that provides a smooth scroll back to the top of the page.

e) Social Block

Enable or disable the social block — a bar in the footer containing social media links (Font Awesome icons). Once enabled and saved, refresh the Customizer to see the social media fields, which include: Facebook, Twitter, LinkedIn, Github, YouTube, Pinterest, Instagram, Tumblr, Skype, Reddit, Yelp, and an RSS feed link.

Site Title & Tagline

Here you can edit your site title and tagline. The title text is used in lieu of an uploaded site logo, and the display of the tagline can be turned on or off in the Header Options panel.

Colors

Choose your site’s background color. The selected color applies to the entire region of the page excerpt for the header and footer (to edit those, use custom CSS). The container wrapper class is .container, so feel free to use this panel for a custom background color and use CSS to set the container color, if you want the two to be different.

Background Image

Upload an optional background image for your site. The selected image applies to the entire region of the page excerpt for the header and footer. The container wrapper class is .container, so feel free to use this panel for a custom background image and use CSS to set the container color, if you want the two to be different.

Navigation

This connects with the menu-management portal, just like what’s found in Dashboard->Appearance->Menus. Use this panel to choose which menus go where. You’ll need to use the standard admin menu-management panel to create new menus.

Widgets

Here you can manage widgets and widget areas just as you can in Appearance->Widgets. Remember that certain widgets may be on or off depending on your saved options, so make sure to refresh this panel after saving if you don’t see the widget area you’re looking for.

Static Front Page

By default, the front page shows a feed of the latest posts. Here you can choose to use a static-front page instead, if desired. Simply create the page you want to use in Dashboard->Pages, and then select it here.

Customization

The best way to start building with Codon is to use a child theme, as this allows you not only to craft your custom CSS, but it also lets you use filters and action hooks with your child theme’s functions.php file.

An alternative method is to use a custom functions plugin. Each of these methods allow you to customize Codon without changing the theme’s code. This means you’ll generally have no problems upgrading to newer versions.

Furthermore, Codon can be used as a standalone theme, if you’re satisfied with its minimal CSS.

And lastly, Codon can be forked into your custom theme. This method may be desirable for some developers, but the downside is you’ll lose the ability to easily update Codon’s code as newer versions are released.

Filter Reference:

Codon comes with plenty of template tag filters which let you easily customize what can’t be adjusted with the WordPress Customizer with just a few lines of code. If you aren’t familiar with the concepts of filters and actions, I highly recommend reading Ian Stewart’s wonderful introduction to the subject.

codon_previous_post_link

Default variable and output:
$previous_post_link = '<i class="fa fa-arrow-left"></i>&nbsp;%title';

codon_next_post_link

Default variable and output:
$next_post_link = '%title&nbsp;<i class="fa fa-arrow-right"></i>';
codon_authorbox_name

Default variable and output:
$author_name = '<h5>' . __( 'Author: ', 'codon' ) . get_the_author() . '</h5>';
codon_authorbox_avatar

Default variable and output:
$author_avatar = '<div class="small-12 medium-3 columns">' . get_avatar( get_the_author_meta( 'ID' ), 250 ) . '</div>';
author_link_one

Default variable and output:
$author_link_one = '<li><a href="' . get_the_author_meta ('googleplus') . '"><i class="fa fa-google-plus"></i></a></dd>';
author_link_two

Default variable and output:
$author_link_two = '<li><a href="' . get_the_author_meta ('googleplus') . '"><i class="fa fa-google-plus"></i></a></dd>';
author_link_three

Default variable and output:
$author_link_three = '<li><a href="' . get_the_author_meta ('googleplus') . '"><i class="fa fa-google-plus"></i></a></dd>';
author_link_four

Default variable and output:
$author_link_four = '<li><a href="' . get_the_author_meta ('googleplus') . '"><i class="fa fa-google-plus"></i></a></dd>';
author_link_five

Default variable and output:
$author_link_five = '<li><a href="' . get_the_author_meta ('googleplus') . '"><i class="fa fa-google-plus"></i></a></dd>';
author_link_six

Default variable and output:
$author_link_six = '<li><a href="' . get_the_author_meta ('googleplus') . '"><i class="fa fa-google-plus"></i></a></dd>';
codon_posted_on

Default variable and output:
$posted_on = sprintf(
		_x( '%s', 'post date', 'codon' ),
		'<span class="post-info ' . $meta_class . '-date"><i class="fa fa-calendar fa-lg"></i> <a href="' . get_day_link ( $date_year, $date_month, $date_day ) . '" rel="bookmark">' . $time_string . '</a></i></span>'
	);
codon_byline

Default variable and output:
$byline = sprintf(
		_x( '%s', 'post author', 'codon' ),
		'<span class="post-info ' . $meta_class . '-author"><i class="fa fa-user fa-lg"></i> <a href="' . esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ) . '">' . esc_html( get_the_author() ) . '</a></span>'
	);
codon_category

Default variable and output:
$post_categories = '<span class="post-info ' . $meta_class . '-cat"><i class="fa fa-archive fa-lg"></i>' . $cat_links . '</span>';
codon_post_format

Default variable and output:
$post_format_link = '<span class="post-info ' . $meta_class . '-date"><i class="fa ' . $format_icon . ' fa-lg"></i><a href="' . get_post_format_link($post_format) . '"> ' . get_post_format_string( $post_format ) . '</a></span>';
codon_category_header

Default variable and output:
$title = '<h1 class="page-title">' . single_cat_title ('<i class="fa fa-archive"></i> ');
codon_wide_thumb_size

Default variable and output:
$image_size = '366';
codon_footer_text

Default variable and output:
$output = '<small id="site-info">&copy;' . date('Y') . ' - ' . get_bloginfo('name') . '</small><br>';
codon_tag_header

Default variable and output:
$title = '<h1 class="page-title">' . single_cat_title ('<i class="fa fa-tags"></i> ');
codon_return_to_top

Default variable and output:
$top_return = '<a href="#" id="top-return"><i class="fa fa-arrow-up fa-lg"></i></a>';
codon_social_facebook

Default variable and output:
$facebook = '<li><a href="' . get_theme_mod ('footer-facebook' ) . '"><i class="fa fa-facebook fa-lg"></i></a></dd>';
codon_social_gplus

Default variable and output:
$gplus = '<li><a href="' . get_theme_mod ('footer-gplus' ) . '"><i class="fa fa-google-plus fa-lg"></i></a></dd>';
codon_social_twitter

Default variable and output:
$twitter = '<li><a href="' . get_theme_mod ('footer-twitter' ) . '"><i class="fa fa-twitter fa-lg"></i></a></dd>';
codon_social_pinterest

Default variable and output:
$pinterest = '<li><a href="' . get_theme_mod ('footer-pinterest' ) . '"><i class="fa fa-pinterest fa-lg"></i></a></dd>';
codon_social_youtube

Default variable and output:
$youtube = '<li><a href="' . get_theme_mod ('footer-youtube' ) . '"><i class="fa fa-youtube fa-lg"></i></a></dd>';
codon_social_yelp

Default variable and output:
$yelp = '<li><a href="' . get_theme_mod ('footer-yelp' ) . '"><i class="fa fa-yelp fa-lg"></i></a></dd>';
codon_social_instagram

Default variable and output:
$instagram = '<li><a href="' . get_theme_mod ('footer-instagram' ) . '"><i class="fa fa-instagram fa-lg"></i></a></dd>';
codon_social_tumblr

Default variable and output:
$tumblr = '<li><a href="' . get_theme_mod ('footer-tumblr' ) . '"><i class="fa fa-tumblr fa-lg"></i></a></dd>';
codon_social_reddit

Default variable and output:
$reddit = '<li><a href="' . get_theme_mod ('footer-reddit' ) . '"><i class="fa fa-reddit fa-lg"></i></a></dd>';
codon_social_github

Default variable and output:
$github = '<li><a href="' . get_theme_mod ('footer-github' ) . '"><i class="fa fa-github fa-lg"></i></a></dd>';
codon_social_skype

Default variable and output:
$skype = '<li><a href="' . get_theme_mod ('footer-skype' ) . '"><i class="fa fa-skype fa-lg"></i></a></dd>';
codon_social_rss

Default variable and output:
$rss = '<li><a href="' . get_theme_mod ('footer-rss' ) . '"><i class="fa fa-rss fa-lg"></i></a></dd>';
codon_error_content

Default variable and output:
$error_content = $title . '<article>' . $message . $search . $page_list . '</article>';

Action Reference

codon_before_single_footer

Triggered before the codon_entry_footer() function on single content templates

Example:
add_action ('codon_before_single_footer', 'your_function_name' );

codon_before_page_footer

Triggered before the codon_entry_footer() function on single page templates

Example:
add_action ('codon_before_page_footer', 'your_function_name' );

codon_before_page_content

Triggered right after codon_post_meta() and the closing single page

tag.

Example:
add_action ('codon_before_page_content', 'your_function_name' );

codon_before_single_content

Triggered right after codon_post_meta() and the closing single content

tag.

Example:
add_action ('codon_before_single_content', 'your_function_name' );

codon_before_traditional_header

Triggered before #main-header when the traditional header is selected.

Example:
add_action ('codon_before_traditional_header', 'your_function_name' );

codon_after_traditional_header

Triggered right before .main-navigation-wrap when the traditional header is selected

Example:
add_action ('codon_after_traditional_header', 'your_function_name' );

codon_before_home_content

Triggered right after the opening #content div on the front posts page.

Example:
add_action ('codon_before_home_content', 'your_function_name' );

Function Reference:

Coming Soon

Template Tag Reference:

Coming Soon

Re-usable CSS Classes

Coming Soon

  • http://floydreloaded.com/ Floydreloaded

    Where can I change the color? THX