10 Useful WordPress Add-ons for Firefox

Almost in all our blog posts we need to add external links, images, etc. to enhance the quality of our posts. The traditional method to do that is to first write the complete article and then search for the relevant data on the Internet and, when found, insert it in the blog post. But you can save a lot of time by using the Zemanta WordPress add-on. If Zemanta is installed and you are writing an article in WordPress then the add-on displays relevant articles, links and images that match with your text and you can choose which ones to insert right from the WordPress dashboard. Zemanta will also display the attribution details of the image. Obviously this is a great help in your blogging journey.

This is just one example on how add-ons can help you in blogging. If you want more of these fantastic add-ons then you have come to the right place. In this article I present you  10 useful WordPress add-ons for Firefox.

The add-ons collected below have different purposes. For example Deepest Sender, can be used to post to your WordPress website even when you are on a different page. This can be of a great help when,  you are reading an article on the Internet and you think you can build upon the idea presented there in a better way. All you have to do is to hit Ctrl+ and you will be in your WordPress dashboard and can start typing.

So scroll down and find which one suits you best.

(more…)

WordPress and PHP


In the last few weeks, we’ve learned some basic concepts on HTML5 and CSS. A simple analogy we can use as to how they work can be likened to writing a traditional letter sent via snail mail. HTML5 is like marking and dividing the content of the letter into sections like: the date, the greeting, the body, the closing, and the signature. CSS is what is used adds pizzazz to the is the way the letter is written: stylized handwriting, choice paper, and images and illustrations to enhance it. The result is a beautiful handwritten masterpiece ready to be sent and read by the reader. This week, we add on to our WordPress building blocks and learn how PHP comes into the picture.

To review, here’s how we defined PHP:

PHP (initially Personal Home Page tools)

PHP is a recursive acronym for PHP: Hypertext Preprocessor. It is a popular server-side scripting language designed specifically for integration with HTML, and is used (often in conjunction with MySQL) in Content Management Systems and other web applications. It is available on many platforms, including Windows, Unix/Linux and Mac OS X, and is open source software.

Adam Brown shared this simple and easy to understand explanation to tie it all up together:

When you view a webpage, the server (i.e. the site you are viewing) sends a bunch of HTML to your computer. Your browser (Firefox, Safari, Internet Explorer, whatever) then turns this HTML source into the pretty stuff you see in your browser. With pure HTML, every visitor to a website will see the same thing, no matter what.

For example,

if we make an HTML page with this content:

<p>Today is December 1st, 2007<p>

…everyone who visits the site will see this:

Today is December 1st, 2007

…even if it is not December 1st, 2007.

What if you want to modify that so it always shows the current date? That’s where PHP comes in. PHP is processed by your server (i.e. by the site you are visiting). The server evaluates any PHP in the page before sending anything to your browser. So if we write this in the web page:

<p>Today is <?php echo date(‘F jS, Y’); ?></p>

Then the server will change that PHP expression into the current date, then send that as HTML to your browser, which then does its part.

Remember: The server processes PHP, but the browser processes HTML.

PHP does not get sent to the browser, only the HTML that the PHP produces.

People sometimes wonder why their theme’s index.php file looks nothing like the HTML source they see in their browser. Well, now you know why.

(source: PHP 101- Adam R. Brown. Check out his website for more easy to follow tutorials.)

Why is it important to understand PHP? Because WordPress is written using PHP and requires it for operation.

Till next!

10 Inspirational Typography Plugins for WordPress

Believe it or not – typography or the way you present your text and media on your website – plays a crucial role in building your brand name. Did you know? There are books comprising thousands of pages that teach you how to use a consistent typographical style on your publications. Such as well as “Style Guides” like The Chicago Manual of Style, The MLA Style Manual, Hart’s Rules or The Oxford Guide to Style, etc. Different organizations use different style guides and apply them on their publications in order to achieve consistency throughout the text. If a person who has been reading The Guardian for several months will be asked to identify the paper amongst a collection of many other papers such that the name of the publication is hidden from view, he will have little or no difficulty in identifying it. This is because The Guardian, just like all other standard newspapers, use a specific set of fonts, a specific indentation, a specific line gap, etc. in its publications. Such things help create an authority and reinforce the brand name.

