Mostly about my amusement

Tag: Elemin (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.

Using WP-PageNavi with the Elemin theme

Update: Added a conditional to ensure that wp_pagenavi() runs once.

The Elemin theme has it’s own built-in page navigation after the posts. It’s attractive, but not quite as flexible as the WP-PageNavi plugin. With this plugin you can put a page counter, link to the start and end pages, etc. It’s a cool add-on and I’ve gotten comfortable using it on my WordPress blog.

Adding support for that plugin to Elemin can be done simply by creating an includes directory for the child theme, and copying the elemin/includes/pagination.php file into the child theme includes directory. You then modify the copy with the wp_pagenavi() code and due to the magic of get_template_part() the child theme will pick that up.

Modifying a copy of a parent theme file isn’t too bad and that file is very small. But that’s not a very interesting solution. What’s more fun is to add support via hooking into the loop.

I’ve made many modifications to my child theme and not once have I had to copy and/or modify one of the parent theme files. For me, that’s the whole point of this exercise: creating a child theme that only uses functions.php and CSS.

So far using that method for this child theme I’ve been able to do the following:

  1. Add a random header image
  2. Made some CSS changes including a page background
  3. Added a fix for Internet Explorer 8 issues
  4. Created a front page view that shows the full content and then the excerpts and without using a front-page.php template

I’m having a great time doing it too. WordPress is very extensible and I’m picking up more and more PHP knowledge as a result of playing with my WordPress blog.

Here’s how I added support for WP-PageNavi to the Elemin theme. Read more

I really am limited by my PHP and CSS

As part of purchasing the Elemin theme I get support from Themify and I asked for CSS help on their forum. It’s a good benefit and part of the package.

I was able to get two full posts on the home page and leave the rest as excerpts but the CSS was baffling me. I couldn’t work out how to set the post-meta to format as I wanted it to.

My CSS is at best “not too good” and I was messing up some inherited properties.

The response was good: why not just wrap the posts in divs with the correct class and let the default style.css do the rest? That way the generated output would look kind of like this:

<div class="list-post">
 [post 1]
 [post 2]
</div>
<div class="grid2">
 [post 3]
 [post 4]
 [post 5]
 [post 6]
 [post 7]
 [post 8]
</div>

That was a real light bulb moment for me. I know I can do that by making a copy of the elemin/index.php file into my child theme directory and making modifications.

So that’s exactly what I did and replaced the regular get_template_part() line with this code:

<!-- child mods -->
<?php if( is_home() and $post_layout == "grid2" and $paged < 2 ) {
   $mh_post_count++;
   switch($mh_post_count) {
      case 1: ?>
         </div><!--/loops-wrapper list-post-->
         <div class="loops-wrapper">
         <div class="list-post">
         <?php get_template_part( 'includes/loop','index');
         break;
      case 3: ?>
         </div><!-- /list-post -->
         <div class="grid2">
         <?php get_template_part( 'includes/loop','index');
         break;
      case get_option('posts_per_page'):
         get_template_part( 'includes/loop','index'); ?>
         </div><!-- /grid2 -->
         <?php break;
      default:
         get_template_part( 'includes/loop','index');
   }
} else {
   get_template_part( 'includes/loop','index');
} ?>
<!-- /child mods -->

I also had to put in a conditional right before get_sidebar() to properly close off the last div. Changing the excerpt to the post content is still handled in the child theme functions.php file.

It all works and I’m now using it my child theme. This only gets applied when I select the two column excerpts page format. Switching to anything else restores the default Elemin formatting.

But you copied and edited a theme file!

Yes, I did and I’m thoroughly ashamed of myself.

There are hooks into different parts of the WordPress loop so that I should be able to put into my child theme’s functions.php file the logic to figure out where in the loop we are and insert the HTML as needed.

The logic is dependent on if we’re at post #1, post #3, and the last post defined by the posts_per_page option. So all I need to do is add the appropriate add_filter() or add_action() to my functions.php file. I already add to the_content using a filter for before and after.

But I’m not quite there yet. I’m pretty sure that I can pull it off with something like add_action( ‘the_post’, ‘insert_before_posts’ ) but I’m still doping it out.

I’m also having a great time doing it too which is really the point of all this effort. Now if only that WordPress Bible would get here sooner…

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.