How to use Tiny Forge and its child themes: a comprehensive guide

After answering many user questions on WordPress support forum, I compiled a comprehensive guide on how to use Tiny Forge WordPress theme and its child themes. I hope it will give you a confident start and encourage you to start your own coding journey!

Quick start guide

General elements

Other theme tweaks

Problems you might face

Why should you consider using a child theme?

To make it easy for you to change the look of your website and to retain the ability to update Tiny Forge parent theme, I recommend using Tiny Forge bundled child theme. New WordPress users do not know how to create a child theme, so for that purpose I included an example of Tiny Forge child theme. You will find it under inc/tinyforge-child-theme-example.zip

Before activating child theme, you have two options: retain the ability to update the child theme or not. Child themes receive updates less frequently, but sometimes they may have new useful functions implemented. First choice (retain the ability to update) will be good for people who change things using only CSS styles. In this case you would activate child theme, but you would not change any actual theme file, but append new CSS styles with the help of a plugin. If you're using popular Jetpack plugin suite, it has a Custom CSS module, other plugins to consider: Simple Custom CSS, Improved Simpler CSS.

With the arrival of new theme version, you could overwrite (or auto-update) theme files, because all your custom CSS styles would be safely stored in the database.

If you plan to make more considerable changes to the theme, I would suggest changing the child theme's name, to avoid it to be auto-updated by mistake (in this case all theme files would be overwritten and you would loose all your changes). Open style.css file and change this line:

Theme Name: Tiny Forge Child

to something like:

Theme Name: Tiny Forge Child Custom

In this scenario you would not see any prompts, indicating that there is an update to the child theme. Instead you would have to check version history log anytime you would see an update for Tiny Forge theme. In case of changes that you would want to be implemented in your custom child theme, you would have to manually check for any new additions by comparing the code and then manually append it to your custom child theme.

Tips and Tricks. Don't know what CSS rules apply to what website element? I suggest using Firefox Inspector (a part of Web Developer Tools in Firefox) to see what styles are affecting the elements. You can activate it with: CTRL+SHIFT+I and select the element you need with the mouse. See this video tutorial about Firefox Inspector.

To install child theme, unzip file inc/tinyforge-child-theme-example.zip and upload this child theme as a separate theme alongside with Tiny Forge parent theme (both themes should be uploaded for child theme to work).

Activate Child theme and you're ready to go! From that point all of your changes will be done in the child theme. If you need to modify a file, but it isn't present in your child theme's folder, just copy it there from the Tiny Forge theme.

As a bonus, Tiny Forge child theme has very nice search field in the top menu area (ported from Twenty Thirteen theme) and two new header images to give you an example on how to change the default header images in the child theme. To activate search field you have to create a menu and assign it as primary, see: Task 3: Theme Customizer options.

Additional resources about child theme tweaking/development, that you might find useful:

Tips and Tricks. Tiny Forge is a mobile-first theme. Because of this, main part of the style.css describes the overall mobile look. Styles provided in media queries at the end of style.css (sections 12.0 - 12.4) introduce changes for other (larger) screen sizes. Try to resize your browser window to see how the theme changes its look in relation to screen/browser window size.

Set up Footer Copyright Widget Area

In WordPress Admin panel go to:

Admin. panel > Appearance > Widgets

expand Footer Copyright Widget Area on the right side, drag a standard Text widget from the left side to the widget area, enter your copyright text in the text field (leave the title field empty):

© 2014 Your Name. All rights reserved

If you would like to support this project, you can add the link to Tiny Forge theme:

© 2014 Your Name. All rights reserved

Customize appearance with Theme Customizer

Go to Theme Customizer and see if you need to change any visual aspects of your site.

Admin. panel > Appearance > Customize

If you already created a menu, assign it as primary in Navigation.

You can create a menu and also assign it as primary in:

Admin. panel > Appearance > Menus

At the top see: "Edit your menu below, or create a new menu." and create a menu if it's a fresh WordPress install. Then at the bottom check "Theme locations: Primary Menu" and save the menu.

If you will choose to upload custom Site Logo (display it next to Site Title and Description), I recommend to size its height to 85px. For info about customizing Site Header please see: Header and logo configuration options.

Icon webfont for social networks (optional)

Note: This section is for new upcoming version of the theme. If you're using Tiny Forge, please check older manual.

New method (an easy one)

Using this method (created by Justin Tadlock) you would create new menu, name it "Social" or other name and assign it as "Social Menu" (the check box at the bottom). Then you can add your social profiles as Links. By default social icons would be displayed on the right side of the footer.

Tiny Forge II - Create Social Menu

If you want to change the way Social menu is generated, check the inc/menu-social.php, also search for Tip85 in style.css and footer.php.

You can add this Social menu in any place of the theme using code:

<?php get_template_part( 'inc/menu', 'social' ); ?>

