Mostly about my amusement

Tag: Themify (page 1 of 1)

Jetpack Carousel for Themify themes

This is probably documented somewhere but I’m posting it here so I don’t forget (again).

I wanted to give Jetpack’s Carousel module a spin but the built in Themify Pretty Photo lightbox kept getting used instead.

To disable the PrettyPhoto lightbox add these lines to your child theme’s functions.php file.

add_action('wp_enqueue_scripts', 'mh_remove_pretty_photo', 20);
function mh_remove_pretty_photo() {
        wp_dequeue_style( 'pretty-photo' );
        wp_dequeue_script( 'pretty-photo' );
        wp_deregister_script( 'themify-carousel-js' );
}

That will let another lightbox be used instead such as Jetpack’s Carousel. The 20 argument in the add_action() is to make sure my function gets queued after the parent theme function.

Themify child theme fix

Update: Themify fixed the issue and an update is now available. The child theme fix is no longer needed.

I updated my Elemin theme to the latest and greatest and ran into a problem. They’ve changes how style sheets are queued up to use wp_enqueue_scripts.

That’s good, but now my child theme’s style.css will not get loaded, just the Elemin parent style.css file.

Easy to fix and I’ve added the following lines to my child theme’s functions.php file:

add_action( 'wp_print_styles', 'mh_remove_themify_styles' );
function mh_remove_themify_styles() {
        wp_dequeue_style( 'themify-styles' );
}
add_action( 'wp_enqueue_scripts' , 'mh_add_child_style' );
function mh_add_child_style() {
        wp_register_style( 'mh-child-style' , get_stylesheet_uri() );
        wp_enqueue_style( 'mh-child-style' );
}

That removes the parent theme style sheet and adds the child theme’s version.

Update: Themify (seriously, they’re really good and you should buy their themes) is going to address this problem with an update today. Which is good, de queuing their style sheet broke other styling and I ended up using add_action(‘wp_head’… instead of the above.

Customizing the Elemin theme

NOTE: No parent theme files were harmed, modified, or otherwise abused in the making of this blog post.

Sometimes I do learn things! I was able to customize the layout of my blog using a child theme, some CSS, and some additions to my child theme’s functions.php file.

The Elemin theme from Themify is a great theme and I’m a satisfied customer. The only settings on my theme are on the Default Index Layout as follows:

  1. Display the sidebar on the right
  2. Display excerpts and not the full post content
  3. Post layout is in 2 columns
  4. Image size is 75×75 (for the featured image)

All the other settings are left to the default. Any customized CSS is handled in my child theme’s style.css file.

I like the layout of 2 columns of excerpts but also wanted to have 2 full content posts on top. My blog setting is to display 10 posts per page so that’s two posts on top and 8 excerpts afterwards in a 2 columns. Oh, and I want to maintain the scaling capability of the theme and do not want to modify copies of the parent theme files.

That turned out to be pretty straight forward. WordPress assigns a CSS class tag to each post with the post ID appended to it. So if this post ID was 4153, then a CSS class tag of post-4153 would be embedded in the generated HTML code. It’s done that way exactly so you can style individual posts like this.

For the latest 2 posts (for example ID 4153 and 4123), I want to generate CSS so that the width is now 100% and the featured picture, tagged with post-image class, is hidden. Also the second post I want to float left and adjust the left margin.

That CSS looks like this:

.post-4153 {
	 width: 100% !important;
}
.post-4153 .post-image a {
	 display: none !important;
}
.post-4123 {
	width: 100% !important;
	float: left !important;
	margin-left: 0 !important;
}
.post-4123 .post-image {
	 display: none;
}

To generate this output, I need to get the last 2 published post IDs, generate the CSS, and insert it into the header using this code in my child theme functions.php.

//
// Get the last two published post IDs.
//
$args = array(
'numberposts' => 2,
'post_status' => 'publish' );
$mh_post = wp_get_recent_posts( $args );
$mh_post_ID1 = $mh_post['0']['ID'];
$mh_post_ID2 = $mh_post['1']['ID'];
//
// Add my CSS to wp_head
//
add_action( 'wp_head' , 'mh_first_two_posts' );
//
// Create the code for the header
//
function mh_first_two_posts() {
global $mh_post_ID1, $mh_post_ID2;
if (is_home()) { ?>
<!-- child theme header -->
<style type='text/css'>
.post-<?php echo $mh_post_ID1; ?> {
width: 100% !important;
}
.post-<?php echo $mh_post_ID1; ?> .post-image {
display: none !important;
}
.post-<?php echo $mh_post_ID2; ?> {
width: 100% !important;
float: left !important;
margin-left: 0 !important;
}
.post-<?php echo $mh_post_ID2; ?> .post-image {
display: none;
}
</style>
<!-- /child theme header -->
<?php   }
}

That takes care of the CSS, but that only get’s me 2 full width excerpts. I want those 2 posts to output the whole content not an excerpt. The rest of the posts I want to remain in the excerpt format using two columns.

Easy to do because I can filter the excerpt and restrict my changes to just those two identified posts.

//
// Add my filter to the excerpt
//
add_filter( 'the_excerpt' , 'mh_excerpt_to_content' );
//
// Swap the excerpt for those two posts with the content.
// Don't forget to apply the filters to the content.
//
function mh_excerpt_to_content( $content ) {
global $mh_post_ID1, $mh_post_ID2;
$mh_id = get_the_ID();
if ( ( $mh_id == $mh_post_ID1 ) or ( $mh_id == $mh_post_ID2 ) ) {
$content = get_the_content();
$content = apply_filters( 'the_content' , $content );
}
return $content;
}

That works. The only disadvantage to this method is that the apply_filters get’s ran twice. If you have something that adds to the content, it will run once when the loop runs and again when I run it in functions.php. For me this isn’t a problem but I do want to see how I can clean that up.

The full content posts don’t look exactly like they do as a single post but I’m satisfied for now and I’ll keep playing with it for my amusement. Doing it this way really appeals to me because I’m able to maintain my blog’s changes and not worry about breaking something in the parent theme.