This sounds one of the very interesting topic i have come across.

Adding a Jquery or JavaScript to your WordPress website is very simple and a very tricky thing to do. We can have any kind of a Jquery plugin to work on our WordPress Post or Page by simply adding the JQuery script in to the PHP file available in our Wordpress website. For this we must have a knowledge on the basic Jquery script adding knowledge, as we do in any normal HTML/XHTML web template.

Do get the Jquer/JavaScript code that you require to add in to your wordpress and make available all the files that you might require to add up. Now I did something like this:

Search for the “header.php”, must be available in your theme folder, and then add the code,

“<?php wp_enqueue_script(“jquery”); ?>”

above the code – “<?php wp_head(); ?>” available in your header.php.

Now add your Jquery that you would like to add up in your wordpress, but very important add it after the line “<?php wp_head(); ?>”. So the code after adding might look something like this,

<?php wp_enqueue_script(“jquery”); ?>

<?php wp_head(); ?>

<script type=”text/javascript” src=”<?php bloginfo(‘stylesheet_directory’); ?>/jquery-1.3.2.min.js”></script>

<script type=”text/javascript” src=”<?php bloginfo(‘stylesheet_directory’); ?>/ui.core.min.js”></script>

<script type=”text/javascript” src=”<?php bloginfo(‘stylesheet_directory’); ?>/ui.slider.min.js”></script>

<script type=”text/javascript” src=”<?php bloginfo(‘stylesheet_directory’); ?>/jquery.mousewheel.js”></script>

<script type=”text/javascript” src=”<?php bloginfo(‘stylesheet_directory’); ?>/jquery.gzoom.js”></script>

Here i have added the JQuery scripts – jquery-1.3.2.min.js, ui.core.min.js, ui.slider.min.js, jquery.mousewheel.js,  jquery.gzoom.js.

So its a normal looking script adding in any normal HTML way, but we find the php code comprising of the SRC parameter given in a different way. This is a pre written key word (“stylesheet_directory”) available in wordpress that takes you to the default stylesheet directory of your theme in the wordpress.

In a similar way we can add the CSS file too that can be added something like,

<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_directory’); ?>/jquery.gzoom.css” type=”text/css” />

and so i am done with my Jquery adding, just add your JQuery and make the code in the POST/PAGE adding on the admin side to be of structure that makes your JQuery to work, with the correct CLASS/ID name to be included.

Hope this post was informative. All your comments and reviews are welcome. Thank you.

I-Frame inserting in Joomla

October 31, 2010

Inserting an Iframe in joomla:

Have you ever tried adding up an IFrame code in to HTML of your Joomla article adding. If not then try adding, it will end up in a failure as it did for me.

Joomla does not supports the direct adding up of your IFrame content through the normal article adding or HTML module adding.

And a solution to this is by simply creating a module of your own of type “Wrapper”.

Okay, so without much ado, lets straight away jump in to the execution,

I had my client to add up a venue location map to be embedded from the Google maps, so as usual i had created my article page of location and added up the Iframe, something like this,

<iframe width=”425″ height=”350″ frameborder=”0″ scrolling=”no” marginheight=”0″ marginwidth=”0″ src=”http://maps.google.co.in/maps?
hl=en&amp;q=gmap&amp;ie=UTF8&amp;ll=13.074874,80.25419&amp;spn=0.045079,0.009213&amp;output=embed”>
</iframe>

and then to the dismay and surprise, my page was blank as below.. the code IFrame was not even detected and was removed from the article.

The solution i was able land up with was to add a module and bring it on to the article. Wondering how??? Do go by these steps,

Check for the Extensions –> Module Manager, and go for New module on the right top of the menu area.

and now select the wrapper type of module from the list and that shows up the below parameters to enter,

Module Suffix is not a mandatory and is out of context to this issue,

URL is where we enter the URL from the IFrame code,

The height and width has to be as required for the IFrame to be displayed on the page,

Auto Height is optional

Auto Add – has to be Yes

Target is also not a mandatory for this issue.

The most important is the Positon on the left side of the page shown below, where instead of selecting from the predefined one, we can straight away go for typing a Self defined position name,

So finally the Custom position made module of type Wrapper is ready to be used.

How do we add it to our article?

Its as easy as adding any normal content,

Just add the belo code in to the place where you want the IFrame to appear in yopur article,

“{loadposition module_position}”

so to our created module we have the code to be added as,

“{loadposition map_venue}”

and yipee.. we have succeeded and the outcome is as below,

All your queries and comments are welcome. Love sharing 🙂

Before we start in to our joomla installation lets make things available that we may need in the whole work for our installation..
we will need a WAMP server to make our joomla work on a Window’s local host, for which we might need to download Wamp and also the joomla pack from the below given links..

For WAMP server – http://www.wampserver.com/en/download.php

For Joomla – http://www.joomla.org/download.html