Currently supported networks:

  • e-mail
  • rss feed
  • behance.net
  • codepen.io
  • digg.com
  • dribbble.com
  • dropbox.com
  • facebook.com
  • flickr.com
  • foursquare.com
  • plus.google.com
  • github.com
  • instagram.com
  • last.fm
  • linkedin.com
  • pinterest.com
  • reddit.com
  • skype.com
  • soundcloud.com
  • spotify.com
  • stumbleupon.com
  • tumblr.com
  • twitch.tv
  • twitter.com
  • vimeo.com
  • vk.com
  • wordpress.org, wordpress.com
  • xing.com
  • youtube.com

"Old school" method (for code wranglers and geeks)

Psst! Even if you're geek, you can use the "easy" method too, your clients will like it ;)

You could use this method also in those cases, when you need to display social icons in widgets and other places. Use standard Text widget in the Main Sidebar widget area (same instructions as with Footer Copyright Widget) with text like this:

<a href="http://address-to-about-me-page" class="icon-webfont social-link fa-pencil"><span class="screen-reader-text">Contact me</span></a> 
<a href="http://address-to-facebook-account" class="icon-webfont social-link fa-facebook-square"><span class="screen-reader-text">Facebook</span></a> 
<a href="http://www.linkedin.com/in/your-profile/" class="icon-webfont social-link fa-linkedin-square"><span class="screen-reader-text">LinkedIn</span></a> 
<a href="http://profiles.wordpress.org/your-wp-name" class="icon-webfont social-link fa-wordpress"><span class="screen-reader-text">WordPress.org</span></a> 
<a href="http://twitter.com/your-twitter-handle" class="icon-webfont social-link fa-twitter"><span class="screen-reader-text">Twitter</span></a> 
<a href="https://plus.google.com/your-g-plus-account-number" class="icon-webfont social-link fa-google-plus-square" rel="author"><span class="screen-reader-text">Google </span></a> 
<a href="http://github.com/your-github-name" class="icon-webfont social-link fa-github"><span class="screen-reader-text">Github</span></a>

Search for Tip86 in style.css to adjust CSS style. Read more about icon webfont implementation.

Take a look at functions.php settings

Open functions.php file in a text editor and find sections:

if you're using Tiny Forge theme alone, check:

5.9 - Add optional meta tags, scripts to head

10.0 - Footer credits - Tip87 - Action Hook implementation example

12.0 - Other functions

if you're using Tiny Forge child theme, check:

1.4 - Footer credits - Tip87 - Action Hook implementation example

2.2 - Add optional meta tags, scripts to head

3.0 - Other functions

Check if you need to enable (uncomment) any of the functions there. If you enabled humans.txt meta tag, open inc/humans.txt file in text editor and update it with your own information.

Tips and Tricks. It is important to mention that Google recognizes humans.txt as additional ownership verification factor in establishing Google authorship of the website. Read more about humans.txt initiative.

Make it look clean (optional)

Personally I'm not a fan of displaying a bunch of meta data on index page or on archive pages. I try to keep it as clean as possible to not mess with readers' attention. Unfortunately I had to enable all that meta info to pass theme evaluation. However it is very easy to fix this ;)

Tiny Forge WordPress theme - clean look
Clean look on the left, original on the right.

To disable entry meta, located below the post in index/archive view, open style.css file in a text editor and search for Tip30, then uncomment next CSS block to hide entry meta section (with author, categories, tags) in the Index page and archive listings.

Maintain fully accessible website (recommended)

As you probably noticed, accessible WordPress themes have special "accessibility-ready" tag. It basically means that this theme produces accessible website on clean WordPress installation. It also means, that after some user actions website might not be fully accessible anymore. That's right, website owners can negatively affect accessibility of their own websites. Here are several precautions and tips to keep your website accessible.

Headings play a big role in providing web accessibility. Knowing that users should use headings in their produced content following main heading structure of a theme. Tiny Forge II users should use headings in posts and pages starting from H2, because H1 is reserved to outline main website document structure. Inside the widgets use headings starting from H3.

Use headings in a consistent manner, eg.

<H2>...
<H2>...
	<H3>...
		<H4>...
<H2>...

But not:

<H1>...
<H2>...
	<H4>...
		<H3>...
<H2>...

Basically, you cannot use H1 and if you start with H2, you can have many H2 headings that are of same importance and if you need to use headings for less important titles, you would go with next number in line: H3, etc. If you would think that visually H4 looks better, you would not use H4 after H2, but instead you would alter the CSS style of H3 to match your needs. This would give you the desired look and would not break the logical structure of a document.

If you will decide to change color and/or background of text elements, always check if new color combination conforms to web accessibility requirements. This requirement is also valid for the states of a text or link: :hover, :focus, :active, :visited.

If you upload images that add value to the content, please do not forget to provide Title description and/or Alt Text description in media uploader. If Alt Text field of media uploader is empty, WordPress will use Title field instead. So at least one of the fields should be provided.

Site

Make whole site wider or narrower

