WordPress “recent posts” file to be included on another page

I have a client who finally asked for something I told him we could easily do. He wanted the recent posts from their blog sub-site to be listed on a sidebar on their main site. We wanted a dynamic list of the most recent headlines, linked to the content.

Since we already spent the budget on “bigger fish,” Before I muddled my way through the WordPress templates, I did a quick web search to see if someone had already written my code for me. Sure enough, David Walsh, a respected developer whose work I already follow, had the answer. I’ll send you to his blog for the code.

Create a “Recent Posts” Module Outside of WordPress

Thanks, Mr. Walsh. Keep up the good work.

Posted in Web programming, WordPress | Leave a comment

WordPress replaces your menu with a single button

Actually, it’s not WordPress per se, but the TwentyTwelve theme. If you look at your beautiful site or blog on a small device, your carefully structured menus will be reduced to a one-dimensional abomination labeled “Menu.”

Wordpress reduces your menu to this

WordPress reduces your menu to this

Well-intentioned designers created this

Well-intentioned designers created this

In looking for a fix, I discovered that it was created by well-meaning theme developers. They think that if you’re viewing a site on a small screen, a larger menu is unusable, so they’re taking the decision out of your hands and “fixing” it for you, with no way for you to opt out.

Thanks, but no thanks.

Another commenter suggested it was made this way because “hover” states don’t work on touch-screen phones. Nice thought, except the decision to go one-dimensional isn’t based on touch input, it’s based on screen width. Plus, you can’t have a top-level navigation item in WordPress that isn’t a link — that is only a hover. So, again, nice thought, but no thanks.

What my client has found is that, although we offer a mobile site, some people like to see the regular, full site, and zoom in to what they are looking for. I’m not sure I agree, but who am I to argue? And who is WordPress to dictate? (Can you tell it’s late and I’ve spent too much time trying to track this “feature” down?)

Enough already. Here’s the fix.

Open the CSS file for your theme. Search for this phrase:

