Tag: css

WordPress Visual Editor Not Expanding With Zurb Foundation 5 CSS Styles

I just hunted down a very annoying bug in my Manifest Foundation WordPress starter theme that was preventing the visual editor (TinyMCE) from expanding vertically when the default CSS styles from the Zurb Foundation framework are included as an editor stylesheet.

Basically, the height of the visual editor is supposed to be determined based on how much content you’ve actually written in that area. This prevents you from having to scroll both the editing area and the page independently from one another. As you add content the height automatically expands, keeping your editing toolbar visible at the top of the page. Overall it’s a very nice feature, albeit one that many of our clients don’t always grasp intuitively (but that’s another post).

The bug I mentioned was preventing the editor from expanding vertically. Oddly enough the height of the editor would increase by one pixel every time that the user clicked the editor, or navigated using the arrow buttons on their keyboard.

After ruling out that this was a core error or at all related to any of the plugins I was running, I was then able to disable the editor stylesheet and see that the editor functioned as intended. The offending rule is located in the /scss/foundation/components/_global.scss partial of the Zurb Foundation framework.

As part of it’s styling reset, it ensures that both the <html> and the <body> elements are set to 100% height. On the front-end of a theme this ensures that the off-canvas, mobile menu will work as intended. However, the visual editor in WordPress uses an embedded iFrame that also includes these elements. Just place the following rule at the end of your editor stylesheet and you’ll come up aces.

html, body {
	height:auto;
}

An example of my full editor-style.scss file follows:

@charset "UTF-8";
@import "config/settings";
@import "../bower_components/foundation/scss/foundation/components/type";
@import "../bower_components/foundation/scss/foundation/components/clearing";
@import "../bower_components/foundation/scss/foundation/components/tables";
@import "../bower_components/foundation/scss/foundation/components/thumbs";
@import 'site/wp';

html, body {
	height:auto;
}

Replacing a post title with an image in WordPress

From time to time I answer questions on a variety of WordPress forums and discussion boards. I was asked an interesting question about WordPress today. One that seemed fairly simple. As I wrote my reply, I realized that there are several different ways to skin a cat.

I’m using WordPress. I want to replace the post title of my About Us page with a logo. How should I do this?

There are a few different ways to approach this.

1) You could duplicate the page.php file and call it page-about.php (or whatever the slug is for your “About” page.) Find the area that controls the page title and replace it with your logo. This will ensure that this PHP file is used only when the about page loads. The WordPress Codex will tell you all you need to know about the template hierarchy.

2) You could modify the page.php file and add an if/else statement.

<?php
if ( is_page('my-page-slug') ) {
  echo '<img src="'.get_bloginfo('template_url').'/path/to/img.png">';
} else {
  get_the_title(); //Or similar code from the template
}
?>

3) There’s a third way you could approach this using only CSS. It’s also a bit more SEO friendly than just using an image. Presuming that there’s a class that’s specific to the page, you could target just that page. For the purpose of discussion we’ll pretend that the body tag has a class of ‘.about’. You could do something like this:

<style type="text/css">
body.about h1 { /*Let's presume your banner title is an h1 element */
  width: 150px; /* Set this to the width of your image */
  height: 75px; /* Set this to the height of your image */
  background: transparent url('my-image.png') no-repeat top left; /* Change the URL to point to your image */
  text-indent: -9999em; /* This ensures that the text itself will not show. */
}
</style>

<html>
  <body class="about">
  <!-- The title below will be text and shown to search engines.
  Normal visitors will see the image you've specified in the CSS -->
  <h1><?php the_title(); ?></h1>
  </body>
</html>