In this example I will alter CSS rules to make site 1140px wide. To achieve this, content area should be 1060px wide.

If you're using Tiny Forge without a child theme, find these style.css file sections and edit the code.

If you're using Tiny Forge with a child theme, copy these snippets of code to child theme's style.css according to section numbers:

/* 3.6 Footer */
footer[role="contentinfo"] {
	max-width: 1060px;
	max-width: 75.714285714rem;
}

/* 12.1 Minimum width of 770 pixels */
@media screen and (min-width: 770px) {
	.site {
		max-width: 1060px;
		max-width: 75.714285714rem;
	}
	/* Compatibility for older IE browsers */
	.ie .site {
		max-width: 1060px;
	}
}

/* 14.1 Tip23 - Properly resize videos... */
.video-wrapper {
	width: 1060px;
	width: 75.714285714rem;
}

Now we have to set new width for header images and max-width for content pictures and videos. If you're using Tiny Forge without a child theme, in functions.php edit the lines:

// 3.10 - Tip07 - Add new image size for custom post/page headers and select default header image.
	add_image_size( 'custom-header-image', 1060, 9999 ); // Unlimited height, soft crop

/**
 * 9.0 - Adjust content width in certain contexts...
 */
function tinyforge_content_width() {

...

		$content_width = 1060;
	}
}
add_action( 'template_redirect', 'tinyforge_content_width' );
endif;

For the child theme, you will have to copy whole tinyforge_setup function from Tiny Forge functions.php and change Section 3.9:

/**
 * 3.0 - Tiny Forge setup...

...

	// 3.9 - Tip07 - Add new image size for custom post/page headers and select default header image.
	add_image_size( 'custom-header-image', 1060, 9999 ); // Unlimited height, soft crop
}
endif; // tinyforge_setup
add_action( 'after_setup_theme', 'tinyforge_setup' );

For the child theme, also copy whole tinyforge_content_width function from Tiny Forge functions.php and change $content_width value:

/**
 * 9.0 - Adjust content width in certain contexts...
 
 ...
 
 $content_width = 1060;
	}
}
add_action( 'template_redirect', 'tinyforge_content_width' );
endif;

To seal the deal, last change will be made in inc/custom-header.php. For the child themes you will have to copy custom-header.php to inc folder from the parent theme. Change just 'width' value:

'width' => 1060,

After all changes were completed, try to upload new header image to see if it is sized and displayed correctly.

Header

How to customize Header and Site Logo

Coming soon! Write a tutorial about header functionality. Add explanation about featured images for pages and posts, and the image size that activates it.

Enable Site Logo for mobile view

By default in mobile view Site Logo is hidden. This is very practical decision - it's impossible to predict the parameters of user-uploaded Logo picture, so to avoid a distorted look, Site Logo is hidden. Nonetheless if you want to enable it, it's just a few CSS lines away. Here you can see style.css code that I use on this site:

/* 3.4.1 Site Header */
/* Tip14 - Site Logo plugin/feature support */
#site-logo-link {
	display: inline;
	float: left;
	padding: 12px;
	padding: 0.857142857rem;
}
#site-title-wrapper {
	float: left;
	padding: 12px 0 24px 12px;
	padding: 0.857142857rem 0 1.714285714rem 0.857142857rem;
}
.site-header h1,
.site-header h2 {
	text-align: left;
}
.site-header h1.menu-toggle {
	text-align: center;
}

This results in a view like this:

Tiny Forge - Site Logo in mobile view

If you want to have a larger Site Logo, that might even span through entire width of mobile view, then make Logo image responsive by adding a couple of CSS lines:

#site-logo-image {
    width: 100%;
}

You might need to add padding and/or margins to make it look perfect ;)

Rotating header images

If you want to have rotating header images, upload several images:

Admin. panel > Appearance > Header > Select Image

then select the option: "Random: Show a different image on each page." All pages and posts that do not have designated Featured Image, will show those header images. Same applies to categories.

Head, header coding Tips (01-20)