It is not necessary that you follow the standard guides for your publication. If you want you can create your own set of style rules or mix some of your own personal tastes with any standard style manual. Whatever you decide, to help you in your endeavor I present you with 10 inspirational typography plug-ins for WordPress. Some are free while some others cost a nominal amount.

(more…)

Woop Woop WordPress CSS Style

Last week, we learned a little bit about basic HTML (Hypertext Markup Language), how it started, how it works and how to read and write HTML “crudely”.

To recap, here’s what we did:

1. First, we took this block of text (Hypertext):

ACT I. PROLOGUE.Two households, both alike in dignity In fair Verona, where we lay our scene,From ancient grudge break to new mutiny,Where civil blood makes civil hands unclean.From forth the fatal loins of these two foes A pair of star-cross’d lovers take their life; Whose misadventured piteous overthrows Do with their death bury their parents’ strife. The fearful passage of their death-mark’d love, And the continuance of their parents’ rage, Which, but their children’s end, nought could remove, Is now the two hours’ traffic of our stage; The which if you with patient ears attend, What here shall miss, our toil shall strive to mend. SCENE I. Verona. A public place.

2. Marked it up (Markup) like this:

<p>ACT I.<p>

<p>PROLOGUE.<p>

<p>Two households, both alike in dignity In fair Verona, where we lay our scene, From ancient grudge break to new mutiny, Where civil blood makes civil hands unclean.<p>

<p>From forth the fatal loins of these two foes A pair of star-cross’d lovers take their life; Whose misadventured piteous overthrows Do with their death bury their parents’ strife.<p>

<p>The fearful passage of their death-mark’d love, And the continuance of their parents’ rage, Which, but their children’s end, nought could remove, Is now the two hours’ traffic of our stage; The which if you with patient ears attend, What here shall miss, our toil shall strive to mend.<p>

<p>SCENE I.<p>

<p>Verona. A public place.<p>

3. To make it appear like this when published online:

ACT I.

PROLOGUE.

Two households, both alike in dignity In fair Verona, where we lay our scene, From ancient grudge break to new mutiny, Where civil blood makes civil hands unclean.

In a nutshell, we took some plain block of text we wanted to publish online, marked it up using some simple tags to create a more readable, web friendly version that browsers like IE, Firefox, Safari, etc. will recognize. The tags we used: <p> </p> <h1> <h2> were just hypothetical sample tags, not necessarily real html tags, just to demonstrate how HTML works.

Believe it or not, there was a time when the web was really that simple. Plain, boring, unadorned text. That was before – until a new markup language was created – devoted to styling the look of a web page. The new markup language was called Cascading Style Sheets (CSS).

Going back to our definition of CSS:

CSS, or Cascading Style Sheets, is a W3C open standards programming language for specifying how a web page is presented. It allows web site designers to create formatting and layout for a web site independently of its content.

A bit of CSS history:

“According to the W3C, the CSS specification was drawn up in response to “pressure from authors for richer visual control.” The demand for better control of web pages was certainly there, but browsers in the late 1990s just weren’t up to the job. They implemented CSS very poorly or not at all. As a result, only the very brave or foolhardy adopted CSS in the early stages. Nevertheless, the W3C continued work on the specification and brought out a new version, CSS2, in 1998. This retained all the features of CSS1 and added some new ones.”

CSS gives you the power to set styling rules in one place. When you want to make changes to your web site, you make changes in that one place, and your whole web site changes automatically to reflect those new styles.

Why are they called “cascading” style sheets?

The cascade in CSS refers to the way that rules are added together and applied cumulatively. Think of the cascade in the literal sense of a waterfall or a river. As a river flows from the mountains to the sea, it starts off as a tiny trickle, but as more water is added through tributaries, it becomes bigger and more powerful. Yet the water in that original trickle is still part of the whole.

CSS works in a similar way. You can create a style rule that trickles down through the whole page. For example, it’s common to set the background and text colors in a rule for the body of the page. But lower down, new rules can be added that affect the font or size of the text without changing the color. And just like a river can break into a delta as it reaches the sea, you can break the CSS cascade into different strands, so that a sidebar looks different from the main content or footer of the page.

(source: Getting Started with CSS – David Powers)

With CSS, you can design your web page using different design elements, choose different fonts and font styles, add color, images and every design bling you can think of to jazz up your page. All this is done on a separate stylesheet that is linked to your main HTML code which means you can change the design elements anytime without recoding over and over. Simply put, CSS dresses up your drab and boring HTML and adds some “woop woop woop” to it – CSS style.

