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!
Please use Tiny Framework theme for all new projects. Tiny Framework is available to download @WordPress.org. Latest development version can be downloaded here.
If you would like to migrate your website to Tiny Framework, please see Tiny Forge to Tiny Framework migration guide.
All articles are being rewritten for the new theme, and theme guide will have parts from both old and new themes for some time - I will try to indicate it. Many things are same for both Tiny Forge and Framework, but some tutorials that are specific to Tiny Forge can be found here.
Icon webfont for social networks (optional)
"Old school" method (for code wranglers and geeks)
If you want to use icon webfont for social networks (as you can see it in the theme screenshot and on my website), 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 el-icon-user" title="Contact me"></a>
<a href="http://address-to-facebook-account" class="icon-webfont el-icon-facebook" title="Facebook"></a>
<a href="http://www.linkedin.com/in/your-profile/" class="icon-webfont el-icon-linkedin" title="LinkedIn"></a>
<a href="http://profiles.wordpress.org/your-wp-name" class="icon-webfont el-icon-wordpress" title="WordPress.org"></a>
<a href="http://twitter.com/your-twitter-handle" class="icon-webfont el-icon-twitter" title="Twitter"></a>
<a href="https://plus.google.com/your-g-plus-account-number" class="el-icon-webfont icon-googleplus" title="Google " rel="author"></a>
<a href="http://github.com/your-github-name" class="icon-webfont el-icon-github-text" title="Github"></a>Read more about icon webfont implementation.
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: #8DC919;
padding-right: 10px;
padding-right: 0.714285714rem;
content: "\e67a"; /* el-icon-ok */
display: inline-block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font: normal 20px/1 'Elusive-Icons';
vertical-align: text-bottom;
}How it looks in real life:
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 special .htaccess rules, see: Serving Fonts from CDN
Second way is to modify functions.php and /css/elusive-webfont.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( 'elusive-iconfont-style', get_template_directory_uri() . '/css/elusive-webfont.css',schould be changed to:
wp_enqueue_style( 'elusive-iconfont-style', get_template_directory_uri() . '/css/elusive-webfont.php?url='.urlencode(get_template_directory_uri()),File /css/elusive-webfont.css should be renamed to /css/elusive-webfont.php and code:
@font-face {
font-family: 'Elusive-Icons';
src:url('../inc/fonts/Elusive-Icons.eot');
src:url('../inc/fonts/Elusive-Icons.eot?#iefix') format('embedded-opentype'),
url('../inc/fonts/Elusive-Icons.ttf') format('truetype'),
url('../inc/fonts/Elusive-Icons.woff') format('woff'),
url('../inc/fonts/Elusive-Icons.svg#Elusive-Icons') format('svg');schould be changed to:
@font-face {
font-family: 'Elusive-Icons';
src:url('<?php echo $ur; ?>/inc/fonts/Elusive-Icons.eot');
src:url('<?php echo $ur; ?>/inc/fonts/Elusive-Icons.eot?#iefix') format('embedded-opentype'),
url('<?php echo $ur; ?>/inc/fonts/Elusive-Icons.woff') format('woff'),
url('<?php echo $ur; ?>/inc/fonts/Elusive-Icons.ttf') format('truetype'),
url('<?php echo $ur; ?>/inc/fonts/Elusive-Icons.svg#Elusive-Icons') 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.
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;
}
}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
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:
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 😉
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 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".
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( '«', 'Previous post link', 'tinyforge' ) . '</span> %title' ); ?></span>
<span class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">' . _x( '»', '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( '«', 'Previous post link', 'tinyforge' ) . '</span> %title', TRUE ); ?></span>
<span class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">' . _x( '»', 'Next post link', 'tinyforge' ) . '</span>', TRUE ); ?></span>Big thanks to the contributors!
Theme development
- leejosepho - Idea on footer widget stacking improvement, ie.css fix.
- Martin Hawksey - Fix for elusive icon webfont with CDN caching.