Just open related to the tip files in a text editor and search for a tip number, for example "Tip03" to find the code.

  • Tip01 - Properly include (enqueue and/or register) CSS and JavaScript files via functions.php - in child themes
  • Tip01b - Properly exclude (dequeue and/or deregister) CSS and JavaScript files via functions.php - in child themes
  • Tip02 - Optional code to enable favicon (functions.php, favicon.ico) - also in child themes
  • Tip03 - We are people, not machines. Read more at: humanstxt.org. If you enabled humans.txt meta tag, open inc/humans.txt file in text editor and update it with your own information (functions.php, inc/humans.txt) - also in child themes
  • Tip04 - Reminder to enable JavaScript. Tiny Forge uses icon webfont, which will not be rendered properly if JavaScript is disabled (header.php, style.css)
  • Tip05 - Mark main navigation menu items, containing children with special CSS class (style.css)
  • Tip06 - Custom headers for posts and pages (header.php, style.css, also see Tip07)
  • Tip07 - Add new image size for custom post/page headers and select default header image - thanks to Paulwpxp (functions.php) - also in child themes
  • Tip08 - Remove junk from head - disabled by default (functions.php) - also in child themes
  • Tip09 - Remove WordPress version info from head and feeds - better for security reasons - disabled by default (functions.php) - also in child themes
  • Tip10 - Add Twenty Thirteen search form to WordPress nav menu (functions.php, style.css) - in child themes
  • Tip11 - Make site title and site description float (style.css) - in child themes
  • Tip12 - Disable header image for the Front Page Template to have classic Twenty Twelve front page look. Also see Tip63 (style.css) - also in child themes
  • Tip13 - Remove Open Sans (from Google Fonts) as default font (functions.php) - in child themes
  • Tip14 - Site Logo plugin/feature support (header.php, style.css, rtl.css, inc/plugin-compatibility.php)

Top menu

How to create an empty placeholder menu item

Sometimes you want to have a menu item that serves just as a container for sub-items (without linking to any actual pages):

  1. Create a link menu item with any link address (you should enter something there, otherwise WordPress will not let you to create the menu item).
  2. When it is already created, edit it by deleting the link address.

This way you will be able to stack other items under it, but you will not have to create an extra page, sometimes it may be confusing for users too, because it leads them to unnecessary navigation actions that do not provide any information at all. Also you will save some time by not creating a "filler" pages :)

Content

Make content area wider or narrower

If you're using Tiny Forge without a child theme, find these style.css file sections and edit the code.

If you're using Tiny Forge with a child theme, copy these snippets of code to child theme's style.css according to section numbers. CSS rules responsible for content width are located in the section "12.1 Minimum width of 770 pixels":

.site-content {
	float: left;
	width: 65.104166667%;
}

Right next to it you will find CSS rules for the sidebar width. Accordingly, to adjust width of the sidebar you would edit percentage in:

.widget-area {
	float: right;
	width: 30.5%;
}

Display posts on front page only from a featured category

If we selected "latest posts" option for our front page:

Admin. panel > Reading Settings > Front page displays > Your latest posts

by default all newest posts would be displayed. Sometimes it is not the best option, because not all posts have the same "weight". In this case we could create a specific post category, e.g. "Posts on Home Page", assign most important posts to this category and add this code to functions.php (please update the category ID number):

// On the Home page show only the posts from the category "Posts on Home Page" with ID 9
// http://wordpress.org/support/topic/display-only-one-category-on-home-page?replies=5
function tinyforgechild_home_post_queries( $query ) {
  // only homepage and is the main query
  if ($query->is_home() && $query->is_main_query()){
     // display only posts in category with id=9
     $query->set('cat', 9);
     // avoid sticky posts
     // $query->set('post__not_in', get_option( 'sticky_posts' ) );
  }
}
add_action( 'pre_get_posts', 'tinyforgechild_home_post_queries' );

Display featured image thumbnail in archive views (index page, categories, etc.)

To make this theme customization, you have to edit content.php. If you're working with a child theme, copy content.php from Tiny Forge and then right before the <header class="entry-header"> paste this code:

		<?php if ( ! is_single() && ! is_attachment() && ! post_password_required() ) : // Show post thumbnail only under certain conditions ?>
			<?php if ( has_post_thumbnail() ) : ?>
				<div class="entry-thumbnail">
					<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail', array('class' => 'alignright')); ?></a>
				</div>
			<?php endif; ?>
		<?php endif; ?>

Now open style.css and post these CSS rules under section: 4.0 Main content and comment content:

.entry-thumbnail img.wp-post-image {
	/* Image also gets the class "alignright" via content.php */
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
	margin: 4px 0 24px 24px;
	width: auto;
}

If you want to have thumbnail on the left side, change in the content.php snippet:

array('class' => 'alignright')

to:

array('class' => 'alignleft')

And in style.css change:

margin: 4px 0 24px 24px;

to:

margin: 4px 24px 24px 0;

If you want to use bigger thumbnail images, you can change in the content.php snippet:

