Archive for the "Coding" Category

Connections

I came across this Pure CSS Connect 4 CodePen this morning — I played that game a lot as a kid (and still have it, including the beat-up cardboard box), so I had a bit of a nostalgic moment :) As I have yet to foray into the world of advanced CSS/SVG styling like this, it amazes me what people have created when I get the CodePen Spark emails every week.

On a personal note, I’ve started volunteering as the webmaster for a local nonprofit, Community Empowerment Northern Virginia (CENV). So far I love it, as it allows me to help a good cause while still being able to create and learn more about WordPress (especially things that wouldn’t be relevant on this site, like integrating MailChimp).

I’m also volunteering this Saturday at WordCamp Baltimore, so looking forward to that! Don’t know what my schedule is yet, though it’s interesting to see the differences in organizing from WordCamp DC. I’ve had to unfortunately decline my volunteer invite to WordCamp US in December as well. The last week of November has gotten busy, and can’t take the whole week off, as I’m not within reasonable driving distance from Nashville. But, maybe next year!

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.