Category: CSS

Comment, comment, comment…but which comment code goes where?

Commented code is worth its weight in gold when it comes time to decipher it. Unfortunately, the codes for commenting in xhtml, css and php are not all the same. So, for reference sake here are the comment codes you’ll need and where to use them.

Where xxx is your comment, for

  • xhtml (html) and php (outside php code) use <!-- xxx -->
  • css use /* xxx */
  • php (inside php code or between <?php and ?>) use // xxx
  • multi-line comments inside php use /* xxx */

Comments are very helpful in troubleshooting style changes. When creating your designs take a few seconds to jot down a comment here and there.

Great uses of comments include labeling the starting and ending location of id- or class-identified divs, putting temporary holds on features that may or may not be needed in the final design — often called commenting out code, sectioning long stylesheets into more easily readable forms, and specifying the author or location of the code.

Tips For Search.php and Its Searchform Script in WordPress

The more you twiddle with WordPress the more you will learn about it. Makes sense, yes? Read on for a couple tips on coding and styling the WP search function.

Check out these search function tricks for your WP blog:

  • Use the right path in the call to the searchform.php. While you want to search all the important text on your blog, you don’t want your visitors to search your entire server. Some pages may have <?php echo $_SERVER ['PHP_SELF']; ?> as the value for the action attribute of the search form and that could enable a search of the entire server. Restrict the search to the content of your blog by using <?php bloginfo ('home'); ?> instead.
  • Modify search.php to allow for personalization or styling of the search output. Wrap a div around the output to be able to stylize the content with a new id or class. For instance, the following code assigns the value of the variable $s to the value of the search term with any special characters stripped from it. The code also specifies the leading text that appears when search results are returned to the screen. Try searching for a term in this blog to see the output.

<?php $s = wp_specialchars($s, 1); ?>
<div id="search-phrase">
<?php _e('We found the following posts that matched your search criteria: ' . "$s"); ?>
</div>

  • Target the search results in style.css with the new id or class. Applying an id to the wrapping div lets you target the leading text of the search results in your style.css stylesheet. In the example above the stylesheet could be used to style div#search-phrase to draw the reader’s attention.
  • Use wp_specialchars() when calling for variables returned by searchform.php. Echoing <?php echo $s; ?> is a bad practice because it may allow malicious code injection. When returning values from any database make sure to use wp_specialchars() to first strip any “special characters” before outputting to the screen.

Keep reading and learning!

Theme Description for WordPress Blog Lies in the Stylesheet

So, you’ve embarked on creating your first WordPress theme. Lots of questions arise, like “Where the heck do I put a description for my new theme?”

Open up the stylesheet, style.css, and insert several commented lines at the beginning like so:

/*
Theme Name: My First WordPress Theme
Theme URI: https://www.computeraxe.com/
Description: This is my first wordpress theme.
Version: 0.1
Author: LizzyFin
Author URI: https://www.computeraxe.com/
*/

Everything after the “:” is cataloged by WordPress as theme metadata, or information about your theme.

The theme name, description and version will appear in the Admin/Presentation/Themes panel to describe the WP theme. A separate screenshot of the functioning theme completes this picture.

The author’s name and URI, as well as the theme URI where one can see the theme in action, are important details to include at the top of every WordPress stylesheet.

Wrapper Div Not A Full Page with Firefox But Looks Right in IE7

Errors inevitably find their way into your files while you’re developing new themes or basically while doing anything with CSS.

Once an error is fixed jot down a note as to how you got the look you were going for and that in itself should help you remember what you did correctly. So, here’s a CSS tip for myself and maybe a few other developers interested in creating WordPress themes.

I was checking out how a border would look around the whole page and this error became obvious. Maybe not an error per se, but the output was not the same between Firefox 2.0 (Fx) and Internet Explorer 7.0 (IE7) so something needed to be fixed.

Problem was that the wrapper div, which should hold everything between the opening and closing body tags, did not extend all the way down the page to envelope the footer in Fx, but it looked as expected in IE7. I could tell there was a difference in output between the two browsers because I used <border: 2px solid #f00;> in the css stylesheet for #wrapper. That should have put a bright red rectangle around the wrapper, and in essence the entire WP page.

firefox-needs-clear

Firefox 2.0 didn’t let the #wrapper div enclose the entire page. Notice the red line at the top of the image and the dark grey background for the post.

firefox-needs-clear-ie7-doesnt

IE 7 filled the page as expected without the use of a clearing div. Notice the red box around everything and the lighter color to the post.

Divs were properly closed as the XHTML code grabbed from View Source validated ok.

The solution I found was to insert a spacer clearing div just after the end of the footer div. Somehow that forced the #wrapper to go all the way to the bottom of the page in Firefox.

New CSS entry:

.spacer {
clear: both !important;
}

New XHTML entry added at end of footer.php:

<div class="spacer"> </div>

Now, for the time being everything looks identical between Firefox and Internet Explorer 7.