<?php the_post_thumbnail('thumbnail'

to:

<?php the_post_thumbnail('medium'

Instead of medium you can also use large, full or a custom thumbnail size name that you can create in functions.php - search for the "Tip07".

Display full posts on front page only (Excerpts for Search, Archives and additional pages of Index view)

To make this theme customization, you have to edit content.php. If you're working with a child theme, copy content.php from Tiny Forge and then change this line:

<?php if ( is_search() ) : // Only display Excerpts for Search ?>

to:

<?php if ( is_search() || is_paged() || is_archive() ) : // Display Excerpts for Search, Archives and additional pages of Index view ?>

Set Next and Previous post links to be from the same category as current post

Sometimes you have very distinct categories on your site, e.g. Blog and Events. By default at the bottom of a post the links to Next and Previous posts would be provided chronologically - from any category. Logically if your user is reading an article about event, you would like to display the links to other articles about events. This easy tutorial will show you how to achieve this.

To make this theme customization, you have to edit single.php. If you're working with a child theme, copy single.php from Tiny Forge and then change the lines:

<span class="nav-previous"><?php previous_post_link( '%link', '<span class="meta-nav">' . _x( '&laquo;', 'Previous post link', 'tinyforge' ) . '</span> %title' ); ?></span>
<span class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">' . _x( '&raquo;', 'Next post link', 'tinyforge' ) . '</span>' ); ?></span>

to:

<?php // Set Next and Previous post links to be from the same category as current post - TRUE  ?>
<span class="nav-previous"><?php previous_post_link( '%link', '<span class="meta-nav">' . _x( '&laquo;', 'Previous post link', 'tinyforge' ) . '</span> %title', TRUE ); ?></span>
<span class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">' . _x( '&raquo;', 'Next post link', 'tinyforge' ) . '</span>', TRUE ); ?></span>

Post and page titles: enable HTML code in title

Since v1.5.4, Tiny Forge theme sanitizes title fields. That basically disables HTML code parsing in title field. If you really need this ability, below are the steps to enable HTML in title fields.

A word of caution. Why it is a good idea to leave title fields sanitized? When user enters not correct HTML in the content, it gets automatically fixed by WordPress, of course if it is enabled in Writing Settings under Formatting "WordPress should correct invalidly nested XHTML automatically". But if that would happen in the title field, it would be not fixed, so user could potentially break the design of whole site. It is also possible that in some cases it could affect the security of your site.

If you use Tiny Forge without a child theme, open functions.php in a text editor, find section 5.11 (Change title for protected and private posts...) and in tinyforge_the_title_trim function comment out this line:

// $title = esc_attr($title); // Sanitize HTML characters in the title. Comment out this line if you want to use HTML in post titles.

If you use Tiny Forge with a child theme, open functions.php of a child theme in a text editor, find section 1.3 (Allow HTML in post title...) and uncomment tinyforge_the_title_trim function.

Images: disable border (shadow) on specific images

In case you need to display an image without any borders or shadows, include no-border class for the desired post image. Works for images in the content, as well in the widget areas. Tip24 is located in style.css. Example code:

Mt. Shasta
Look, Ma, no borders!
<img src="http://your-site-url.com/wp-content/uploads/2013/11/image-620x465.jpg" alt="Image descr." width="620" height="465" class="aligncenter size-large wp-image-374 no-border" />

Content coding Tips (21-50)

Just open related to the tip files in a text editor and search for a tip number, for example "Tip03" to find the code.

  • Tip21 - Icon webfont support implementation and examples (style.css, category.php, footer.php)
  • Tip22 - Improve font rendering and fallback in Linux (style.css)
  • Tip23 - Properly resize videos, inserted with oembed (functions.php, style.css)
  • Tip24 - .no-border CSS class - use it in case you need to display an image without any borders or shadows, include no-border class for the desired post image (style.css)
  • Tip25 - Mark the links that will open in a new window with special icon, usually these are the links to external resources (style.css)
  • Tip25b - Disable special icons, that mark the links that will open in a new window (style.css) - only in child themes
  • Tip26 - Print HTML bellow post title with meta information for the current post date/time and author (functions.php, content.php)
  • Tip26b - Print HTML bellow post title with meta information (date/time and author) for the index/archive views in MOBILE and/or NORMAL view (style.css) - also in child themes
  • Tip27 - Hide previous article - next article navigation below the content of a post (style.css)
  • Tip28 - Remove curly quotes in WordPress (functions.php)
  • Tip28b - Enable curly quotes in a child theme (functions.php) - only in child themes
  • Tip29 - Style navigation arrows for post listing (next/previous page navigation) (functions.php)
  • Tip30 - Hide entry meta section, located below the post (with author, categories, tags) in the Index page and archive listing (style.css) - also in child themes
  • Tip31 - Google Fonts support - disabled by default (functions.php) - also in child themes
  • Tip32 - Add shadow to post/page title (style.css) - also in child themes
  • Tip33 - Enable hyphenation of text for article. Please note that automatic hyphenation can reduce accesibility of the theme - it can cause strange pronunciation with screen readers (style.css) - also in child themes
  • Tip34 - Display author info card at the bottom of posts on a single author website - disabled by default (functions.php, style.css) - also in child themes
  • Tip35 - Jetpack Infinite Scroll support (style.css, inc/plugin-compatibility.php)
  • Tip36 - Display post thumbnails in index/archive views (style.css, inc/examples/content-with-thumbnail.php) - can also be used in child themes

Sidebar

Make Sidebar area wider or narrower

Please see the instructions at: Make content area wider or narrower.

Removing Sidebar

To completely remove a Sidebar for all posts, categories and pages - all widgets from the Sidebar Widget Areas in:

Admin. panel > Appearance > Widgets

should be removed and Sidebar will disappear automatically.

If you want to remove a Sidebar for an individual page (this works only for pages, not for posts), in the page edit screen take a look at the Page Attributes menu section on the right side. There you can change a page template. In Template menu select the template named "Full-width Page Template". This should be done for each individual page that you want to use without a Sidebar.

Tips and Tricks. For more customized sidebar control I recommend using a plugin, like: Content Aware Sidebars.

Sidebar coding Tips (51-60)

Just open related to the tip files in a text editor and search for a tip number, for example "Tip03" to find the code.

  • Tip51 - Show children items of Sidebar category/page menu for selected parent category/page only (style.css)
  • Tip52 - Adjust default site layout for normal view (style.css) - also in child themes
  • Tip52b - Change site layout (position of sidebar) for normal view (functions.php, css/layout-sidebar-content.css) - also in child themes
  • Tip53 - Change vertical spacing between lines in Recent Posts widget. If your post titles are rather short, 12px will be a good choice (style.css) - also in child themes

Footer

Hide "Log in" link

To achieve this we need a simple CSS statement placed in style.css at the very end of section 3.6 Footer or at 14.3 Other styles.

#site-admin-link {
    display: none;
}

Footer coding Tips (61-80)

Just open related to the tip files in a text editor and search for a tip number, for example "Tip03" to find the code.

  • Tip61 - Discreet link to WordPress Admin panel in the footer (footer.php, style.css)
  • Tip62 - Add side borders for the middle footer widget - to better separate widgets visually (style.css) - also in child themes
  • Tip63 - Disable footer widgets for the Front Page Template to have classic Twenty Twelve front page look. Also see Tip12 (style.css) - also in child themes

Adding buttons

All related CSS styles you will find in style.css section 2.5. In addition to general button styles, Tiny Forge uses Twitter Bootstrap style buttons. To add simple button, just create a link and apply specific style(s) to it = easy :)