@media screen and (min-width: 600px) {

Change the 600px to 6px.

You’re done.

Posted in WordPress | Leave a comment

Chrome shrinks images in table cells

Chrome shrinks images in table cells! That was my accusation while working on a WordPress site. The images were correct in Firefox, but in Chrome, they got shrunk down to thumbnail size.

Firefox provided the desired effect

Firefox provides the desired effect

table images too small

Chrome shrinks the images in the table cell down to thumbnail size

I checked the styles for widths, table-layout, anything that might let Chrome think it was okay to shrink the image. After much research I found the culprit. It’s max-width:100%. Apparently Chrome interprets the rule differently from Firefox. It assumes the image can freely be shrunk, and with a long string of text in the cell next door, it squeezes the images.

The culprit

The culprit

The fix

The fix

I understand why the WordPress theme designer wants to set a max-width on images, but for Chrome, and in table cells, it’s more trouble than it’s worth. So I created a new style declaration in my theme’s stylesheet:

.entry-content td img {
    max-width: none; 
}

Posted in CSS, WordPress | 15 Comments

WordPress ate My HTML Too

The WordPress team admits that a common complaint is “WordPress ate my html.” Their latest “fix” to this issue is to relabel the HTML tab as “Text.” I’m all for truth in labeling, but it seems like a lazy fix.

I spent many days pondering how best to rebuild an existing web site in WordPress as simply as possible — hopefully pasting HTML from the existing web site. The HTML tab (now “Text” tab) didn’t work.  It added BR tags unnecessarily, then converted them to P tags if you saved and reopened the page in the admin section.

Add the HTML source button to the WordPress toolbarAt some point I stumbled on an implementation of TinyMCE that had an HTML button. It opened a popup and allowed me to paste HTML, without messing it up. Hooray!

To add the HTML button to your WordPress admin screens, find the functions.php file in your WordPress theme. Add the following code to the end of the file:

function my_mce_buttons_2($buttons) { 
  /**
  * Add in a core button that's disabled by default
  */
  $buttons[] = 'code';
  return $buttons;
}
add_filter('mce_buttons_2', 'my_mce_buttons_2');

It worked almost perfectly for my conversion job. I found out that if you’re pasting HTML comments, WordPress still converts the closing comment from –> to –> (notice that even in this post, WordPress has converted my dash-dash to an en-dash, which breaks the comments). The best advice I found was to let WordPress do its thing and then convert them back.

Save this code to a file called dont_break_html_comments.php — save it in your plugins directory. Then go to the plugins  panel and enable it.

<?php/*
Plugin Name: Don't break HTML comments
Description: HTML comments in pages get converted to en-dashes, resulting in missing content on those pages.
*/
add_filter( 'the_title', 'un_en_dash' , 50 );
add_filter( 'the_content', 'un_en_dash' , 50 );
add_filter( 'the_excerpt', 'un_en_dash' , 50 );
add_filter( 'comment_text', 'un_en_dash' , 50 );
add_filter( 'list_cats', 'un_en_dash' , 50 );

function un_en_dash( $text ) {
  $content = str_replace( '–>' , '-->' , $text );
  return $content;
}

Understand that pasting your HTML is really a one-way operation. Once the pasted HTML is in place, leave it alone. If you must make changes, make them using the HTML editor. The visual editor (and new “Text” editor) could still change the underlying HTML if you use them. Luckily, for me, that was not an issue.

Posted in Webmastering | Leave a comment

Unitarian Universalist Church of Boulder

sky_roomA quick note, the Unitarian Universalist Church of Boulder’s web site has changed. The new domain is uuchurchofboulder.org.

The old domain is no longer being updated, so please update any bookmarks or links you may have.

Thanks!

Posted in Boulder | Tagged , | Leave a comment

A photo album with CSS controls for previous and next

A client who owns a salon wanted a change to her web site.

She used to have pictures of stylists and styles. So on Amanda’s page there was a picture of Amanda, and 1-3 pictures of hairstyles that she had created.

The new site would add another dimension. There would be a picture of Amanda, 1-3 styles she had created, and now, for each style, 1-3 pictures of the same style. Instead of Amanda getting 1-3 pictures, she’d get 1-3 photo albums.

There are many carousel and slide-show libraries available, but I didn’t want to be tied to someone else’s library. I wanted something simple:

  • Albums should be the same size as a regular picture.
  • Affordances for “previous” and “next should be unambiguous

Both requirements helped to rule out thumbnail pictures of other pictures in the album. Thumbnails that were big enough to be clear would take up space, and if two pictures of the same style were similar, it might not be clear that a thumbnail was actually a different picture.

Left- and right-pointing triangles seemed like a good indicator. I didn’t want to put them adjacent to the picture because that increased the size. Overlaying them on the photo could be confusing, depending on the size and color of the triangles. Plus, depending on the crop of a photo, they could be embarrassingly placed (horns? nipples? shoulder pads?). So what I wanted was:

  • left- and right-pointing triangles
  • against a solid background to form a “control” clearly separate from the photo
  • controls that broke the boundary of the photograph to show they were separate
  • opacity to be slightly less distracting to the photos

Circles were less obnoxious than squares for the previous/next controls. Also, a double border — light then dark — helped set the shape off from any photos that were primarily black or white at the bottom. What I wanted is this:

Photo showing unambiguous controls for previous and next

Unambiguous controls for previous and next

I knew I could make semi-transparent PNGs if I had to, but I wanted to try CSS first — and had great success.

First the triangle. I know that most modern browsers (back to at least IE7), including mobile devices and tables, handle UTF-8 very well. The right- and left-pointing triangles, ◄ and ►, are & #9658; and & #9658; respectively, blown up large so that they become finger-sized elements on a tablet.

Next the circle. A border-radius of 100% makes a nice circle. Some absolute positioning nudges the shape outside of the boundaries of the photo. A box-shadow outside of the white border makes a double border and creates some 3D separation. Opacity keeps the control muted until you hover over it.

IE8 and IE7 can’t handle the border-radius, the opacity, nor the shadow. I might have added some proprietary IE filters to achieve the same effect, but luckily, I didn’t have to worry about IE8 or below. (And in fact, in IE7 and IE8, you can still see the controls, they still hang outside of the picture, and they are still unambiguous — they’re just not as classy).

You can see the album controls in action on the live site. The code in use is below. Note that I’m using Nicole Sullivan’s OOCSS to build the page. The “album” is an OOCSS module, which requires a certain HTML structure. The JavaScript is trivial; it simply shows and hides images that are already on the page, so the responsiveness is fast at the expense of a slightly slower page load time.

HTML

 <div>
    <b><b></b><b></b></b>
    <div>
        <div>
            <div>
                <img src="/uploads/DSC_0955_2.jpg" >
                <img src="/uploads/DSC_0959_2.jpg" >
                <img src="/uploads/DSC_0978_2.jpg" >
                <span>◄</span> 
                <span>►</span>
            </div>
        </div>
    </div>
    <b><b></b><b></b></b> 
</div>

CSS

.album .bd {overflow: visible;}
.album {overflow: visible; font-size: 230%; line-height: 100%; 
    color: #ffffff; text-shadow: 2px 2px 2px #000000; }
.album .next,
.album .previous {position: absolute; bottom: -6px; opacity: 1; 
    cursor: pointer;
    display: none; font-family: Arial, Helvetica, sans-serif; 
    font-size: 26px;}
.album .next {background-color: #000000;
    border: 2px solid #FFFFFF;
    border-radius: 100% 100% 100% 100%;
    box-shadow: 0 0 3px #000000;
    cursor: pointer;
    opacity: 0.5;
    right: -6px;
    padding: 3px 2px 1px 8px;
    }
.album .previous {background-color: #000000;
    border: 2px solid #FFFFFF;
    border-radius: 100% 100% 100% 100%;
    box-shadow: 0 0 3px #000000;
    cursor: pointer;
    opacity: 0.5;
    left: -6px; 
    padding: 3px 8px 1px 2px;}
.album .next:hover,
.album .previous:hover {opacity: 1;}
Posted in CSS, Design, Mobile | Leave a comment

Make a proper favicon for your web site

Sunday is my website cleanup day. My error logs looked clean, so I decided to finally make a proper favicon for my primary web site.

I remember being surprised to learn that the .ico format allows you to store multiple sizes of the same image. That allows your operating system to show you a larger version of the file, rather than stretching a 16 x 16 blob of mud.

OS doesn't have to stretch a tiny blob of mud

How did I do it? I followed the tutorial at egressive.

http://egressive.com/tutorial/creating-a-multi-resolution-favicon-including-transparency-with-the-gimp

Posted in Images, Webmastering | Leave a comment