WP plugin development using jQuery | XML | OpenWeather API #1

-

I'd like to display some weather information for the city of Glasgow. For this task I'm going to use Open Weater API which can return current weather and forecast data in JSON or XML format. Then I'll use jQuery - JavaScript library for DOM manipulation and AJAX calls.


How to write and use WordPress plugin

To create plugin we need to go to the location root/wp-content/plugins/ and create new folder (preferred option) or just single php file with unique plugin name.

The file need to have some information (plugin name, author, version, etc.) to be properly identified by WordPress as a plugin. This need to be added at te top of the file.


Then plugin need to be activated from wp-admin dashboard, plugins menu


Plugin uses add_shortcode() native WordPress method that allows to declare name and callback function which will be executed when given name will be added to the page or post(inside the square brackets). I created new Page called Glasgow Weather and calling this shortcode name which executes the assigned function. More info on Shortcode API here.



Adding jQuery to the plugin

To be able to use jQuery in our plugin we need to import jQuery library using wp_enqueue_script() method, when we give name and required URL for the file.


JavaScript cannot be written directly inside plugin php file therefore I created another app.js file which will be imported into the function which will be executed in desired location.


Short jQuery script to test if its working. It should create the new paragraph and append it to div with class "entry content"... 


Result - nothing new appeared on the screen. Quick jump to web browser developer tools (great place for html / javascript errors debugging) with F12 and we can se an error -  $ is not a function. The problem arises when a different system grabs the $ variable. You have multiple $ variables being used as objects from multiple libraries, resulting in the error.

When I console logged jQuery it showed that this function exist in the system so library was loaded so I decided to locally assign it to the $ sign.


Error has gone but the new paragraph hasn't appear on the screen. Solution for that problem was to execute test code inside jQuery's ready() method which is called for the document object. 


And the result... finally jQuery code has been added to the page. 

Comments

Post a Comment

Popular posts from this blog

E-Commerce made easy with WordPress & WooCommerce

-
Image
  E-commerce introduction E-commerce (electronic commerce) refers to transactions conducted via the World Wide Web. It may involve buying physical or digital products, ordering services or transfer funds. It is booming sector with revenue growing every year. Even  in uncertain times of covid-19 pandemic online shopping is thriving. Purchasing goods from the comfort of own homes and get them delivered even the same day is changing the way how people perceive shopping process. Old ways of buying from brick and mortar stores are about to extinct. Time is the crucial factor when it comes to sales and if shops or manufacturers wants to be competitive on the market starting an online selling platform should be easy and quick. WordPress designed as a blogging platform became now home to millions of businesses thanks to plethora of plugins which allow to set-up selling goods and services in a matter of hours. WooCommerce installation and Setup I will demonstrate how easy is to add the...
Read more

Wordpress Environment Setup

-
Image
Wordpress require server environment (Apache, Nginx), PHP and access to MySQL or MariaDB for storing information. There are couple options available how we can to start developing wordpress powered websites:  Buy dedicated hosting space ( https://wordpress.com/pricing/ ) Create own server based on Cloud Computing Services Amazon AWS  Light Sail or  Digital Ocean  droplet Install on own Apache, Nginx server Linux based computer or raspberry Pi device Install PHP development environment on local desktop laptop -  XAMPP Use popular containerized approach with  Docker I'm going to setup my development environment using Docker. This will remove the hassle of installation and configuration required software on local computer. Instead I will create Docker compose file which use separate image files for (wordpress, php myadmin, and mySQL) and allow for one command set-up of whole environment. All required image files can be found on  Docker Hub  - libra...
Read more

Creating Frontend with React.js

-
Image
 Installing React Development Environment Now let's build independent frontend for the wordpress website using React.js - JavaScript library for creating user unterfaces.  To install React development we use popular npm (Node Package Manager) package  - create-react-app .  I created folder "frontend" for the react application in root folder of the wordpress website. Then use command npx create-react-app . in that folder to scaffold starting react project. Please don't forget to install Node.js which is required for React & NPM packages!! After successful installation we can compile and run the react app in the browser using npm start command in the terminal. Result in the browser, url address http://localhost:3000 Let's install additional NPM packages axios and react-router-dom . First is a promise based HTTP client for the browser and node.js, and second is a tool to handle routes in a single page application using dynamic routing. List of all installed...
Read more