More next week.

30 Inspirational Non-Profit WordPress Themes 2013

Amongst all the civilized life of shopping malls and movie lexes we must not forget that there are parts in this world whose inhabitants don’t get even the basic necessities of life like food and water. Innocents get killed everyday in calamities like bomb blasts, earthquakes, tsunamis, etc. Children are out of schools as their parents cannot pay for their education. People die even from minor curable diseases merely because they didn’t have the money to see a doctor. The situation is far more serious than what I can describe in a few sentences. The statement that I wish to make is that we should care about others and should donate generously to non-profit organizations that are trying to help those in need.

Perhaps the following collection of 30 WordPress themes, designed especially for the non-profits may make a small contribution in making the world a better place.

Of course different niches have different site design requirements. A social networking site should look and behave in a completely different way than what a gaming site should look like. Special care and attention was devoted to the following templates so that they craft out into a good and clean look, which is what is required for non-profit organizations.

Some of the templates below are without charge but due to certain restrictions we can’t just giveaway everything absolutely free, although we would have loved to. Hence we have charged a nominal amount in the remaining templates. Scroll down and take a look.

(more…)

Breaking the WordPress Language Barrier

“The Miracle Worker” is an inspiring true story based on the life of the young Helen Keller, blind and deaf since infancy, and her gifted teacher Miss Anne Sullivan. The film revolves around these two strong willed characters and the battle to overcome the obstacles that prevent Helen’s ability to communicate. Because of the strong and yet loving persistence of Miss Sullivan, Helen overcame. The language and communication barrier broke and Helen learned how to speak. How did it happen?

The “miracle” in The Miracle Worker occurs when Sullivan and Keller are at the water pump refilling a pitcher. It is at this moment that Keller makes the intellectual connection between the word Sullivan spells (using sign language) into her hand and the tangible substance splashing from the pump. Keller demonstrates her understanding by miraculously whispering “wah-wah”, the baby talk or gibberish equivalent of “water”.
source: Wikipedia

Many of us can probably relate to the struggle of making that “intellectual connection” between words and concepts especially when learning a new or unfamiliar language. Learning a new language requires an investment of time and effort. A steep price but the fruits of which is that “Aha!” moment when comprehension finally sets in and the satisfaction of knowing that the intellect and understanding have miraculously met.

For many, trying to learn the language of WordPress is a daunting thing. For the average person, it is indeed a struggle but, the good news is, it is not impossible. So what language exactly are we trying to understand?

HTML – The language of the web

Going back to our previous definition of HTML, we said that HTML, or Hypertext Markup Language, is the W3C standard language with which all web pages are built. It is the native language, the mother tongue of all other web languages – the building block from which all other web languages are built. Once we understand what it’s for, how to read it and write it, the easier it will be to understand everything else.

Let’s break it down a little bit more. The book HTML5- 24 Hour Trainer by Joseph Lowery writes:

The Internet, or World Wide Web, is essentially a network of computers. Browsers, like Internet Explorer, Firefox, or Safari, are computer programs that display web pages, which, in turn, are written in HTML. So, at its heart, HTML is the language of the Web.

As noted, HTML is an abbreviation for HyperText Markup Language. HyperText is text presented on one electronic device – whether it’s a computer, smartphone, or something else — that is connected, via a link, to other text, which could be located elsewhere in the same document, on a different page in the same website, or on an entirely different site. HyperText is perhaps the defining essence of the Internet: the ability to link from one web page to another, thus creating a web of information.

A simple hypertext system that connects raw textual content pretty much describes the earliest Internet systems. So how did we get to the rich multimedia experience that makes up much of the web today? That’s where the second half of the HTML abbreviation, Markup Language comes into play. The Markup Language part of HTML takes plain text with additional codes or tags and turns raw text into easily readable text on other electronic devices.

Lesson. Read and Write.

Here’s an example of HTML in action. Let’s say we want to send this block of text to be displayed on different browsers and it will be viewed on different devices:

ACT I. PROLOGUE.Two households, both alike in dignity In fair Verona, where we lay our scene,From ancient grudge break to new mutiny,Where civil blood makes civil hands unclean.From forth the fatal loins of these two foes A pair of star-cross’d lovers take their life; Whose misadventured piteous overthrows Do with their death bury their parents’ strife. The fearful passage of their death-mark’d love, And the continuance of their parents’ rage, Which, but their children’s end, nought could remove, Is now the two hours’ traffic of our stage; The which if you with patient ears attend, What here shall miss, our toil shall strive to mend. SCENE I. Verona. A public place.

Although all the information you need to convey is contained here, it’s a struggle to understand the meaning because it’s a big block of plain text. It would make a lot more sense if we were able to MARK IT UP in some way to indicate structure as well as communicate content. How about if we break it up into paragraphs using symbols, like this:

<p>ACT I.<p>

<p>PROLOGUE.<p>

<p>Two households, both alike in dignity In fair Verona, where we lay our scene, From ancient grudge break to new mutiny, Where civil blood makes civil hands unclean.<p>

<p>From forth the fatal loins of these two foes A pair of star-cross’d lovers take their life; Whose misadventured piteous overthrows Do with their death bury their parents’ strife.<p>

<p>The fearful passage of their death-mark’d love, And the continuance of their parents’ rage, Which, but their children’s end, nought could remove, Is now the two hours’ traffic of our stage; The which if you with patient ears attend, What here shall miss, our toil shall strive to mend.<p>

<p>SCENE I.<p>

<p>Verona. A public place.<p>

One symbol, <p>, shows where the paragraph starts and another, similar symbol, <p>, shows where it ends. Overall, it’s better and more readable, right? The problem is that everything is still on one level. Perhaps we can show the difference between a heading and a paragraph of text by using different symbols, such as an <h> for a heading and a <p> for a paragraph:

<h>ACT I.<h>

<h>PROLOGUE.<h>

<p>Two households, both alike in dignity In fair Verona, where we lay our scene, From ancient grudge break to new mutiny, Where civil blood makes civil hands unclean.<p>

Getting better, but are all headings the same? How about if we indicate the most important heading with the number 1 and a less important heading with a 2, like this:

<h1>ACT I.<h1>
<h2>PROLOGUE.<h2>

Now when a computer program, like a browser (IE, Firefox, Safari), renders this marked-up text, it strips out the MARKUP SYMBOLS (called tags in HTML) and shows the text with the appropriate styling.

ACT I.

PROLOGUE.

Two households, both alike in dignity In fair Verona, where we lay our scene, From ancient grudge break to new mutiny, Where civil blood makes civil hands unclean.

Is it starting to make a little bit more sense now? Did something break? Hopefully, a light bulb switch turned on or something clicked in your head and you’ve found your “Aha!” moment. If you have, you will start looking at html code differently. You can try reading and writing and even try to slowly interpret what all the gobbledygook means. If you haven’t figured it out yet, you can go back to the lesson, find your own text block and practice using the markup symbols we used.

More next week!

WordPress, Really? 5 Amazing WordPress Sites to Inspire You

Below are some amazing not so typical WordPress websites to inspire you to think out of the box:

1. Yoke by Jay Bigford and Alister Wynn

“Having the power to manage the content of your site and update it when you want gives you valuable autonomy and gives us more time with our colouring pens. We can provide simple elegant WordPress solutions to fully fledged e-commerce sites to get your online shop selling.” – co-founders Jay Bigford and Alister Wynn (eCommerce, Open Source, WordPress)

2. Girl with a Camera by Matt Brett

“This was my first venture into HTML5, and I took the opportunity to deck out Ashley’s photoblog with all sorts of CSS3 frills as well. One of the main challenges, was deciding on a colour scheme. Since each photo set could potentially have a dominant colour throughout, I came up with the idea of having the background colour change for each post (set).” – Matt Brett

3. Crack by DCOED

“We have created a fully responsive masonry-style website for Crack Magazine, designed by Fiasco. Mobile and tablet users can now enjoy a comfortable reading experience that does CRACK’s editorial and imagery justice.” – DCOED (WordPress, CSS3, HTML, Responsive Design)

4. Grind by Magic+Might and Co:Collective

“We leverage WordPress to manage content and templating for the site. WordPress is also used to manage the content for our members-area site, and our blog, the Grindist,” explains Josh Campbell. “We picked WordPress for a number of reasons. First we wanted a stable, feature rich platform but without a large investment, that would be able to grow with our needs.

