Archive for the "Coding" Category

Simple Text Toggle for WordPress

Backstory: I wanted the simplest way possible to show/hide a section of my Portfolio page without using a plugin. Credit goes to this post, but I stripped away the images and unnecessary CSS. If anyone else is looking for the same thing, here are the steps.

1. Add this code to your theme’s functions.php:

// Enqueue Javascript
function javascript_enqueue() {
	wp_enqueue_script(
		'toggle', get_stylesheet_directory_uri() . '/js/toggle.js', array('jquery')
	);
}
add_action( 'wp_enqueue_scripts', 'javascript_enqueue' );

// Toggle Shortcode
function toggle( $atts, $content = null ) {
	extract( shortcode_atts(
	array(
		'title' => 'Click to show/hide...',
	),
	$atts ) );
	return '<p class="trigger"><a href="#">'. $title .'</a></p><div class="toggle_container">' . do_shortcode($content) . '</div>';
}
add_shortcode('toggle', 'toggle');

2. Create a folder called “js” in your theme’s folder (if not already existing), and within that, a file called toggle.js with this code:

jQuery(function($){
    $(document).ready(function(){
        $(".toggle_container").hide();
        $("p.trigger").click(function(){
		$(this).toggleClass("active").next().slideToggle("normal");
		return false;
	});
    });
});

3. Add this CSS to your stylesheet:

.trigger {
    margin: 0;
}
.toggle_container {
    overflow: hidden;
}

Finally, use the [toggle][/toggle] shortcode within a WordPress post. For example, [toggle]Secret hidden text![/toggle] will look like this:

Click to show/hide...

Secret hidden text!

#13DaysOfCode and WordCamp

So I’ve been a little quiet, but I blame it on summer, vacations, and trying to enjoy the nice weather! My #100DaysOfCode challenge has unfortunately not been very successful yet, as I started the challenge more than a month ago and I’m only on day 13. But I haven’t quit (I could never quit code) … I just need to find the right rhythm of doing what I need to do everyday, while not staying up past midnight to squeeze the hour in. I have a bad habit of not getting enough sleep, though I guess that applies to 90% of the population.

I’m also stepping out my comfort zone and volunteering at WordCamp DC tomorrow! It’s my first WordCamp, and I’m excited but also slightly nervous that I signed up for too much in one day. I’ll be there for 8-9 hours straight, and while all my shifts sound pretty cool, I hope I’m not exhausted from being “on” the whole time. But we’ll see — after having WordPress on my site since 2004, I want to give back and be more involved in it!

Things I’ve Learned: Pre-freeCodeCamp

Today I’m starting freeCodeCamp and the #100DaysOfCode! I wanted to get this site updated with HTML5, CSS3, and a new layout before then, since HTML/CSS isn’t new code to me. I’ve done that now, but I still learned a lot — should’ve started the 100 days back when all this started on Memorial Day haha. I’ve been wrangling:

  • how to migrate WordPress databases to a new domain/server
  • how HTML5 and CSS3 are different from XHTML
  • how to use icon fonts, specifically Genericons and Social Logos
  • how to make slanted headers/footers with SVGs
  • how to code responsive text
  • how to buy & install a SSL certificate
  • how to use GitHub beyond simply committing updates for work

I almost got sidetracked into WordPress land by wanting to install a local environment to help test themes, but figured I should wait and not do too much at once. Plus, these 2 projects will definitely help with contributing to WordPress in the future.