Tag Archives: wordpress

Assigning a “current” class in wordpress main menu links for single page websites

Single page websites look really cool. Ok, they are not always helpful, especially for sites with lots of content, but if the scope of the site is to present simple information about a person, a product or a small company, then single page websites are a great choice.

What if you want to avoid purchasing a theme and try to make one modifying let’s say twenty twelve theme (my favorite since the last year). You create the layout, insert the content make the site look stunning. You also create the menu links which point to anchor links within the single page (for example “about”, “portfolio”, “contact” etc…

Ups, here comes the problem. How do I assign a custom “current” class in the menu link when

  1. it is clicked and the page scrolls to the corresponding section
  2. the user scrolls manually and when each section appears in the viewport, the corresponding menu link becomes highlighted.

Of course we are talking about fixed positioned menus, either on the top, on the side or at the bottom of the website that remains always visible regardless the scrolling.

WordPress assigns automatically such a class (at least for themes such as twenty eleven or twelve) in the menu items but only if the pages are different. When you create custom links that point to anchor points within your single page website, no such luck….

Luckily there is a solution and it is based on a great plugin developed by Trevor Davis. It is based on jquery, the scrollTo plugin and his own plugin jquery.nav.js.

You load these scripts from the footer of your site (before the closing body tag within the footer.php file). Jquery script is loaded by default from wordpress.

<script src="jquery.scrollTo.js"></script>
<script src="jquery.nav.min.js"></script>

Just after these lines you call the script

$(document).ready(function() {
$('#menu-mainmenu').onePageNav();
});

Notice the bold id that you target when you call the script. You can find the correct id name for your menu if you see the generated code of your site from your browser debugger (chrome and firefox have great debugging tools). It is the id of the ul list that contains the links you created for your menu from inside the dashboard. For more information and options check Trevor Davis.

Now that you assigned a “current” class in your menu of your one page site, you can style create wonders for the selected menu items. The plugin works perfectly!!

Advanced post slider for wordpress and read more link to excerpts

Advanced post slider is a wonderful plugin that allows you to display not only excerpts from posts but also from pages as a slideshow wherever you want through shortcodes (perfect for homepage for example).

Everything is nice and customizable but it bugged me that there was no option to insert a “Read more” link or button below the excerpt. The title of the displayed post or page is clickable and links nicely to the corresponding content but…. come on, we need a “read more” button there….

So, after a quick search in the web I found a nice and easy solution. I wanted to post this solution in two topics within the wordpress forums about this specific problem for this plugin, but the topics were closed, unanswered, so here comes the answer in my blog.

Open your functions.php file and paste these lines of code:

function new_excerpt_more($more) {
global $post;
return '… <a class="readpost" href="'. get_permalink($post-&gt;ID) . '">' . 'Read More »' . '</a>';
}
add_filter('excerpt_more', 'new_excerpt_more');

This will replace the […] after the excerpt with a read more link. I have added an extra “readpost” class for the link so that you can style it easily through css.

Add HTML code to widget titles

Sometimes the seemingly easy things aren’t that easy after all. Someone would think that adding simple html code to a widget title (for example to create a link out of it or to break it in two lines) would work out of the box, but nope, wordpress goes and strips away all of your nice html code that you place within your widget title…

Workaround? Luckily it exists. Thanks to thewebprincess.com (such a beautiful address btw) I found this helpful code that you can also place within your functions.php file of your child theme

add_filter( ‘widget_title’, ‘your_html_widget_title’ );
/**
* html_widget_title function.
*
* @access public
* @param mixed $title
* @return void
*/
function your_html_widget_title( $title ) { //HTML tag opening/closing brackets
$title = str_replace( ‘[‘, ‘<‘, $title );
$title = str_replace( ‘[/’, ‘</’, $title );
$title = str_replace( ‘]’, ‘>’, $title );
return $title;
}

Now go and insert your beautiful html code in the title such as a nice <br/>  to brake the title in two lines. Doesn’t work? Heh, didn’t do the trick for me either. BUUUT don’t go away.

I looked at the above code more closely and I saw that it replaces the with <. So, I thought with whatever little remained from my brain after a long day’s work to write my code like that. [br/] instead of <br/>. 

Same trick if you want to wrap your title in <a> tags. Use [a href=….]Your title [/a]. And it works.

S2members registration form and custom fields not saving

Today I was trying to customize the registration form of S2members plugin for wordpress and add some extra custom fields in it as my client requested. Why should this be easy? It should… theoretically, but it wasn’t. No matter what kind of custom field I wanted to add, when I clicked on “save”, the page was not reacting. If I clicked on “save” again, I was getting a notification that “another field with the same unique name, is already added”.

What now?

Luckily, there is a solution to this issue (or else I wouldn’t make this post). Fire up your ftp and locate the root folder of the s2members plugin. There you will find its own .htaccess file. Download it and open it with a text editor. Inside it, comment each line of it (should be arounf 4 lines). To comment out, put infront of the first word of each line a hashtag (#). Without a gap between the # and the word. Save and re-upload the htaccess where you found it.

And problem solved!

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..)

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.