Popup contact form in WordPress

10 Mar 2011 11:25 | Geplaatst door Marcel

It is possible to make a contact form that is shown with a popup. You can compare it with a Lightbox popup. There is no plugin in WordPress that does this for you, so I decided to make something myself with some html/css and javascript.

Javascript

First I will show the javascript that makes the popup possible. You can place this code in header.php of your WordPress theme.

You can see that with the calling of the function show_me(), that there’s a div set to display:block, and there’s an animation in jQuery that makes it non-transparent. To have the overlay for only 20% transparent I used as background of the div a half-transparant png.

HTML

The html code can be placed in footer.php, at the end, just inside the body.
Make sure you get the shortcode for Contact Form 7 right. Here there are added some spaces for readability.

To make the code visible, we place a button or a link in our template, with an onclick event. When you click this link the popup will show.

CSS

The CSS code is somewhat bigger.

Here you can see that #contact_overlay gets a position:absolute, and falls over the normal document. The top:0 will place it on top.

IE6 – IE8

In IE6 till IE8 the problem is that the transparent png is completely black, and not transparent anymore. This is because IE6 – IE8 has a problem with opacity. If you change the opacity of a transparent png, the transparent part turns black.
You can get around it by using a gif file for IE. I didn’t get it right with a halftransparent gif either, so I resolved to a different solution. I used a gif of 4 pixels, of which 3 are black, and 1 is completely transparent. In a stylesheet that loads for IE6 – IE8 you can add this gif.

It is possible to make a contact form that is shown with a popup. You can compare it with a Lightbox popup. There is no plugin in WordPress that does this for you, so I decided to make something myself…
Read more...

Kwyjibo muziek

28 Feb 2011 22:35 | Geplaatst door Marcel

Ik weet niet precies meer hoe ik er aan kom, maar een aantal jaar geleden kwam ik het tegen op Orkut, Google’s community-site, die nu zo populair is in Brazilie.
Het is muziek van een Nederlander, en het klinkt geweldig. Ik heb begrepen dat hij muziek is gaan maken voor tv-programma’s, en niet zelf door wilde als singer/songwriter. Ik luister er in ieder geval graag naar.
Hier volgen de linkjes:

Kwyjibo – Letting Go (download)
(html5 player)

Kwyjibo – Living Sun (download)
(html5 player)

Kwyjibo – Push Me (download)
(html5 player)

Kwyjibo – So Cool (download)
(html5 player)

Kwyjibo – Where I Belong (download)
(html5 player)

Ik weet niet precies meer hoe ik er aan kom, maar een aantal jaar geleden kwam ik het tegen op Orkut, Google’s community-site, die nu zo populair is in Brazilie. Het is muziek van een Nederlander, en het klinkt geweldig.…
Read more...

Custom search results in WordPress

24 Feb 2011 09:52 | Geplaatst door Marcel

In WordPress it’s easy to use a widget for searching within the website. Often the standard search query suffices. But sometimes you want to refine the search options. This can be done in a simple way by adding extra fields in the form.

The function get_search_form() has standard as output in WordPress 3.0 the next html:

The only variable that will be submitted here is “s” with the value of the search query, in this case “searchtest”. However, you can refine it in many ways. For example by only showing posts in the search results. This can be done with the next addition:

Here we submit the value “post”. The default value is “any”, meaning, posts, pages, etc.
There are many additions like this. With a var_dump() of the object $wp_query you can see all the default values of the search variables. With a var_dump() of $wp_query->query you can see the current query.

Searchform.php

You can make this set of input-fields the standard search query by adding a searchform.php in your theme directory. The searchform.php can look like this:

Each time you call the function get_search_form() you will get the right form.

In WordPress it’s easy to use a widget for searching within the website. Often the standard search query suffices. But sometimes you want to refine the search options. This can be done in a simple way by adding extra fields…
Read more...

Prestashop…

16 Jan 2011 11:57 | Geplaatst door Marcel

Vandaag ben ik Prestashop aan het evalueren voor mijn werk. Alles ziet er geweldig uit, eenvoudig opgebouwd, een licht systeem, relatief makkelijk te themen. Ook Smarty tags ziet er wel praktisch uit.
Tot ik het laatste puntje op mijn lijstje afwerk. Hoe is de documentatie. Wat blijkt, er is geen documentatie. De wiki is zo goed als leeg. Eerst schrok ik, maar nu moet ik huilen. Dat is wel vreselijk.

Vandaag ben ik Prestashop aan het evalueren voor mijn werk. Alles ziet er geweldig uit, eenvoudig opgebouwd, een licht systeem, relatief makkelijk te themen. Ook Smarty tags ziet er wel praktisch uit. Tot ik het laatste puntje op mijn lijstje…
Read more...

jQuery plugins in WordPress

03 Dec 2010 13:53 | Geplaatst door Marcel

WordPress is origineel opgebouwd rond een andere javascript library, Prototype. In latere instantie is er pas jQuery aan toegevoegd. De gebruikte jQuery is echter licht aangepast om niet te conflicteren met Prototype. Veel plugins gebruiken ook deze jQuery.
Probleem kan echter zijn dat de eigen toegevoegde jQuery scripts niet goed werken wanneer de jQuery van WordPress wordt gebruikt. Er is een goede oplossing hiervoor.

De oplossing

De oplossing houdt in dat we de eerste regel van onze eigen jQuery scripts aanpassen.
De regel die eruit ziet als:

Veranderen we in:

Zo wordt in het script dat we gebruiken ook jQuery daadwerkelijk aangeroepen.
De oorzaak ligt er namelijk in dat het $ teken gebruikt wordt om jQuery aan te roepen binnen een script, maar omdat WordPress rond Prototype gebouwd is wordt dat binnen Prototype juist aangeroepen. En dat werkt niet.

We kunnen deze aanpassing loslaten op alle “$” tekens in het betreffende javascript. Dus simpelweg een Zoek-en-vervang van $ door jQuery.

WordPress is origineel opgebouwd rond een andere javascript library, Prototype. In latere instantie is er pas jQuery aan toegevoegd. De gebruikte jQuery is echter licht aangepast om niet te conflicteren met Prototype. Veel plugins gebruiken ook deze jQuery. Probleem kan…
Read more...