alright, so once the stuffs are ready lets kick start with the creation of a database of our webite in joomla. This can be done, by doule clicking on Wamp which display wamp icon in our pallet in the task bar near the clock pane down here. On left click on this icon we get a option of phpMyAdmin, click and this opens a page in our browser which is our Wamp database home page. Here we just do as shown below to create an instant of our joomla site database…

just click on “create” will finish our task.

Then comes the real installation of our joomla site. So as downloaded from the above link we get a rar file, extract files in a folder named joomla in the drive path like “C:\wamp\www\”. Now simply get to your browser and type the url – “http://localhost/&#8221; which gives the localhost WAMP dashboard as shown below

click on the joomla folder in the dashboard, which opens up the easy to install wizard of joomla.. lets check the steps one after the other..

Step 1: Language – select your language from the list and click on next,

Step 2: Pre installation check – just check if all the settings are standard as are shown,

Step 3: License – Just give a look at the license and go next if you are comfortable with it, do not forget Joomla is a complete open source 🙂 🙂 is that not a great thing for a developer.. hurray.

Step 4: database – this is where you configure the database settings for your joomla site. So the values as per a Wamp localhost are, for your host name it must be “localhost”, user name as “root” and the password remains blank. There after simple click on next and so our database is done here.

Step 5: FTP configuration – As we are on a localhost we do not have to bother or worry about this and simply select “no” and go on to the next step.

Step 6: Configuration – And here comes our site configuration settings, first of all lets give our joomla site a name.. i have given it as “joomsite”, make your own choice. Then lets give a email id for adminisrator’s purpose. But since we are on a localhost, the mail does not makes any sense for now. But it is important once you take youe site online. Fine then we have a option to enable whether we need any default items created prior to our site launch that will help any starter. So make your choice and finally its all done, ignore all other settings here on Configuration for now.

Step 7: Finish – So its all done for the installation. Is n’t it simple. It was like we just spent a break but have almost done it all for once.. here on its all fun working on Joomla, we just have to play with all the fantastic resources that joomla provides. Here we get a message stating us to delete the “install” folder from the joomla,

we might get to spot this folder at “C:\wamp\www\joomla”,here just delete or remove the install folder and once again come back to the installation page and give the url as “http://localhost/joomla/administrator/&#8221; then as a admin use the password we gave in the installation..with the email id that we specified.
This is how your admin panel looks..

and this is your default joomla site which can be viewed by cicking on the Preview option in the admin panel on the top to show our site as below..

This is just an empty stuff… i woul share few magic og joomla, just visit the links of few good and awesome joomla made websites,

http://quizilla.teennick.com/

http://cricbuzz.com/

http://www.lakefranciscottages.com/

http://www.guggenheim.org/

http://www.tgdaily.com/

http://ihop.com/

Drupal… A short review..

November 16, 2009

Hello friends..

I have been working on drupal for the last one month and have found it to be a very good CMS that i have ever met with. This was for my website project that i had to to choose for a CMS. Then rose a doubt about which CMS might really be of a best option and really a sourced option. Going by the reviews and posts all over the net i opted with Drupal. This was the reason why i chose Drupal.

Though initially i had no idea about it, it fees really good knowing this new CMS tool which has been on this planet for a long time and has been doing good as a performer. Drupal as know is a content management system that helps in the website development with all its easy and readily available plug in like modules that enables any naive developer to make some really awesome and functionally strong websites.  So i would suggest any beginner in this to start with this CMS if u really want to feel proud about your work. This acts as a real inspirational tool as you get to see your awesome output working so efficient.

Let me give a clean preface of what really its all in this so called DRUPAL the CMS. It is a big block constructed with all small sets of nodes which are the bilding blocks for the Drupal. Then this comprises of  all automatic generated PHP codes for every work you do with all information about our work and the files gets stored as a data base which makes it a highly sophisticated and a well designed software like tool. In simple words i can say these CMS are nothing but your tool or software to develop your own cool and functioning web sites. The best thing about this are the Modules. These are the really cool and the most amazing part of drupal. Suppose you need a  very cool looking gallery to display your images on the site. What is the best option available?? You might be forced with the only option of making one on your own??? ah ha… no no… this is why i say that “DRUPAL” is your best buddy:) Yeah and that is because its the ability of CMS like Drupal  to provide you with a ready made gallery available. what you need to do is pick and drop… isn’t it awesome…. 🙂 🙂

Hurray…. thats wh i say friends start your Drupal site today.

Hey.. wait wait.. hold on… where are these modules available?

Hmmm.. they are free and available for you to download on the official Drupal organization site.. “http://drupal.org/“.

Alright.. then how about the learning process??

ahh.. well that is the more of a best thing about this CMS.. and that is its learning resources. the drupal organization site http://www.drupal.org has each and every thing about anything and everything related to the need on our CMS. So that makes it more interesting and amazing. There are lot to know about this which you can catch over the Drupal site or may be throgh some active discussions over here on this blog.

Do ask in your doubts and any questions related to this on my blog, i am very sure of answering each and every one of them..

“Keep learning and never let your thirst for knowledge die'”

%d bloggers like this: