Author Archives: Zisis Paparidis

WordPress page switches to quirks mode if viewed in ie9. Why?

Today I encountered a strange issue. I was working on a wordpress site for which I created a new wordpress page template for my homepage. When I tested the page in Internet Explorer and tried to view it in earlier versions of ie (I have version 10), the document mode was switching to quirks mode when I was trying to view the site in IE9 browser mode (through F12).

I applied the solution with the meta tag

<meta http-equiv="x-ua-compatible" content="IE=edge">

which obviously forces Internet explorer to show the page according to the latest standards of the specific version. Well, I tested again the page in IE9 browser mode, the quirks mode didn’t appear, problem solved… or not?

Not!. My client told me “I asked specifically that the site displays well in IE, what’s wrong with you?”. I got stressed.

Luckily, people had the same problem as me before and the solution was there. The problem is that because I created a separate page template for my homepage, the comment in the beginning of the template file, which declares the template for the wordpress installation, drove IE crazy. For avoiding the switch to quirks mode, it is ESSENTIAL that no lines above the <doctype> declaration are there. No comments, nothing. The file header.php didn’t have anything above the <doctype>, but the php file responsible for the extra page template did have. The solution is to declare again the same <doctype> as in header.php, just above the comment that defines the extra page template. This is not bad practice as the extra template file loads the header (with the initial doctype) later.

I hope this will help someone as it helped me.

internet explorer stylesheet conditionals make your page dissapear

Why not? That’s logical, isn’t it?

No, relax. I am not sure if this is a general problem or it happened only to me. But of course where there is a problem, there is a solution.

In my case, I was modifying an existing wordpress theme for a client and the homepage design required some explicit design. All worked well until tested in IE7. Layout broken… well, let’s fix them with ie specific stylesheets… but, fixing it made the page dissapear… Great fix Zisi…

What was the problem in my case? Further above inside the <head> tag, there was another IE conditional, exactly the same as  I used to fix my broken layout. The theme was using it for its own purposes. Luckily I got the idea to put the IE specific stylesheet inside this first IE conditional, thus removing the second conditional.

Confused? Long story short…. if there is for example already a IE conditional statement, for example <!–[if lt IE 8]> …. <![endif]–>, don’t use again exactly the same conditional to import your IE specific stylesheet. Place it inside the already existing conditional.

Maybe someone else who is heavily modifying existing wordpress themes will find this useful. Maybe not. Either way, knowledge shared :).

WordPress “read more” button not working – easy fix

Working on a wordpress site that required 3 different “blog” pages, everything went well until my customer said:

“Hey, the read more button doesn’t work”. Cool… I thought. The usual approach to such problems, search the internet for solutions, and lucky me, I found an easy fix.

So, what you have to do is edit the template which the blog uses (index.php or any other custom template files you created for the extra blog pages). Right at the top, just above the “<?php get_header(); ?>” line, insert this one:

<?php
global $more;
$more = 0;
the_content("More...");?>

And voila, read more works like a charm. If you want to change the default text – link that serves as the button to guide your visitor to the full article, find the line

<?php the_content(__("Continue Reading", .... ));?>

The “continue reading” may be different in your case, depends on the theme, also there may or may not be some other content after the “continue reading”. Regardless, change the “continue reading” text with what you want your link to say. It could be for example

<?php the_content(__("Yes, I need more...!!!", .... ));?>

Have fun.

Add a drop down menu to display posts from a specific category in a wordpress site

Sometimes there is the need to have somewhere in your wordpress site a drop down menu with posts from your blog. If you want to do this for posts from a specific category there is a pretty easy way. The code for it is

<form action="<? bloginfo('url'); ?>" method="get">
<select name="page_id" id="page_id">
<?php
global $post;
$args = array( 'numberposts' => -1, 'category' => 2 );
$posts = get_posts($args);
foreach( $posts as $post ) : setup_postdata($post); ?>
<option value="<? echo $post->ID; ?>"><?php the_title(); ?></option>
<?php endforeach; ?>
</select>
<input type="submit" name="submit" value="READ" />
</form>

You can add a class inside the form tag to add some css styling for your dropdown (size, background color, fonts etc…). Inside the <input type=”submit” /> tag you can change the value to something else, depending on what you want it to say. The most essential part is the $args variable. The number after the ‘category’ represents the id number of your posts category, which can be found if you hover over the specific posts category in your dashboard, at the bottom left part of your browser, something like ….category&amp;tag_ID=2…. . In my case it was 2. In your case it will be 2 or something else.
If you don’t need to seperate the category, but want to display posts regardless of category, then delete the

, 'category' =&gt; 2

from your variable. Don’t forget the comma..

Also, if you live the ‘numberposts’ -1, you will display all the posts in your drop down. If you define a specific number (5, 7, 13..) you will have such number of posts in your drop down.
And that’s it. You place this code inside the template file you want the drop down to appear (sidebar, footer etc..)

CSS3 submenu not appearing in iphone and ipad

So, I was working on a website and decided to implement a submenu which would become visible when the user hovers or activates a link in the main menu, using only css, no scripts.

The structure of the menu is a simple ul list and the one of the submenu a nested ul list. Below is just the code of the <li> containing the link “more” which reveals the submenu:


.
.
.
<li id="moreli"><a id="link-more" href="">More</a>
<ul id="submenu">
<li><a id="link-updates" href="blog/">Updates</a></li>
<li>...</li>
<li>...</li>
</ul>
</li>
.
.
.

Notice that the href of the link “more” is blank. I left it blank because I didn’t want to load any page with this particular link, its purpose is to bring up the submenu. Also I didn’t put inside just “#” as I wanted to avoid the reload  of the same page for design purposes.

I tested this structure on my windows pc in 5 browsers (including safari), everything works great. On my android smartphone.. perfect. But my client, who has an iphone tells me “look, Zisis, the site looks wonderful, but the submenu doesn’t come up”.

Great!!

The point was that the iphone didn’t recognize the “more” link with its completely empty href as a normal link, so after clicking on it, it didn’t call up the necessary changes to the css for the submenu to appear. Putting a # inside the href would solve the problem but as mentioned before, I didn’t want the page to reload….

Luckily, very luckily, there is a workaround for this problem which makes the link behave as a link, but also it doesn’t reload the page. What’s the solution?

Just put javascript: inside the empty href. That makes the menu with its submenu look like this…


.
.
.
<li id="moreli"><a id="link-more" href="javascript:">More</a>
<ul id="submenu">
<li><a id="link-updates" href="blog/">Updates</a></li>
<li>...</li>
<li>...</li>
</ul>
</li>
.
.
.

Simple, effective, perfect. Tested on iphone and ipad.

Integrate WordPress with Facebook

Ok, I won’t write anything new in this post. It is just a test post to see how the integration of a wordpress blog with facebook works. For anyone interested, I used the NextScripts: Social Networks Auto-Poster plugin which contains a wonderful and idiot proof guide to help you create the required facebook app in order for you to be able to post simultaneously in your wordpress blog and in your timeline.

For my facebook friends that don’t give a crap about such info, that was a good chance for you to learn something completely useless to you. Cheers.

Site renovation

As of today the site has completely new looks.  The old style was nice, I still like it. However, it could be considered as amateurish… What do I mean? “I have learned a bunch of new tricks and I am applying them all together”.

This version of the style may be also amateurish… but not so much. I am growing through the work I do for other people, and each project leaves, except of sattisfied “clients”, new knowledge for me (and hear plays the typical background military music). I look now at my favicon, the small image you notice at the left, inside the tab that contains the title of the page you are currently in. In photoshop, it looked cool. Now, its tiny version doesn’t… It still needs some work. Thanks for trusting me :).

Zisis

Add a second blog page in your existing wordpress site

I guess most of my posts are about wordpress, oh well :).