<a href="http://your-button-link.com" title="Your button title" class="btn">Your button text</a>

Bellow you can see examples and what effect each class gives to a button:

class="btn"

class="btn btn-primary"

class="btn btn-custom"

class="btn btn-custom-orange"

class="btn btn-custom-red"

class="btn btn-custom-green"

class="btn btn-custom-black"

Check style.css file for more button styles.

Adding alert messages

All related CSS styles you will find in style.css section 2.10. Tiny Forge uses Twitter Bootstrap style alerts. To add an alert to the post, create a div with specific CSS classes.

<div class="alert alert-success">Your alert message.</div>

Bellow you can see examples and what effect each class gives to an alert:

class="alert alert-success" Please write your comments in the box provided below and it will be posted automatically upon submission. This space allows everyone to engage in a transparent and productive discussion.
class="alert alert-info" Please write your comments in the box provided below and it will be posted automatically upon submission. This space allows everyone to engage in a transparent and productive discussion.
class="alert alert-warning" Please write your comments in the box provided below and it will be posted automatically upon submission. This space allows everyone to engage in a transparent and productive discussion.
class="alert alert-danger" Please write your comments in the box provided below and it will be posted automatically upon submission. This space allows everyone to engage in a transparent and productive discussion.

Links in alerts

Use the .alert-link utility class to quickly provide matching colored links within any alert:

<a href="http://your-alert-link.com" title="Your alert link title" class="alert-link">Your alert link text</a>

Icon webfont

In the theme and CSS style files I provided some examples on how to use icon webfont - search for icon-webfont class name and Tip21 (icon webfont support implementation and examples in style.css, category.php). Also please check: Icon webfont for social networks. CSS class names for other icons may be found in /css/font-awesome.css file and at: Font-Awesome icons (click on each icon to get detailed information).

Load FontAwesome from BootStrapCDN (optional)

Everyone wants website run faster. Just open functions.php and see Section: 5.7b (Section 2.6 in child themes).

Using icon webfont to style bullet list

Code that goes to your post text (in Text mode):

<ul class="list-icon-ok">
	<li>One</li>
	<li>Two</li>
	<li>Three!</li>
</ul>

Basically you create a normal list and add the list-icon-ok CSS class to ul element.

