Half-Elf on Tech

Thoughts From a Professional Lesbian

Tag: wordpress

  • jQuery Toggling

    jQuery Toggling

    I was working on some basic code where I wanted a div to show or hide based on a link. This is simple stuff, but it took me a while to remember it since it’s actually baked into MediaWiki (where I normally use it).

    First up is my HTML code:

    		<h2 class="suggestions-header"><a href="javascript:toggle_visibility('suggestionscontainer');">Suggestions? Click Here!</a></h2>
		<div style="display:none;" class="sugestions-container" id="suggestionscontainer">
			<p>I will display when clicked!</p>
		</div>

    Like I said, this is basic stuff. I can get more into it and do things like change the text of the title when you click, but for now this suffices.

    Now for the jquery:

    /**
 * Custom jQuery to toggle visibility
 */
jQuery( document ).ready(

	function toggle_visibility(id) {
	       var e = document.getElementById(id);
	       if(e.style.display == 'block')
	          e.style.display = 'none';
	       else
	          e.style.display = 'block';
	}
);

    This code got tossed into a toggle.js file and then enqueued with wp_enqueue_script, with a jquery dependancy. Done and done.

    I’m sure this could be done with pure CSS, but I believe in release and iterate.

  • Mailbag: .htaccess Magic with Subdomains and Subfolders

    Mailbag: .htaccess Magic with Subdomains and Subfolders

    From Ginger:

    Hiya, I enjoy your blog and humor within

    In case you still do posts from the “mail bag” — I have seen mention of .htaccess on your site and I’m curious how it relates to the subject of redirects. For example, in my day job we have a site that has two ways to access an external support site.

    So, we want to redirect: www.example.com/support and support.example.com to the same external support site. In the past, I would go to our host and edit the DNS to redirect on these URLS to the external site. Is that the best way or should I be handling this in the .htaccess file now that we’re on WordPress?

    Depends on how lazy I am.

    DNS is great because I can just send support.example.com over, but this only works if the external site lets me do that. I can point my domain at tumblr.com all I want, yet until I add my custom domain to their settings, the URL won’t work. This is why your domain mappings in Multisite don’t always work, folks. You have to tell WordPress, the name servers, and the server that the domain lives there. If you can? Super simple for the subdomain, but not for the subfolder.

    Which brings us to .htaccess:

    Apache 2.2

    RewriteCond %{HTTP_HOST} ^example\.com [NC]
RewriteRule ^support(.*)$ http://supporturl.com/ [L,R=301]

RewriteCond %{HTTP_HOST} ^support\.example\.com [NC]
RewriteRule ^(.*) http://supporturl.com/ [L,R=301]

    Apache 2.4

    <If "%{HTTP_HOST} == 'example.com' ">
	RedirectMatch ^support(.*) http://supporturl.com/
</If>

<If "%{HTTP_HOST} == 'support.example.com'">
	RedirectMatch (.*) http://supporturl.com/