So, today I wanted to create a second blog page for a site I am building about dog adoptions. Why two blog pages? Well, the first one is about general stories about stray dogs, the second one will be about specific stray dogs that need adoption. I chose to use the “blogish” option for the “adoption” page, as I think it is the best way to present all the dogs, one by one, and also easier for the administrator to add new stray dogs on the list, as well as edit the information about each one. But enough about the background, the subject is how to add this second blog page.

  • First of all, you have to create the categories for your posts. What I mean:

In my case, category 1 (daily stories) are the posts that belong to the 1st blog page, and are about stories concerning stray dogs in the city of Thessaloniki, and not only in Thessaloniki. Category 2 (dogs) are the posts that belong to the 2nd blog page, and are about the stray dogs (each post of category 2 corresponds to a single stray dog…). So, for your two blog pages, you have to separate your posts in the corresponding categories.

  • The second step is to create a new page template. Attention! Don’t mess with the original themes files, always prefer to work with a child them (copy and paste the necessary files that will be changed, inside your child theme folder).
    This is very very easy. Just use your favorite text editor and duplicate the file index.php. Save this new file however you want (I named it dogs.php). In the beginning of this file, just before the “<?php get_header(); ?>” insert this code:

<!--?php /* Template Name: dogs */ ?-->

Of course you will replace “dogs” next to the template name, with the name you want to give to your template (for example cats, cars, space marines…. whatever).

At the end of this step, you have the initial index.php file of your theme and your new file (dogs.php in my case), which is going to be used for your new template.

  • The third step is to tell these two files, to show ONLY one of the two posts categories that you created in the first step. Index.php will be used for the default blog page, dogs.php will be used for the second blog page.

Inside the index.php file find the line:

<?php while ( have_posts() ) : the_post(); ?>

Just before this code insert this line:

<?php query_posts('category_name=daily-stories&showposts=10'); ?>

Replace “daily-stories” in this line with the SLUG of one of your post categories.

Similarly work on the dogs.php file. Find

<?php while ( have_posts() ) : the_post(); ?>

Just before this code insert this line:

<?php query_posts('category_name=dogs&showposts=10'); ?>

Replace “dogs” in this line with the SLUG of the other category of your post categories.
As you might expect “showposts=10” defines the number of the posts displayed.

Save and upload / replace these files in your themes folder.

  • Final step: Create a new page, name it Blog2 or however you want, and choose as template the new template that you created.

If all went well, your initial blog will be displaying ONLY the posts of category 1, and this new page will be displaying ONLY the posts of category 2. This process doesn’t mess at all with the rest of your wordpress site. If you have your initial blog as a home page, it will remain so. If you have a static home page and the initial blog is a sub-page, it will remain so. No worries.

One more thing I noticed while styling the page. This second blog page may look slightly different than the original one. Using a debuger I noticed that there is an extra css class (“singular”) which causes the css changes. So, it will need some custom css to fix the differences (for example different size of h1 tag) :).

UPDATE

Sometimes, the above mentioned method may not work as it should. Especially the

<?php query_posts('category_name=dogs&showposts=10'); ?>

may break the new template that you created. So, instead of this, find inside the code the line

query_posts(blah blah blah something in here depending on the theme you are working);

and add “.’&cat=15′”. This will make the new line

query_posts(blah blah blah something in here depending on the theme you are working.'&cat=15');

Where cat=15 is the id of the category you want to display in the specific templated blog page. The category id can be found if you go inside the dashboard – > posts – > categories and hover over the “edit” link for the specific category. On the bottom left part of your monitor you will see something like ../edit-tags.php?action=edit&taxonomy=category&tag_ID=15&post_type=….

And there is your id inside this line. For you it will be another number.

SECOND UPDATE (YEAH!!)

And here comes the moment that you realize that when you have finally many posts and they need a second page to show (they have exceeded the default 10 posts per page…), the second page shows the same posts as the same page. EXCELLENT!

Fix this issue by using this code

<?php global $query_string;
query_posts($query_string . '&cat=15'); ?>

Change category number with your own and your are jet.

Resolved problem with custom functions.php theme for child theme

Today I was having an issue with wordpress, again ….

The problem was using a custom functions.php file for a child theme (of twenty-ten theme). I wanted to register a new menu that would only appear in the homepage. I found easily the way through other forums, this was not a big deal. But when I tried to put this in the functions.php file for the child theme (so that the new menu will not be deleted when the parent them gets updated), I noticed that I couldn’t edit files from inside wordpress admin, or login, logout. What I was getting was a beautyful white screen. When I was deleting the functions.php from the child theme folder, wordpress would work properly again.

I tried various solutions I found in the net, deleting all the gaps etc… Nothing worked. Even an empty functions.php with just <?php ?> inside it would break wordpress. I really can’t understand why, but the issue was resolved, when I ommited the closing ?> from the functions.php file inside the child theme folder.

So using this code inside the child themes function.php

<?php register_nav_menus(array('homepagenavigation' =>__('Homepage Navigation','twentyten')));

Notice, no closing ” ?> ” !!!!

the issue was resolved. I really can’t understand why, but if you stumble upon this post, and it helped you resolve a similar issue, then I am happy it helped :).

Dreamweaver CS5.5 and validation of a checkbox and a dropdown menu in a form

It is true that the form validator of dreamweaver is very helpful in adding a simple validation for each of its elements, unfortunately it is limited in textboxes or textareas. So if you want to validate let’s say a checkbox, to see if it is checked or not, then your only solution is to program it yourself (if you have such a knowledge) or search in the web for help.

Today I wanted to validate such a checkbox and a dropdown menu (if anything is selected). For the checkbox, I was lucky enough to find the help from this URL: http://www.justskins.com/forums/checkbox-validation-97769.html.

After some editing from my part, I managed to make it work for my case, and here is the code for validating a checkbox, (and any text boxes). Btw, “form1” is the name and id of my form, “agree” is the name and id of my checkbox:

<script type="text/javascript"> function MM_validateForm() { //v4.0 if(document.forms["form1"].elements["agree"].checked){ getherrors=''; } else{ getherrors='- please read the disclaimer and confirm'; }
var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=document.getElementById(args[i]);
if (val) { nm=val.name; if ((val=val.value)!="") {
if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
} else if (test!='R') { num = parseFloat(val);
if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
min=test.substring(8,p); max=test.substring(p+1);
if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
} } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
} if ((errors) || (getherrors))
alert("The following error(s) occurred:\n"+errors+getherrors);
document.MM_returnValue = ((errors == '') && (getherrors == ''));
}
</script>

Now, if you want to validate a dropdown menu too, this code becomes like this. Again, “form1” is the name and id of my form, “agree” is the name and id of my checkbox and “country” is the name of my dropdown. Its first value (the default one) is set to ” “:

<script type="text/javascript">
function MM_validateForm() { //v4.0
if(document.forms["form1"].elements["agree"].checked){
getherrors='';
}
else{ getherrors='- please read the disclaimer and confirm'; }
if(document.forms["form1"].elements["country"].value!=""){
getherrors2='';
}
else{ getherrors2='- please select your country'; }
var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=document.getElementById(args[i]);
if (val) { nm=val.name; if ((val=val.value)!="") {
if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
} else if (test!='R') { num = parseFloat(val);
if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
min=test.substring(8,p); max=test.substring(p+1);
if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
} } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
} if ((errors) || (getherrors) || (getherrors2))
alert("The following error(s) occurred:\n"+errors+getherrors+"\n"+getherrors2);
document.MM_returnValue = ((errors == '') && (getherrors == '') && (getherrors2 == ''));
}
</script>

I am sure that there are better solutions somewhere, but if it works, it’s ok with me :). Thanks again to Getho from the above mentioned URL for providing the initial code.