Cape Ealing

the options theme – shadow child theme (which provides the template for this site) is designed by justin tadlock at themehybrid.  i have been seriously impressed with it.  delighted in fact.  i just wanted, though, to list the amends i’ve made to it (in case others want to make similar changes).  these won’t make sense to those who don’t use this theme but for those who do…

1.  remove the categories above the “Post Blocks”.  I commented out the header section in the post-blocks.php file (found in themes/options/includes/post-blocks.php). Comment out the line beginning:

h2 class="section-header"

2.  wanted to make the information pane that pops up in the features gallery transparent (otherwise it interferes with the pics).  just edit slideshow.css (found in optionslibraryjscss).  change the background in slideInfoZone to the following:

.jdGallery .slideInfoZone
{
position: absolute;
z-index: 10;
margin: 0px !important;
left: 0px !important;
bottom: 0px !important;
height: 60px !important;
background: transparent;
color: #fff;
text-indent: 0;
overflow: hidden;
padding: 10px;
width:575px;
}

3. I used the lightbox equivalent for mootools (slimbox). downloaded as per JT’s options theme guide.

4. Changed the hyperlinks that are displayed when an image is within a post. Originally, the link opened a new folder for each image. Instead, I wanted the link for each individual image in a post to simply open the post itself. This was necessary to ensure the milkbox function worked. So in wp-includes/link-template.php I amended the function get_attachment_link($id = false). the change was this:

// $link = user_trailingslashit( trailingslashit($parentlink) . $name );
$link = $parentlink;

5. changed the size of code in stylesheet.css

/* Code */
//pre, code, pre code { font-size: 1.1em; }
pre, code, pre code { font-size: 0.9em; }

6. removed the lightbulb from the features gallery. Go to: options/library/js/css/slideshow.css and then comment out as follows:

/*.withArrows a.open:hover { background: url('images/open.png') no-repeat center center; }

* html .withArrows a.open:hover { background: url('images/open.gif') no-repeat center center;
	filter:alpha(opacity=80); }
*/

/* Gallery Sets */

7. Added the slide left feature for the front page images. As here.

8. Image size in slimbox: (a) height of 480 pixels keeps all within ordinary screen; (b) 580 pixels and whole of picture is contained but no description; (c) 9×13 inches and it takes the entire screen but keeps ‘prev’ and ‘next’ tags.

9. Changed the excerpts file to include only those posts with ‘highlight’ as a key, then order by the value of that key: see options/includes/excerpts.php. Also commented out the final navigation section.

//next line is new
query_posts('meta_key=highlight&orderby=meta_value&order=ASC');

9b. Later amended the ‘orderby’ as follows:

//next line is new
query_posts('meta_key=highlight&orderby=date&order=DESC');

10. changed tabs to lowercase in options/widgets/tabs.php

11. at this point i made a fair number of changes to the way categories are handled on this site. see separate post.

12. Added an ‘is_category’ question to the breadcrumb to get a breadcrumb effect for category viewing. Breadcrumb is in wp-content/themes/options/library/functions/template-functions.php:

function breadcrumb($crumbs = true, $title = 'location', $separator = ' / ') {
    global $post;
?>
    <div class="breadcrumb section">
    <?php
        if($title !== 'location') echo $title;
        else _e('location','options');
    ?>:
        <a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php _e('home','options'); ?></a>
    <?php
        if(is_single()) :
                        echo $separator;
            the_category(' / '); echo ' ' . $separator . ' ';
                the_title();
        elseif(is_page()) :
                        echo $separator;
            $parent_id = $post->post_parent;
            $parents = array();
            while($parent_id) :
                $page = get_page($parent_id);
                if($params["link_none"]) $parents[]  = get_the_title($page->ID);
                else $parents[]  = '<a href="'.get_permalink($page->ID).'" title="'.get_the_title($page->ID).'">'.get_the_title($page->ID).'</a> ' . $separator . ' ';
                $parent_id  = $page->post_parent;
            endwhile;
            $parents = array_reverse($parents);
            foreach($parents as $val) :
                echo $val;
            endforeach;
                the_title();
        elseif(is_category()) :
                        $cats = get_the_category();
                        $i=0;
                        while ($cats[$i]->cat_name != single_cat_title("", false)){
                        echo $separator;
                        echo '<a href="' .get_category_link($cats[$i]) . '">' .$cats[$i]->cat_name. '</a>';
                        $i++;
                        }
                        echo $separator;
                        echo $cats[$i]->cat_name;
        endif;
                ?>
    </div>
<?php
}

13. changed the options/single.php to refer to ‘filed in’ not categories at the end of each post. Also amended wp-content/themes/options/includes/excerpts.php the same way.

14. Then need to find a way of ensuring that if click ‘gallery’ category that it not show list of gallery posts but goes to ‘gallery’ instead. think I need that for gallery and bluemirror only. well, perhaps also a way of having introductory section for ‘mount / electronics’ etc. can i see if ‘category = a page’ and if so then goto that page?

15. Quick change to the css stylesheet to put a bit of spacing between the images. From section below removed “text-transform: uppercase;”:

/* Images */
img, .post img { padding: 3px; background: #222; border: 1px solid #333; margin-left: 10px; margin-right: 10px; margin-bottom:5px; margin-top:5px;}
a img { border: none; }

16. Need to hard-code the page headers (to allow ‘gallery’ to point to a category and capeMirror to point to a page). See http://themehybrid.com/support/topic/override-parent-theme-php-file-using-child-theme#post-8452 Change the function op_page_nav() in wp-content/themes/options/library/functions/filters.php.

17. Then change the stylesheet to remove capitals from page lists at top

/* Main and sub-navigation */
#navigation, #sub-navigation { float: left; text-transform: uppercase; letter-spacing: .03em; text-align: left; }

18. Wanted the category pages (ie all posts in ‘gallery’) to look identical to the excerpts that are included on the front page: include date, category and tag information. So, copied across the missing code from wp-content/themes/options/includes/excerpts.php to wp-content/themes/options/category.php. And took out ‘No Comments’ when there are no comments. Copied all this across to wp-content/themes/options/archive.php (archives) and wp-content/themes/options/tag.php (tags)

19. Changed navigation pages in cape/wp-content/themes/options/functions.php

<?php
function my_custom_nav() { ?>
	<ul id="nav">
<li class="page_item<?php 
if(is_home()){echo ' current_page_item';}
?>"><a href="<?php bloginfo('url'); ?>" title="cape ealing">Home</a></li>

<li class="page_item<?php 
if(in_category('gallery') && !is_page_template('archives.php') && !is_home()){echo ' current_page_item';}
?>"><a href="<?php bloginfo('url');?>/category/gallery/" title="gallery"><span>GALLERY</span></a></li>

<li class="page_item<?php 
if((in_category('capemirror') or is_page('capemirror')) && !is_home()){echo ' current_page_item';}
?>"><a href="<?php bloginfo('url');?>/capemirror/" title="capeMirror"><span>capeMIRROR</span></a></li>

<li class="page_item<?php 
if(in_category('equipment') && !is_page_template('archives.php') && !is_home()){echo ' current_page_item';}
?>"><a href="<?php bloginfo('url');?>/category/equipment/" title="equipment"><span>EQUIPMENT</span></a></li>

<li class="page_item<?php 
if(in_category('blogging') && !is_page_template('archives.php') && !is_home()){echo ' current_page_item';}
?>"><a href="<?php bloginfo('url');?>/category/blogging/" title="blogging"><span>BLOGGING</span></a></li>

<li class="page_item<?php 
if(is_page_template('archives.php')){echo ' current_page_item';}
?>"><a href="<?php bloginfo('url');?>/archives/" title="archives"><span>ARCHIVES</span></a></li>
 
<li class="page_item<?php 
if(is_page('about')){echo ' current_page_item';}
?>"><a href="<?php bloginfo('url');?>/about/" title="about"><span>ABOUT</span></a></li>

<!--<?php wp_list_pages('title_li=&sort_column=menu_order'); ?>-->
	</ul>
<?php }
	add_filter( 'op_main_nav', 'my_custom_nav' );
?>

20. commented out the list formatting to enable the utilised syntaxhighlighter Google Code project by Alex Gorbatchev to work,

21. Amends to options/includes/features-gallery.php to remove the need for a particular tag. Would like to change the ‘orderby’ but seems to be limited to just four options.

	$posts_wanted = $settings['features_gallery_posts'];
//	if($settings['features_gallery_cat']) $query_var = 'category_name=' . $settings['features_gallery_cat'];
//	elseif($settings['features_gallery_tag']) $query_var = 'tag=' . $settings['features_gallery_tag'];
        $query_var = 'meta_key=featuregallery&orderby=name&order=ASC';
//      NB: can only orderby : post_date, title, category, author, name
	query_posts("$query_var&showposts=$posts_wanted");

22. Took out the ‘slimbox’ javascripts for the home page (it never uses slim box) in themes/options/functions.php. Just trying to keep things fast.

add_action('op_head', 'slimbox_js');

function slimbox_js() {
	wp_enqueue_script('mootools', get_bloginfo('template_directory') .'/library/js/mootools.js', false, '1.1.1');
if (!is_home()){
	wp_enqueue_script('slimbox', 'https://capeealing.com/wp-content/themes/shadow/js/slimbox.js', array('mootools'), '2.0');
}
}
add_action('wp_head', 'slimbox_css');

function slimbox_css() {
if (!is_home()){
	wp_enqueue_style('slimbox_css', 'https://capeealing.com/wp-content/themes/shadow/js/css/slimbox.css', false, false, 'screen');
	wp_print_styles(array('slimbox_css'));
}
}

23. Then decided that the ‘capeMirror’ pages needed to have a white background to make sure they are readable. So these amends to the style.css (with the php amends described within it).

/* 
Extracted this from the 'Sections and posts' list above
Then in category.php and page.php made sure that the div class was changed to class="post blackbox"
and in the single.php made the 'post' tag conditional.
*/

#content .post{
	overflow: hidden;
	width: 568px;
	margin: 0 0 10px 0;
	padding: 10px 0;
}

.blackbox{
	background: #323232;
	}

.whitebox{
	background: #EEEEEE;
	}

#white_post { background: #EEEEEE; color: #000000; }
#white_post a { color: #1660c0; }
#white_post a:hover { color: #D17512; }
#white_post h4 { color: #D17512; }
#white_post img { padding: 1px; background: #3d3b3b; border: 1px solid #3d3b3b; }

The category.php and page.php files now look like this:

The single.php has a conditional phrase as follows:

[...]