Since switching my blog from Blogger to WordPress I’ve been struggling with a new design. I’m pretty savvy with the coding, but if it’s one thing I’m not it’s a designer. Reluctant though I was to use a pre-built theme template I came across the one I’m using now and couldn’t resist. It’s simple yet elegant and in my opinion far superior to anything I’ve seen both in design and functionality.
Of course a template can’t cater for everyone’s needs and I’ve amended the code a bit to suit mine. One particular change I made was the way in which post excerpts are displayed. The theme uses the the_excerpt() function which either uses an explicit excerpt or the first 55 words of the post if one is not provided. I much prefer using WordPress’s <!––more––> quicktag in my posts in conjunction with the the_content(‘Read More’) function.
I could have simply changed the code in the appropriate files to achieve the desired result, but the theme comes with many configurable options by way of an admin panel. So this is a two-step process. The first step is to add a configuration option to the theme’s admin panel. The second is to change the appropriate files to evaluate this new option and use either the_excerpt() function or the the_content(‘Read More’) function accordingly.
1. Adding a Custom Configuration Option to the Theme’s Admin Panel
Open the file lib/admin/admin-interface.php and locate the following code block:
<div id="slider" class="wrap"> <ul id="tabs"> <li><a href="#generalsettings"><?php echo 'General Settings'; ?></a></li> <li><a href="#homepage"><?php echo 'Homepage'; ?></a></li> <li><a href="#blog"><?php echo 'Blog'; ?></a></li> <li><a href="#sidebar"><?php echo 'Sidebar'; ?></a></li> <li><a href="#footersettings"><?php echo 'Footer'; ?></a></li> <li><a href="#navsettings"><?php echo 'Navagation'; ?></a></li> </ul>
After the final <li></li> tag add this line:
<li><a href="#customsettings"><?php echo 'Custom'; ?></a></li>
Opening the theme’s admin panel will reveal a new tab named Custom where the new configuration option will be placed. The resulting code should look like this:
<div id="slider" class="wrap"> <ul id="tabs"> <li><a href="#generalsettings"><?php echo 'General Settings'; ?></a></li> <li><a href="#homepage"><?php echo 'Homepage'; ?></a></li> <li><a href="#blog"><?php echo 'Blog'; ?></a></li> <li><a href="#sidebar"><?php echo 'Sidebar'; ?></a></li> <li><a href="#footersettings"><?php echo 'Footer'; ?></a></li> <li><a href="#navsettings"><?php echo 'Navagation'; ?></a></li> <li><a href="#customsettings"><?php echo 'Custom'; ?></a></li> </ul>
Next, open the file lib/admin/admin-options.php and at the very end locate the following code block:
array( "name" => "Excluded/Included pages from menu.", "desc" => "The Selected pages will will not show up in the menu.<br /> If you exclude a page with sub pages both will be excluded from the menu. ", "id" => "show_hide_pg", "std" => "", "type" => "exclude_include_checkbox", "options" => $getpagnav), array( "type" => "close"), array( "type" => "submit"), array( "type" => "closetab"),
Immediately below this code block add:
array( "name" => "Custom Settings (not included as part of the original theme options)", "id" => "customsettings", "type" => "opentab"), array( "type" => "title_h2"), array( "name" => "Display blog posts using <!--more--> Quicktag or Excerpts on the front page.", "desc" => "Honour <!--more--> Quicktag", "desc2" => "Display Excerpt", "value" => "1", // If "Honour <!––more––> Quicktag" is selected then $custom_use_more_quicktag is true. "value2" => "0", "id" => "custom_use_more_quicktag", "type" => "radio"), array( "type" => "close"), array( "type" => "submit"), array( "type" => "closetab"),
Line 336 defines the name of the new configuration option, custom_use_more_quicktag, that will be evaluated when the posts are displayed. Selecting the Custom tab in the theme’s admin panel will reveal the new configuration option.
New custom settings tab in inFocus theme's admin panel
At this point custom_use_more_quicktag doesn’t exist as an option in the WordPress database until Save changes is selected from the inFocus > Custom tab. It is then appended to the existing option_name > infocus_general_settings of the xx_options table in the WordPress database.
2. Changing the Theme Files to Evaluate the Custom Configuration Option
After creating the new custom configuration option, the second step is to amend the code in the appropriate theme files so that blog posts are displayed according to the admin user’s preference.
The changes detailed below need to be made to all 3 of these files:
- archive.php
- search.php
- lib/includes/template-blog.php
Add this code block to the top of the file:
<?php
// Source: http://codex.wordpress.org/Template_Tags/the_content#Overriding_Archive.2FSingle_Page_Behavior
if ($custom_use_more_quicktag) {
global $more;
$more = 0;
}
?>
This code is required to ensure that WordPress honour’s the <!––more––> quicktag if that option is selected. You can read more about it here.
Next, locate this code block:
<div class="entry"> <?php the_excerpt(); ?> </div> <a class="button_link" href="<?php the_permalink(); ?>"><span>Read More</span></a>
And replace the entire code block with this:
<div class="entry">
<?php
if (!$custom_use_more_quicktag) {
the_excerpt();
} else {
the_content("<span class='button_link'>Read More</span>");
};
?>
</div>
<?php if (!$custom_use_more_quicktag) { ?>
<a class="button_link" href="<?php the_permalink(); ?>"><span>Read More</span></a>
<?php } ?>
That’s all there is to it. Depending on the configuration option setting, blog posts on the front page will now be displayed as either excerpts or using the <!––more––> quicktag.
Please note that if you select Honour <!––more––> Quicktag in Custom Settings but don’t include the <!––more––> quicktag in a post, the whole of that post will be displayed on the front page.
Tested with WordPress 2.9.2 & 3.0 and inFocus 1.3
Steve:
Great article, I’ve bookmarked it.
When you get a moment, I’d love to see another UPDATE note as you did in March 2010 to bring us up to Jan 1, 2014. I’m a WP newb who’s trying to recreate a Joomla based site into WP so I can understand its functioning better. I’ve been studying Infocus and as S2Member recommends it. It seems to have many more capabilities than most themes.
Please consider an update to this excellent article.
Domo arigato!
どうもありがとうございました。
Jim
@Jim
どういたしまして
Dōitashimashite
I’ve not used inFocus for a while now. This will work with versions up to v1.6, but for v2.x and later I believe there’s a configuration option to use either the_excerpt() or the_content().
Regards, Steve
Hi, I am a newbie when it comes to these things, this is my first ever website I built, it is for my painting business. Anyhow I was wondering, do you know what I would need to do to get the “Leave a reply” form onto my blog index page? I have it on there right now but it doesn’t function. Any help at all is appreciated.
Thanks
Adam
Hi Adam,
It looks like your using the HTML version of inFocus and not the WordPress version. You’d be better off asking in the inFocus forums . Hope you get it fixed.
Reagrds, Steve.
Steve, I don’t have words to thank you, you really saved me from an awful customer who hired me to customize the template. If you’ll ever come to Rome, Italy, know that you’ll have a full authentic roman dinner paid!!! 🙂
Hi DeepVoid,
Glad you found it useful.
…know that you’ll have a full authentic roman dinner paid!!!
Thanks. I may just take you up on that. 🙂
Regards, Steve.
Steve,
This info is very helpful but I’m struggling with step two. Where do I find the liles to make the changes?
The changes detailed below need to be made to all 3 of these files:
* archive.php
* search.php
The third one is pretty obvious but can’t find the right code for the top two. Any help would be greatly appreciated.
Thanks,
Robert
Robert,
In inFocus v1.6 the above code block can be located beginning on line 200 in archive.php and line 164 in search.php.
Regards, Steve.
Ok, I was wondering how much work it would take to have my blog have the news paper feel to it… i may have to outsource 🙂 as I have no clue when it comes to coding lol
Have a gr8 day Steve
QS,
…how much work it would take to have my blog have the news paper feel to it
Looking at the FAQs it seems you can have a 5-column layout.
Regards, Steve.
Hey Steve,
Just an update here, received rather rapid response from webtreats >>> got to do exactly what I was looking to do 🙂
I have one question for you though… have you ever tried altering the actual layout of the blog page?
Hi QS,
Glad you’ve got it working.
…have you ever tried altering the actual layout of the blog page?
Not really. I changed the blog image dimensions and the number of columns in the footer. I don’t know if they count.
Regards, Steve.
Hi Steve,
Thank you will just give it a shot… Kind Regards 🙂
Hi, how are you?
I recently purchased this theme i must say its awesOME! I have a quick question regarding the home page slider. How can I deactivate it? I want to have it look like this page http://themes.mysitemyway.com/infocus/pages/full-width/
I have copied the code, but I have no clue as to where to place it… Please advice
Thank you in advance
Hi QS,
….home page slider. How can I deactivate it?
I don’t know if this is possible or not. My front page doesn’t show the slider because in WordPress it’s set to a show a static page named Blog. I think this is similar to how the developers have achieved the effect in the page you linked.
You’d do better contacting the developers here or by email.
Sorry I can’t be of more help.
Regards, Steve.
Dear Steve
TanQ 4 your advise… I used the_excerpt(), as the inFocus developers originally intended and special excerpt 4 each post, and the problem has been solved 🙂
But there is another question. In one of my specific pages that I made it from archive.php template, I want to show all the content in the index page! I can do that, but at the end of all posts, there is a Read More button… How can I remove that?
you can see that, here: http://www.bornaeon.com/category/daily-notes/
TanQ again
BornA
IIf you’re using the_content() in archive.php then simply removing the <!−−more−−> quicktag from your posts will remove the Read More link.
However, if you’re using the_excerpt() like the original inFocus code below ….
…. you’ll need to add a condition to stop the Read More link appearing for the Daily Notes category like so:
<div class="entry"> <?php the_excerpt(); ?> </div> <?php if (!is_category('daily-notes')) { ?> <a class="button_link" href="<?php the_permalink(); ?>"><span>Read More</span></a> <?php } ?>Regards, Steve
yes… here you are:
http://www.bornaeon.com/blog/
you can see my problem, in the first post: Rainy Book…
In some posts, I want to put an image on top of my post, but don’t want to show that in the first page and I need a tag that show my post content without that image!
tanq
Hi BornA,
I see what you mean. The the_content() tag shows all post content, including images, up until the <!−−more−−> quicktag on the front page. As far as I’m aware, there’s no way around this.
You could go back to using the the_excerpt(), as the inFocus developers originally intended, which doesn’t include images. If you want more control over what is shown for the_excerpt(), you can manually type an excerpt for each post. You may want to take a look at this.
Hi.
That was a great work. TanQ so much 🙂
but there is a problem here…
I have an image on top of my some posts, and after that are my texts. I want to show only text with MORE option, and after clicking Read more… button, can see whole the post in a new page… but with this solution all of my posts that have an image on top, will display their image in my first page, too… How can I fix that?
tanq again
Hi BornA,
Do you have a link to your site?
Hi JC,
Not sure I follow. In the comment above yours I’ve shown the HTML and CSS needed to get the 4-column footer. Or maybe I’ve misunderstood your question.
Steve.
How do you set the width for each of those footer sections?
Hi Kevin,
Open the footer.php file and on or around line 9 locate the code block that begins with <div class="inner"> and ends on or around line 81 with </div><!– inner –>.
Replace the entire code block with this:
<!-- 4 Columns WITHOUT eMail Contact --> <div class="inner"> <div class="one_half"> <div class="content"> <div class="one_fourth"> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(2) ) : ?> <div class="widget widget_recent_entries" id="recent-posts-1"> <h3 class="widgettitle">Recent</h3> <ul> <li><a title="Lorem sit amet" href="#">Lorem sit amet </a></li> <li><a title="Morbi vel est nunc" href="#">Morbi vel est nunc </a></li> <li><a title="Sed id est id tellus" href="#">Sed id est id tellus </a></li> <li><a title="Fusce quis nunc" href="#">Fusce quis nunc </a></li> <li><a title="Suspendisse vestibulum mollis" href="#">Suspendisse vestibulum mollis </a></li> </ul> </div> <?php endif; ?> </div> <div class="one_fourth last"> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(3) ) : ?> <div class="widget widget_archive" id="archives-1"> <h3 class="widgettitle">Archives</h3> <ul> <li><a title="February 2010" href="#">February 2010</a></li> <li><a title="January 2010" href="#">January 2010</a></li> <li><a title="December 2009" href="#">December 2009</a></li> <li><a title="November 2009" href="#">November 2009</a></li> </ul> </div> <?php endif; ?> </div> </div> <!-- content --> </div> <!-- one-half --> <div class="one_half last"> <div class="content"> <div class="one_fourth"> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(4) ) : ?> <div class="widget widget_meta" id="meta-1"> <h3 class="widgettitle">Meta</h3> <ul> <li><a href="#">Log in</a></li> <li><a title="Syndicate this site using RSS 2.0" href="#">Entries <abbr title="Really Simple Syndication">RSS</abbr></a></li> <li><a title="The latest comments to all posts in RSS" href="#">Comments <abbr title="Really Simple Syndication">RSS</abbr></a></li> <li><a title="Powered by WordPress, state-of-the-art semantic personal publishing platform." href="#">WordPress.org</a></li> </ul> </div> <?php endif; ?> </div> <div class="one_fourth last"> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(5) ) : ?> <div class="widget widget_categories" id="categories-1"> <h3 class="widgettitle">Categories</h3> <ul> <li class="cat-item cat-item-3"><a title="View all posts filed under Portfolio" href="#">Portfolio</a></li> <li class="cat-item cat-item-1"><a title="View all posts filed under News" href="#">News</a></li> <li class="cat-item cat-item-1"><a title="View all posts filed under Recent Works" href="#">Recent Works</a></li> </ul> </div> <?php endif; ?> </div> </div> </div> <div class="clearboth"></div> </div><!-- //inner -->As I’ve changed the classes of some of the <div> tags you’ll also need to add this CSS to the style.css file on or around line 301 just after .last{margin-right:0 !important;clear:right;}:
/* used with 4 columns, no email */ #footer .one_half {width: 450px; margin-right: 30px;} #footer .one_half.last {margin-right: 0; margin-left: 30px;} #footer .one_half .one_fourth {width:195px; margin-right: 30px;} #footer .one_half .one_fourth.last {margin-right: 0; margin-left: 30px}Hope this helps.
Steve.
Steve,
Thanks for the info here. I also have used inFocus and have a question: How did you customize the footer on the bottom here? I just want 4 columns as well without the contact section. Any assistance would be greatly appreciated!
Kevin
San Diego, CA USA
Thanks Lita. You and the folks at WebTreats have done an excellent job with this theme.
Thank you so much for purchasing inFocus and for sharing your invaluable customization!!!