WebsCodes : 2016

Tuesday, October 25, 2016

Create a Simple Wordpress Theme

What is a Wordpress Theme?

A Wordpress theme is a collection of documents that enables us to control the layout of our site. The themes are made up html code along with PHP code and even Javascript and CSS files.

What are the basic files to create a theme?

To create a simple theme we need to files at least:

1. style.css
2. index.php

Other important files to consider are header.php as well as footer.php. These two files are not mandatory but are always included in any theme.

What information must be placed within the CSS file?

As a comment, the following lines must be included at least:

/*
Theme Name: The name of the theme

Author: Your Name
Author URI: URL of the site of the author
Version: The version of the theme, for instance 1.0, 2.5 and the like

*/

What is the loop in Wordpress?

The loop is the PHP code provided by Wordpress to iterate through the posts so that we can display the content of each one.

What is the header.php?

It´s the document in which the PHP code for the header of the page is placed. It contains the DOCTYPE, the <html> tag, the HTML header <head></head> and the opening tag <body> which defines the beginning of the content that displays to the browser.

What is the footer.php?

It´s the file that holds the code for the footer of each page of the site. In this file the closing tags </body> and </html> are found.

Check the video below on how to create a simple Wordpress theme:

Friday, October 21, 2016

What is Wordpress?

Wordpress is a CMS (Content Management System) that allow us to create websites or blogs. Nowadays, Wordpress is the most popular CMS since around 15-20% of all websites on the internet use it. It´s extremely popular beacause of the ease of use as well as the huge community that gives support to it.

What are pages and posts in Wordpress?

Basically, a site based on Wordpress consists of Pages and Posts. Pages are fixed pieces of information that are orginized hierarchically while posts are publications ordered chronologically. Both are very similar and distinguishing between them is a bit difficult at the beggining.

Posts can be added labels which are keywords that describe the content of a given publication. Meanwhile pages cannot use labels. Moreover Posts can be ordered by using Categories which help the visitors find them faster when browsing the site or blog.

One important feature is that posts are commonly organized chronologically on the homepage when it comes to blogs. Therefore when a visitor enters the blog the first page displays with the most recnt publications on top of the page.

One important consideration is that Blogs display posts while Websites display pages. Nevertheless, sometimes we can find combinations where Websites contain a blog.

What are the themes in Wordpress?

Themes control the appearance of a site or blog that uses Worpress. Themes are a collection of files that work together to crate the layout of the blog or site in Wordpress. Thems are made up of files such as HTML files, CSS files, Javascript files, HTML files and even images.

One importat feature of Wordpress is that it enables customization of the themes so that if the owner of a site doesn´t like the layout of the site or blog then it can be shiften by customizing the them or even by creating a completely new one from scratch.

What are the plugins in Wordpress?

In Wordpress, plugins permit blogs or sites to be added new features. Plugins are programmed by using PHP and javascript files. Wordpress has a repository of free plugins where you can dowload free and user-friendly plugins to add features to your site or blog.

The following video shows a great introduction to Wordpress as a CMS:

Sunday, September 25, 2016

How to monetize your Blogger´s blog using adfly´s banners

Addfly logo

In this post I will show you how to monetize your Blogger´s blog by using the banners of addf.ly which is one of the most famous link shorteners worldwide. Currently I'm not using this service to monetize my blog since I want to try other services out but most people want to use it since it´s very popular.

Add fly offers several ways to monetize your blog such as banners, popunders and link´s shorteners. Here I´m going to explain how to add banners to your blogger blog. Banners will display each time the user clicks on any link of your website.

1. First your have to create and account at https://adf.ly, the procedure is quite simple since you only need to fill in a small form like the one show below:

2. After logging in to Adfly, the Dashboard appears and you have to go to the Tools Tab where the codes for the banners will display, the picture below illustrates that:

Adfly dashboard

3. Two portions of code display, in this case I´m going to use the second portion of code that enables us to transform all the links of our site into "adfly Links", in other words after users click on any link of my site the corresponding page displays along with a banner at the top. The following image displays the code I´m talking about:

Adfly banner´s code

4. The above image displays my id number which changes depending on the user. Now we must copy the code and go to the Blogger Dashboard. Select the Layout menu-item:

Adfly dashboard

5. Then click on Add a Gadget:

Adfly´s gadget´s

6. A window displays listing several gadgets available, you must select the option HTML/Javascript as shown below:

Adfly´s gadgets

7. Then on the form that displays you must paste the Adfly code as shown in the picture below:

8. As shown above you can ignore the Title field. But before saving the changes you must note the following details:

a) The line var adfly_advert = 'int'; must be shifted to var adfly_advert = 'banner'; so that the banners display on top of each page after the visitor clicks on any link.

b) The line var exclude_domains = ['example.com', 'yoursite.com']; can be shifted to var exclude_domains = []; so that all links take visitors to pages that display banners.

c) If you want to prevent some links from displaying pages with banners at the top just insert the domains within the following line of code var exclude_domains = ['example.com', 'yoursite.com'];. For instance, if your site has the following HTML code for a link <a href="www.google.com">google search engine</a> and you want to prevent that link from displaying pages that contain banners at the top then the line of code looks like this var exclude_domains = ['google.com'];.

9. Now save the changes and go to your Blogger´s blog and click on any link. The page that displays contains a banner at the top. The below image shows one page of my other blog on maths http://freemathsexercises.blogspot.mx/:

Adfly´s banners

Well now you know how to add Adfly´s banners to you Blogger blog , share this post with your friends!!! bye