“We also wanted a clean management interface for our writers and editors so they can focus on creating great content.” There is a fantastic community surrounding WordPress and the guys ?at Grind feel that this reflects on the kind of collaborative community that they are all about.”

5. Rodesk by Laurens Boex and Jasper van Orden

“WordPress is the best CMS for sites such as Rodesk, we’ve developed with it for quite some time,” explains Boex. “With a ton of plugins and extensions and a worldwide community of supportive developers it’s easy to work with and integrate quickly.”

78 Reasons To Join Elegant Themes

Since around 2008, Elegant Themes has been producing beautiful, and well designed WordPress themes. Each theme has always been a balance between beauty and function.We have always felt that for a website to have a substantial following on the web, it also has to look good on top of working well. Visitors are first drawn to the visual and each theme must be a feast for the eyes. After that initial encounter, they need to be able to find what they are looking for with ease. The experience must be pleasant as this will determine whether they will stay beyond the 30-second time frame and continue going through your content, whether it be reading text posts, watching videos or looking at images. By that time, these visitors need to be fully persuaded that they need to keep coming back for more or eventually subscribe to stay up to date.

Elegant Theme’s latest theme release, Origin, embodies this design and function philosophy. The visuals are indeed stunning and undoubtedly beautiful. As you go through the theme’s demo, it is as equally delightful to discover little design elements and functionalities carefully and thoughtfully dispersed throughout the theme.

Prior to the release of the Origin theme, Elegant Themes also released the business theme Nimble. Nimble’s bold and beautiful play on whitespace and typography created a very professional looking and yet creative theme. The mixture of bold fonts and mildly subdued colors provide a relaxed, calming effect even if the theme were to be used for a business website. Color coordinated sections on the homepage help direct readers to sections most important to them. What is most notable with this theme is the sophistication in managing the amount of detail presented to visitors. The home page does not cram all the information but rather presents design elements in samples, snippets and teasers to whet the appetite of the visitors.

These two themes are part of the growing inventory of 78 and are representative of the quality of themes that Elegant Themes churns. Not only are all 78 themes aesthetically outstanding but they are all also functionally excellent in keeping with WordPress code standards. Nothing pretentious. Just good design and honest code. More than a million and a half customers speak for itself.

If you are on the fence and still thinking of one good reason to sign up with Elegant Themes, you already have two – Origin Premium WordPress Theme and Nimble Premium WordPress Theme. Imagine having access to all 78 themes – 78 reasons to create stunning websites for you and your clients. Membership starts at only $39, approximately $.49/theme. Even a Happy Meal costs more. With Elegant Themes membership, you will definitely bring happiness to your clients and put a smile on their faces because they simply can’t help “Lovin’ It!”

Join Elegant Themes for Only $39

Origin WordPress Theme by Elegant Themes

It is a constant challenge for artists, photographers and creative professionals to promote their work and gain new clientele. Thankfully, the Internet provides an avenue where people can connect to other people wherever they are in the world in a very efficient manner. In order to take advantage of this infrastructure, artists who want their portfolio to stand out from the crowd need to put up well designed websites to effectively exhibit works of art and other creative output.

Origin Premium WordPress Theme is the latest theme from Elegant themes targeted at creative professionals. It is designed to be a showcase solution for creative work and it does so in a stunning way. This premium WordPress theme’s take on the grid layout is not uncommon. What makes it stand out is the attention to design details and concern for the user experience. The theme can give visitors an overall view of the portfolio, or it can also serve as a one page catalogue for whatever images, products or projects that need to be showcased.

Origin is beautiful eye candy but catching a potential client’s eye is one thing, converting him or her into a loyal customer is another. This portfolio styled theme has what it takes to deliver both. This responsive theme serves as that portal where the the target clientele can go beyond admiring the work and actually connect with the creative professional and eventually work together.

If you haven’t seen Origin Premium WordPress Theme in action, head on over to Elegant Themes and take it for a spin. You’ll be glad you did.

More Features:

  • Responsive design
  • ePanel Theme Options
  • Large collection of shortcodes
  • Premade Page Templates
  • Perpetual Updates
  • Secure and Valid Code
  • Browser Compatibility
  • Complete Localization
  • Five Unique Colors
  • Unparalleled Support

Origin Premium WordPress Theme includes top-notch tech support provided by Elegant themes’ support staff to help you setup your site and get it running in no time.

Origin Theme: $39 | Demo & Download