Code that goes to your style.css file (you don't have to copy this particular code, because it is already included by default, check section 14.2 FontAwesome webfont):

ul.list-icon-ok {
	list-style-type: none;
}
ul.list-icon-ok li {
	padding-bottom: 10px;
	padding-bottom: 0.714285714rem;
	text-indent: -16px;
}
ul.list-icon-ok li:before {
	color: #6ba420;
	padding-right: 10px;
	padding-right: 0.714285714rem;
	content: '\f00c'; /* fa-check */
	display: inline-block;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font: normal 20px/1 'FontAwesome';
	vertical-align: text-bottom;
}

How it looks in real life:

  • One
  • Two
  • Three!

Let's try CSS class list-icon-hand-right :

  • One
  • Two
  • Three!

Using icon webfont with CDN caching

Apparently there are some issues displaying icon webfont from CDN cache, especially using FireFox web browser. There are several possible ways how to fix it.

First way is to use BootstrapCDN version of Font Awesome icon font, check Section 5.7b of functions.php (Section 2.6 if you are using a child theme). Most likely you will have to exclude this file, so it will not be loaded by your primary CDN service provider, check your CDN's manual how to do that.

Second way is to use special .htaccess rules, see: Serving Fonts from CDN.

Third way is to modify functions.php and /css/font-awesome.min.css files to avoid using relative paths in @font-face when importing font files. This solution is generously provided by Martin Hawksey, please check his solution @ GitHub: Fix for elusive webfonts for blogs with CDN

Here is a short version of changes you have to make:

functions.php code:

wp_enqueue_style( 'font-awesome-iconfont-style-local', get_template_directory_uri() . '/css/font-awesome.min.css',

schould be changed to:

wp_enqueue_style( 'font-awesome-iconfont-style-local', get_template_directory_uri() . '/css/font-awesome.min.php?url='.urlencode(get_template_directory_uri()),

File /css/font-awesome.min.css should be renamed to /css/font-awesome.min.php and code:

@font-face {
font-family: 'FontAwesome';
src:url('../inc/fonts/fontawesome-webfont.eot');
src:url('../inc/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
	url('../inc/fonts/fontawesome-webfont.ttf') format('truetype'),
	url('../inc/fonts/fontawesome-webfont.woff') format('woff'),
	url('../inc/fonts/fontawesome-webfont.svg#fontawesomeregular') format('svg');

schould be changed to:

@font-face {
font-family: 'FontAwesome';
src:url('<?php echo $ur; ?>/inc/fonts/fontawesome-webfont.eot');
src:url('<?php echo $ur; ?>/inc/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
	url('<?php echo $ur; ?>/inc/fonts/fontawesome-webfont.woff') format('woff'),
	url('<?php echo $ur; ?>/inc/fonts/fontawesome-webfont.ttf') format('truetype'),
	url('<?php echo $ur; ?>/inc/fonts/fontawesome-webfont.svg#fontawesomeregular') format('svg');

Recommended reading: Bulletproof @font-face Syntax

P.S. The CDN fix is not included in the theme by default, because under normal circumstances (not using CDN) it would cause a small speed penalty.

Embedding code in the post

To embed code in the post, first it should be escaped. For this purpose use simple, but effective online tool Postable.

To embed in-line code, just select the escaped text and use editor's code button to get this Bootstrap-style appearance: .sample-class Some small parts of code may be used without escaping, but if you don't know exactly, it's always better to run your code through linked tool, just to be sure, that you will not break your site.

To embed larger chunk of code, wrap all code in:

<pre><code>Your escaped code goes here...</code></pre>

This code appearance is not very fancy and there is no syntax highlighting, but you don't need any plugins, that might slow your website down. Example code:

// Adding CSS file of the Child theme.
wp_register_style( 'tinyforge-child-style', 
get_stylesheet_uri(), 
array(), 
'1.0', 
'all' );

Custom CSS classes

Tiny Forge greatly extends the automatically included CSS classes that make life much easier when you need to customize the look of your site. Extended CSS classes include:

  • HTML .js and .no-js - to handle those specific cases when JavaScript is disabled
  • BODY .list-view - index, archive, category, tag views
  • BODY .singular - single views (posts and pages)
  • BODY - category (or any other taxonomy) class (slug) for single posts
  • BODY - page slug class for pages
  • BODY .full-width - using a full-width layout, when no active widgets in the sidebar or full-width template
  • BODY .template-front-page .has-post-thumbnail .two-sidebars - Front Page template: thumbnail in use and number of sidebars for widget areas
  • BODY .custom-background-empty .custom-background-white - white or empty background color to change the layout and spacing
  • BODY .custom-font-enabled - cstom fonts enabled
  • BODY .has-site-logo - presence of Site Logo
  • BODY .header-image-yes .header-image-no - presence of header image
  • POST .has-thumbnail - non-password protected page with a post thumbnail
  • BODY .footer-widgets - presence of footer widget(s)
  • BODY .single-author - single or multiple authors

Avoiding possible naming conflicts

Custom CSS classes introduce a small chance for naming conflicts, but it doesn't outweigh great benefits of having these extra classes. In unusual circumstances post/page or category could be named as some other existing CSS class. To prevent it, I compiled a list of the category or post/page names to avoid:

  • attachment
  • custom-background
  • custom-font-enabled
  • full-width
  • footer-widgets
  • has-thumbnail
  • has-post-thumbnail
  • header-image
  • list-view
  • single-author
  • singular
  • template-front-page
  • two-sidebars

Custom Action Hooks

Tiny Forge II integrates Theme Hook Alliance hooks and ads one more action hook example, see Tip87.

Suggested reading about action hooks:

Customizing WordPress Themes with Action Hooks
Adding Custom WordPress Hooks
Function Reference/add action

Custom Action Hooks are listed chronologically as they appear in the theme document structure:

  • tha_html_before
  • tha_body_top
  • tha_head_top
  • tha_head_bottom
  • tha_header_before
  • tha_header_top
  • tha_header_bottom
  • tha_header_after
  • tha_content_before
  • tha_content_top
  • tha_entry_before
  • tha_entry_top
  • tha_entry_bottom
  • tha_entry_after
  • tha_comments_before
  • tha_comments_after
  • tha_content_bottom
  • tha_content_after
  • tha_sidebars_before
  • tha_sidebar_top
  • tha_sidebar_bottom
  • tha_sidebars_after
  • tha_footer_before
  • tha_footer_top
  • tinyforgeii_credits
  • tha_footer_bottom
  • tha_footer_after
  • tha_body_bottom

Theme localization (translations)

Attention Tiny Forge translators! Most likely you will be using Poedit software to prepare the translation files. When you will be updating your translation, please use the menu option:

Top menu > Catalog > Update from POT file...

and select included tinyforge.pot file. This is necessary, because just by scanning sources you will not get all strings that are required for the full theme translation.

An easy way to prepare your first Tiny Forge translation

Tiny Forge is based on Twenty Twelve code. If you want to prepare translation for your language, use Tiny Forge POT file as a base and use Twenty Twelve translation POT file as a reference for the translation of text strings. Twenty Twelve is part of default WordPress installation package so you might find it here: translate.wordpress.org/projects/wp/dev/twentytwelve

Other resources you might find useful:

Additional coding Tips (81-100)

Just open related to the tip files in a text editor and search for a tip number, for example "Tip03" to find the code.

  • Tip81 - Completely disable the Post Formats UI in the post editor screen - disabled by default (functions.php) - also in child themes
  • Tip82 - No more jumping for read more link - disabled by default (functions.php) - also in child themes
  • Tip83 - Make focused input fields glow (style.css)
  • Tip84 - Remove error message on the login page - better for security reasons - disabled by default (functions.php) - also in child themes
  • Tip85 - Add Social Media Menu (optional) (footer.php, style.css, inc/menu-social.php)
  • Tip86 - Style social icons in the sidebar (optional) (style.css) - also in child themes
  • Tip87 - Action Hook implementation example (footer.php, functions.php) - also in child themes

LESS dynamic stylesheet language support

Welcome to rapid development age - change the look and feel of your site in minutes! LESS support is provided via child themes, file located at: /css/style.less.

LESS adds much needed dynamic properties to CSS. It introduces variables, operations, function-like elements, even JavaScript into the mix. It will make your life hassle free by enabling you to write stylesheets with a modular mindset.

LESS is a superset of CSS. This means that all CSS code is valid LESS code but there are additional elements in LESS which would not be valid in CSS. This is great because your existing CSS is already valid LESS code, minimizing the learning curve to using LESS.

So how does this "rapid development" happen, you may ask. Take a look at the snippet of style.less file:

@mobile-menu-text-color: #fff; // white
@mobile-menu-background-color: #3a3a3a; // dark grey
@mobile-menu-background-color-hover: #474747; // grey
@mobile-menu-background-color-current-item: #117bb8; // blue

@site-title-color: #333; // dark grey
@site-title-color-hover: #fc9f00; // orange

@body-background-color: #e6e6e6; // grey - starts from minimum width of 960 pixels
@body-text-color: #333; // dark grey
@body-link-color: #0066cc; // standard blue
@body-link-color-visited: #800080; // standard purple
@body-link-color-hover: #fc9f00; // orange

@entry-title-color: #333; // dark grey
@entry-title-color-hover: #fc9f00; // orange

As you can see, from the very beginning you are presented with a clear list of many visual and functional aspects of the theme. You don't have to search whole style sheet to find the code, in 5 minutes you can cardinally change your theme!

Don't know how to use LESS dynamic stylesheet language? Start reading here: Get Into LESS: the Programmable Stylesheet Language.

Also see this video about LESS and other CSS preprocessors: CSS preprocessors with Jonathan Verrecchia.

Check the GUI compilers that use LESS. I prefer WinLess, because it uses latest version of Less.js and has clear compiler error messages.

Do not forget to replace original style.css file with the generated one or set the output path of the compiler to your main child theme folder, so original style.css file would be overwritten automatically.

Problems you might face

Cannot select a template for your WordPress page

Template option might be even missing from the edit screen. In my experience it is not theme related.

First, check if default WordPress theme is installed (in this case it would be Twenty Fourteen). Activate default theme and then try to select any page template. After that revert back to your theme and since then everything should work normally.

Also try to see if you cannot select a template from page edit screen and from general Pages screen where you can do "Quick Edit" and select template there.

Need personalized support? Please contact me here!