Half-Elf on Tech

Thoughts From a Professional Lesbian

Author: Ipstenu (Mika Epstein)

  • MeetWP: Troubleshooting

    MeetWP: Troubleshooting

    I met the guys from MeetWP when I was at WordCamp Chicago, and when they asked if I’d be interested, I thought about it for a second and said “Sure, why not.” I live in the OC, you see, and while I enjoy meetups, the two nearest me are just over an hour away. I’m a one-car home, and generally my spouse has class when these meetups are, so the timing has just be downright rotten. But a virtual meetup? Hey that has potential.

    MeetWP Logo

    What is this thing? From their site:

    MeetWP is an online WordPress Meetup. Local Meetups are a great place to learn about WordPress and meet new people in the WordPress community, but not everyone can make it to a local meetup or are in an area where a Meetup dedicated to WordPress can happen. MeetWP, the online WordPress Meetup, is here to bring together people all over the world in a virtual meetup to learn from each other.

    So yay! They’ll be posting this up on their webpage as a link with all the logs soon enough, and you’ll see me up there as MeetWP (following JJJ, Chris Lema, and Lisa Sabin-Wilson). I didn’t do slides, so you get to watch me break a site, fix it, and then show you my break-fix site (more on that later) where I have examples and plugins you can use to install, break your site, and fix it.

    There were crowdsourced notes on Google (you can read them here), and one of them is ‘Don’t be Stupid.’

    photoI try to cure myself of stupid as much as I can, because being hacked almost always boils down to someone being stupid. If I can not be the stupid, I’m in good standing.

    Oh and yes, I think SSH and SFTP are a requirement for a webhost. If they can’t do that, I’m gone.

  • Retina Favicons

    Retina Favicons

    Way back in 2009 I said that every site should have a favicon. It was not the first time I’d expressed such an opinion, and I still remember back when IE 5 rolled out and I saw them on my bookmarks for the first time. Actually, I remember when a coworker asked me to help her make them show again, and I had no idea what she was talking about. As soon as I saw them, I knew this tiny feature would be useful.

    Back in those days, of course, we didn’t have ‘tabbed’ browsers. So you knew what site you were on because that was your window. Now, with somewhere between 10 and 20 active tabs on a browser (depending on if you’re me or someone like Andrea or Nacin – I like the fewer) the favicon is a fantastic way to go “Aha! That’s where the tab for Google went…”

    Speaking of Google, the other day I was browsing on my iPad and realized that not only does Google show you different favicons depending on which page you’re on, but they also show you them in retina format.

    Hold the phone.

    Retina. Ready. Favicons.

    Well. Clearly I needed to upgrade mine! Of course there are problems with this. The old favicon standard was a 16×16 pixel square that you had to make memorable and identifiable. This is not simple. I picked a hat for ipstenu.org and on a retina display, this still looks okay, even though it’s pixelated. It gives off an 8-bit vibe to things, and that’s pretty me, in that retro-cool way, so I don’t mind. It’s not fuzzy, after all. The same cannot be said of my Spock-eye here, however. I didn’t want to lose the geekiness of the eyebrow, so I sat and pondered my options.

    favicon-old Since my original favicon (see right) was 16×16 and an ICO, I had no choice but to deal with being fuzzy, upgrade or make a whole new favicon. I wanted to keep Spock, so I grabbed a screen-shot of Spock from what is everyone’s favorite Spock episode, “Amok Time.”

    Amok Time

    I spent a lot of time cropping and tweaking, and finally I remembered that one of the things I am terrible at is images. Sorry, Spock. I still love you. But I resigned myself to my lack of ability in this, and figured that since I had recently redesigned Half-Elf, I may as well get a new icon. Something that wasn’t just geeky, but also more modern. Normally when I do this, I end up over at IconFactory, who were my go-to standards for desktop icons on my Mac. They used to have a pretty amazing Freeware section, but it hasn’t been updated since 2012, and that tells me they’re done with it.

    The real problem with icons is, of course, simplicity. The more complex you make one, the harder is it for anyone to know what it is. And it’s just plain hard to do this when you want higher resolutions. Conundrums. After messing around for more time, I remembered I had some old Nintendo retro icons saved from the last time I was doing this, and boiled it down to three:

    I’m not a huge Mario fan, so I kicked him out, and tried the Mushroom. Cute. Iconic. Identifiable to some. And it had a reminder to me of a childhood book. It was also ‘bright’ and stood out on my toolbar. So I did that.

    Now you can’t always get away with this. Sometimes you have to bite the bullet and make a new favicon, or convert the perfect PNG to a favicon. Remember, IE doesn’t accept PNGs for favicons. For that I actually use X-Icon Editor, which lets me tweak each size on it’s own. That means you have make a super complicated 64×64, for retinas, and a simple 16×16 for everyone else. But remember: KISS.

    Keep all this simple.

    Oh. And the mushroom is an extra joke. See, if you hit it in Super Mario Bros., it took you from Small Mario to Normal Mario. Now it takes me from small favicon to large favicon. And yes, it was on purpose.

  • MP6uccess – Tips and Tricks

    MP6uccess – Tips and Tricks

    Notice: Since WordPress 3.8 came out, you DO NOT need to install MP6 for anything to work. Promise. If you want the extra color schemes, use Admin Color Schemes, but everything else works in core WP.

    nyan-catI like MP6. It’s far, far, far easier for me to read the back end of WordPress with it. It has legible fonts, larger fonts, and best of all, it’s mobile friendly.

    The biggest complaint has been that it’s too dark. And I get that, I really do. I personally have trouble seeing white on black (computers only), and white on green (yes, road signs). So for me, the black sidebar was a little heavy, but something I could live with. Then version 2.0 came out and behold, color schemes!

    I immediately ran this update, zipped to my profile page (where I knew it had to be), and saw this:

    mp6-scheme

    The other options right now are Blue (looks like the old blue), Seaweed, Pixel, and Ectoplasm. Seaweed is my favorite, but I decided to make each site a little different and distinct, so I have Ectoplasm running right now on one site and Seaweed on the other. I can tell right away which is which. My only wish is the toolbar was colorized on both ends.

    Tips & Tricks

    Okay, okay, I’ll stop selling the plugin, and instead tell you what’s cool to do with it.

    Styling Menu Items

    The items on your menu sidebar default to some pretty boring icons. Bleah. For years we’ve always uploaded our own images to change things in our plugin and custom post types. Here’s an example for my own code for an old Custom Post Type, because I wanted a custom video icon to show up on my sidebar:

    function cptname_post_type_css() {
       echo "<style type='text/css' media='screen'>
               #menu-posts-CPTNAME .wp-menu-image {
                    background: url(/path/to/CPTNAME.png) no-repeat 6px -17px !important;
            }
               #menu-posts-CPTNAME:hover .wp-menu-image, #menu-posts-CPTNAME.wp-has-current-submenu .wp-menu-image {
                     background-position: 6px 7px!important;
            }
        </style>"
    }
    add_action( 'admin_head', 'cptname_post_type_css' );
    

    Now that I’m using MP6, I have access to Dashicons, which already has a video icon included, so I can use this:

    function cptname_post_type_css() {
       echo "<style type='text/css' media='screen'>
               .mp6 #adminmenu #menu-posts-CPTNAME .wp-menu-image:before {
                    content: '\\f126';
                }
             </style>";
    }
    add_action('admin_head', 'cptname_post_type_css');
    

    Menu with VideoNo need for a hover image, because this is a font and not an image, so the hover is automagically taken care of. The result is exactly what I wanted. It looked just like it was built into WordPress from day one, and my co-authors know right where they’re supposed to go to make a new video post.

    There are a lot of options to nab from, and there’s a double edged sword to having some ‘standards’ built in. While it’s super easy for me to make a plugin or CPT use what I want, the same goes for other people. I imagine a lot of shopping cart plugins will want to use '\f174' (the shopping cart) if they don’t have their own. Also it means that to ‘match’ you’ll have to use Font Icons yourself, and they’re not super easy to make. Not that everyone worries about matching.

    Force a Choice

    Okay, what if you want to force a choice for everyone?

    add_filter('get_user_option_admin_color', 'change_admin_color');
    function change_admin_color($result) {
        return 'ectoplasm';
    }
    

    This is the same as it’s always been, actually. But now everyone gets to use purple and green, yay! Keep in mind, this is a hard force. Everyone uses this. There’s no changing. I have this on one site, since the ecotplasm color actually matched the theme. I set it, went away for the weekend, and found the users laughing and loving the perfect match.

    Also check out…

    I’m sure I’m not the first person do dig out these tricks for MP6. At WordCamp Chicago I remarked that a cool plugin would be “MP6SS” – it would let you pick four colors (similar to the blocks the current MP6 plugin offers), and you could make your own colors on the fly. A little dangerous, but the next option up from that would be a fork of the CSS plugin in Jetpack, which lets you totally customize your MP6 CSS 100%.

    Here’s some links I’ve found to more MP6 fun:

    Do you have any tricks? Post links to your code!

  • Breaking Up Multisite

    Breaking Up Multisite

    This is by no means the be-all and end-all of how to break up a Multisite. These are, however, methods I’ve used to move Multisites around into brand new places. As always, if you have another method, feel free to explain in the comments, and link back to your own tutorials!

    brokeback-mountainYou see, Multisite is great at some things, but breaking up is crazy hard to do. If you want to just disable multisite, it’s not too bad, four steps, and the hardest is to delete the right tables. And if you want to move a whole multisite, it’s not terrible either.

    But. What happens when you want to move only one site on the network?

    Usually I see this happen when someone is developing a site for someone else, and thinks it’ll be ‘easier’ to do it on their Multisite. After all, the site will be ‘visible’ but clearly a development site, and remote clients can take a look all they want. The minority of people I see doing this for just themselves, knowing the site won’t ever need to be on a Multisite, but taking the ‘easy’ way out. And to them I suggest developing locally, as domain.dev, and then a blanket search/replace on ‘domain.dev’ for ‘domain.com’ when you’re ready to move. Then there is a small group of people who have a multisite installed on localhost for development, which … no. Don’t. It’s localhost. Spin up a new instance of WordPress.

    And still, while I lament the shortsighted nature of these things, there are clear-cut use-cases for this that people just can’t predict. Like the day you wake up and realize that Ennis and Jack can stay on brokebackblog.com, but maybe you should move the Hulk.(Ang Lee directed both movies.) Now you have a dilemma. Do you rebrand brokebackblog.com as angleefilms.com? Maybe you just domain map brokebackblog.com/hulk to hulksmashblog.com or maybe, maybe, you don’t want to run the Hulk blogs at all, but your friend Eric does. Certainly there are always options to splitting up a Multisite, yet for the sake of this post, you have decided that Eric (who has bought hulksmashblog.com) should have the whole site, all the posts and users, and you don’t want it on your server at all!

    Now what?

    Uber Easy: Export and Import

    This is straightforward. Install your new stand-alone WordPress instance, export the posts from brokebackblog.com/hulk, import them into hulksmashblog.com, customize the theme and plugins, done. If you don’t have a lot of users, this is the best bet. Yes, you’ll lose a lot of time resetting all the plugins and theme configs, but you probably had to do some of this anyway. All your comments come with, all your images too, so it’s going to be straightforward.

    A couple more things to keep in mind. User passwords will need to be reset, which is trivial in my experience, and a good idea anyway if you want to enforce good passwords. Many new themes are getting great at allowing you to export theme settings, so that may ease the pain as well. The plugin settings really are the biggest hassle to me, but in the long run, I’ve found that having to reset them isn’t horrible since the new home usually is a little different from the old one.

    Finally, you’ll probably need to search/replace your posts to compensate for the new image location. I prefer Velvet Blues Update URLs, but sometimes I use .htaccess to redirect instead. If you’re moving from an older Multisite, your images will all point to /files/, but newer ones are in /wp-content/uploads/sites/#/ instead. Of course, wp-cli make it even easier, and I use it all the time when moving people at work.

    $ wp search-replace brokebackblog.com/hulk hulksmashblog.com
    

    That’s right now my favorite command. It updated everything, with serialization handled safely, and I was done. If I can’t use that, I’ll grab the interconnectit search/replace tool (not just for WordPress) and run that instead, but for me, I install WP-CLI pretty much everywhere now. It’s just so easy!

    Ugly Complex: Database Dancing

    brokeback-mountain-20051213061537535When you’ve got a more complex situation, like a heavily customized and themed site, with lots of users and content, then you may have to do this the hard way. As before, make your new stand-alone instance of WordPress. Copy down all the plugins and the theme from your multisite, same as before. Instead of importing the content via an XML file, though, we’re going to import the following database tables as well as all the media images. Remember, no import, no media import, so you must SFTP them all over.

    Then the DB Tables you need are as follows:

    wp_x_*
    wp_user
    wp_usermeta
    

    This means you need to know your site number (not too hard, you know how to make them show up, right?), but don’t think it stops here! Now you have to rename tables. There are two directions to go. One is to rename all the wp_x_ tables to wp_, and the other is to rename the other two tables to wp_x_user and wp_x_usermeta instead.

    Either way you get to fuss even more. And don’t forget what I talked about in Recovering Your Cape: If your tables are named wp_x_ then you MUST have a field called wp_x_user_roles in wp_x_options, or no one will have any permissions at all. This almost makes it easier to think “Well I should just add in _x right?” You’d think, but then you’re stuck with this funny prefix you have to account for in your wp-config.php file, and you also have to consider what if hulksmashblog.com later wants to make itself a multisite. Be nice to the next guy. I would rename the tables, and then run a search/replace for wp_x_ and wp_ using wp-cli or that script.

    Now you’re still not done though. You actually moved over all of your users. That means you have a bunch that don’t have any posts. Go to the /users.php screen and sort by number of posts. Nuke everyone who doesn’t have any posts. Of course… what if they had comments and you want to keep that? Sadly that’s not listed. The comments table isn’t tied in to the users table in a easy to calculate way. But remember, deleting a user won’t delete the comment.

    Finally, remember you changed the domain name? Do that again, like you did with an import export.

    To The Pain: Moving Your Main Site

    brokeback_mountain_2005_6728_wallpaperOw. Ow. Okay, Jake, here’s where we get messy. There are just too many options to consider, so let’s look at them briefly.

    First, if you want to keep the main site at its current location (domain etc), then you want to actually move all the other sites and then disable multisite.

    However, if you want to keep the domain as a multisite and give the main site it’s own, new, home, you’ll want to switch out the main site for a subsite (detailed in WordPress Multisite 110 – around page 80), and then move it per one of the other ways… except remember the site number stays as ‘1’ which is to say ‘none’ so you’ll be moving wp_* and only the ones for the site, not the network (which you can’t delete unless you feel like breaking everything).

    Finally, and this one boggles my mind, you want to keep the multisite, and all the sites, but separately. You can see there’s no quick fix for this. Move ’em all manually, and have a beer when you’re done, cause it ain’t fast.

    Worse….

    There’s more? Just a little bit. Keep in mind that any network settings won’t copy over, so W3TC and WordPress SEO, just to name two popular plugins, have network wide settings. Those don’t magically come with, you’ll have to re-build all of that. With W3TC, you should be able to export the settings, but maybe not. Other plugins too may prove problematic. What about BuddyPress? That would pretty much have to be a table-copy over. At least bbPress should be easier, as it’s all CPTs.

    Obviously the more layers you get into with this, the messier it gets. Me? I try to do the age old export/import whenever possible.

  • WordPress Media Library: Show ID

    WordPress Media Library: Show ID

    random-rotation-galleryWhile this is considerably less of an issue with the new Media Uploader, and how it inserts your gallery code, this used to be a hassle. The old [gallery] code would just be that, a short tag, and if included all images attached to a post. So if you wanted it to exclude some images, you had to figure out their IDs, or remove them from the post.

    I used to have to show people how to do this all the time. Hover over the image, note the URL, bleh bleah bleaaaaaaaaah.

    So what if the images showed the IDs? Hey! You can do that with this function!

    function column_id($columns) {
        $columns['colID'] = __('ID');
        return $columns;
    }
    add_filter( 'manage_media_columns', 'column_id' );
    function column_id_row($columnName, $columnID){
        if($columnName == 'colID'){
           echo $columnID;
        }
    }
    add_filter( 'manage_media_custom_column', 'column_id_row', 10, 2 );
    

    And there you go. I don’t actually use this anymore, but it was sitting in my scrapbook of functions.

    If you’re wondering about the right way to handle galleries today, the gallery editor lets you configure what images are and aren’t in it through a GUI, so you don’t need to mess with this. Just click on the gallery to edit it, remove the images you don’t want, add the new ones, and off you go. About the only thing it doesn’t do is let me select how I want the images to like (URL, file, or none), and I still don’t have the option to link to an external URL. Ah well.