</If>

    Now someone will note that specifying the HTTP_HOST for example.com is silly, but I disagree. This lets me use http://foo.example.com/support/ to redirect somewhere else. I don’t worry about the www part because I always force no-www on all my domains. Saves me steps later.

    Oh and I’m glad Ginger likes my humor. I don’t know how to turn it off!

  • WIRED Doesn’t Use Multisite

    WIRED Doesn’t Use Multisite

    At WCSF this year, WIRED engineer Kathleen Vignos talked about moving WIRED from 35ish blogs to one blog.

    They didn’t use multisite at any point along the way.

    Now part of this was that back in 2008, when they started, the concept of multisite wasn’t really there. But that left them in a strange world with 35 separate blogs, separate installs, and an psychotic update system that was headachy and roundabout and involved 35 separate sites. But you could understand why they didn’t in the past, since there wasn’t a way to do it back then, but it brings up the question today.

    Why not multisite now?

    That was my question after her talk, and I promise you angels sang from the heavens when she said that multisite was intended for siloing data, and she needed to share data between ‘subjects.’ So for them, to have categories and just post articles in the appropriate ones (yes, plural) was exactly what they needed.

    I have been saying this for a few years now. Multisite is great, except when it’s not, and there are reasons to use it and reasons to not. WIRED properly looked at their sites and said “We need to share data, Multisite may not be the best.” They also said “We need to make it easier to add users to a site, so maybe not Multisite.” Every single reason they picked to not use Multisite was 100% exactly the right one.

    Multisite is simply not what you want if you need to share data between sites and you’re on a big site. Had WIRED used Multisite, they would have been miserable and have to write not just plugins to migrate the data, but ones to join the tables and display data in an ongoing way. What a pain.

    Kathleen talked about the hurdles of merging the sites, and the tools they invented in order to make their Pangea happen. They had to worry about logical things, like keeping User A out of a category, and made use of plugins like Restrict Categories to do just that. Custom fields in the author profiles were use to assign a ‘default beat,’ and they made extra roles to allow people to manage the sites. They used template files to make various categories look different, which is often the main pain point.

    By doing this, they were allowed to share and segregate data in an efficient and effective way.

    WIRED wins my hat-tip for the best talk at WCSF about Multisite, simply by not using it.

    You can see the slides here:

    And the video here:

    [wpvideo n4wrIVIU]

  • Karuta

    Karuta

    The idea of WordPress Karuta is based on the Karuta (カルタ) game in Japan. Karuta means, essentially, card game and yet is a very popular game to play competitively. The cards are written with the Ogura Hyakunin Isshu, which are 100 famous poems, and the game is played very simply. The poem is read and the first person to find the card of the poem and tap it gets the card. In the end, the most cards wins. It’s also really wild to watch.

    http://www.youtube.com/watch?v=nKAmZxVhQww

    At WordCamp Tokyo they introduced me to WordPress Karuta.

    WordPress Karuta Cards

    The game is simple. The black cards are to be asked aloud and you grab the pink card with the answer.

    I now have all the data from the 2013 and 2014 cards and the plan is to make a GlotPress site where we enter all the Japanese original data and translate it so anyone, anywhere, can make the cards to play and teach. Yes, teach.

    If you’re an American, think of it like Jeopardy the card game and pretend you Alex Trebeck is saying this: “Display the URL of the individual pages, such as posts or fixed page.”

    And you go, “Oh! the_permalink!!”

    But instead you grab a card.

    This would let people learn in a fun way, as it forces you to think about the meaning behind the code. It’s easily extendable past just code, you can ask questions about plugins. For example, an answer might be ‘WordPress SEO’ to a question of ‘A plugin that allows you to connect to Google Analytics, Google Webmaster, Yahoo sites, and also edit your robots.txt file.’

    I’m going to work with Markus and Shin to translate this so everyone can try their hand at WordPress Karuta!

  • WordPress iOS App: Good for Bloggers

    WordPress iOS App: Good for Bloggers

    This is a big distinction.

    The app is great. I love using it to write a blog post when I’m on the go, and save for my annoyance that it wants to default to publish and even if I move it to draft, it saves the date and time that moment in time, it’s a good app.

    But it’s not great for non-bloggers.

    Let me step back. I run a little database site on WordPress. It’s a listing of TV shows and characters and while it has a blog, it has a bunch of custom post types. Want to know what you can’t write on the iOS app? Pages and CPTs. You also can’t add new users or plugins or anything like that. All I can do is write up a blog post about things. Sure, I can upload pictures but I can’t add them to the library in general, just to posts (and yes, I care about that sometimes). Uploading and setting a featured image is also more complicated than it should be. I often end up with the image uploaded twice.

    Realistically, I look at the iOS app and I’m not sure who the target audience is. It’s very easy to add my WordPress.com account and view my reader there, but that’s a different group of people than the ones who want to blog. Then there’s the thought of actually blogging. If you’re on WordPress.com, you can’t add custom post types, so that issue is null, but you still can’t edit pages or Portfolios (which comes with all .com blogs now).

    It makes you start to wonder if there should be separate apps, for WordPress.com and self-hosted people, and to that I think not. I’m always going to be logged in to WordPress.com on my iPad because of Jetpack and a desire to see my stats. But at the same time, I really don’t care as much about my WordPress.com blogs. I should, but over time I’ve merged them all into my self-hosted sites because it’s easier for me to go to one place. It’s with that in mind I think we should just have one place for all our WordPress iOS/app needs.

    Then you have to consider what the use-case is of a WordPress app. For me, it’s that I want to work on a draft post while on the go and save it offline, only to have it magically get tossed up onto my blog when I’m online. I think of it like Numbers and iCloud. I can edit my archery spreadsheet on my iPhone while I’m at the range and it’s automagically updated on my laptop when I next open Numbers there. Of course, WordPress blogs don’t really work that way.

    But at this point, that’s all the iOS app is good for, because I can’t administer my site from it. This isn’t so bad, since people like Boren are rabid mobile-first devs for the WordPress admin dashboard. At the same time, we’ve only had it be mobile responsive since 3.8 or so, and it’s been spotty for doing ‘everything’ due to OS limitations, which makes it imperfect. As much as I’m a fan of using WordPress to WordPress, it’s the simple things that make me look at Desk for my laptop. Someplace to write.

    Except for that, the iOS app still fails because I can only write a blog post, and most WordPress sites are more than just blogging now.

    At WordCamp San Francisco 2014, I heard more and more people refer to their sites as ‘A WordPress’ than ‘A WordPress blog.’ Every day at work I hear people asked if they would like to setup a WordPress on their site. We’ve verbified the word, but we haven’t verbified the app yet.

  • Gensis: Post Title on Featured Image

    Gensis: Post Title on Featured Image

    This is something that’s done already on my personal blog, and I wanted to repurpose it for another. This was actually very easy, once I reverse engineering a few things.

    Add the Featured Image

    First you have to make sure you have a featured image to add:

    //* Remove default post image
remove_action( 'genesis_entry_content', 'genesis_do_post_image', 8 );

//* Add featured to the entry content - required for the front page/archives
//* With a value of 3 it will be OUTSIDE the <header>
add_action( 'genesis_entry_header', 'halfelf_featured_photo', 3 );

function halfelf_featured_photo() {
	if ( !genesis_get_option( 'content_archive_thumbnail' ) || !has_post_thumbnail() ) {
	    // Don't show on pages without a thumbnail or on archives without a thumbnail but leave space for the compensation.
		printf('<div class="featured-image no-image"></div>');
	}

	elseif ( is_single() ) {
		// No link on single pages
		$image = genesis_get_image( array( 'format' => 'url', 'size' => genesis_get_option( 'image_size' ) ) );
		printf( '<img src="%s" alt="%s" />', $image, the_title_attribute( 'echo=0' ) );
	}

	elseif ( $image = genesis_get_image( array( 'format' => 'url', 'size' => genesis_get_option( 'image_size' ) ) ) ) {
		printf('<a href="%s" title="%s" class="featured-image">', get_permalink(), the_title_attribute( 'echo=0' ) );
		printf( '<img src="%s" alt="%s" />', $image, the_title_attribute( 'echo=0' ) );
		printf('</a>');
	}
}

    I’ve probably made this more complicated than necessary, but I needed the extra div for pages without featured images, I wanted to and I wanted to show the image on post pages without a link, so this was what I made.

    Move the header with CSS

    .entry {
	margin-bottom: 20px;
	position: relative;
}

.entry-content:before {
	clear: both;
}

article .entry-header {
	position: absolute;
	top: 10px;
	width: 100%;
	background: rgba(236, 240, 239, 0.75) !important;
	text-align: center;
}

.featured-image.no-image {
	height: 220px;
	background-color: #333;
}

    I actually use some sass to generate this (thank you Taupecat and my sass plugin) but I’ve put it in plain PX for you. Adjust as needed. The .featured-image.no-image height is to match the height of that site’s featured image, which I always know.

    Style as desired

    I threw in this so the whole image changes color when you hover, as a good indicator to what’s going on.

    a.featured-image:hover, a.featured-image.no-image {
	opacity: .33;
}

    Surprisingly simple.