Mac web notifications from WordPress

Since the introduction of the Safari browser of the Mavericks version of Mac OSX, and also recently in Chrome for Mac, your website may show Desktop notices to encourage your readers to receive notices on your computer, even if they do not have the web browser open .

This thing called Web Push Notifications is a subscription system to the news of a really interesting website, because when you publish new content the user will receive a warning of their operating system, even if they do not have the web browser open being able to check the last of your site.

What's more, there are some systems that allow you to send personalized notices, not just the automatic ones that are generated every time you publish a new entry.

And the best thing of all is that there are a lot of free services that allow to integrate this system of Web Push Notifications in WordPress through plugins. Let's see some …

Web Push Notifications

Really simple, just install it and add a new icon to the desktop menu of WordPress from which you access the web service of Tidio from where configure the appearance of the subscription and desktop notices. It also allows sending personalized messages.

For Chrome notifications it is necessary to upload a file to your server via FTP, due to the requirement that they are HTTPS connections.

All simple and all for free . [19659015] OneSignal Web Push Notifications

This plugin links to OneSignal, a service that connects to the Google Developer Console so that, once registered (free) in OneSignal, you create an application that activates the desktop web ads.

A little bit more cumbersome to start up than the previous one but equally very effective and also free .

Push Monkey

Another service that offers us, through a plugin, the creation of web notifications is that of Push Monkey. Once installed the plugin automatically invites us to its settings page, which encourages us to create an account, which will offer us a trial service for 30 days, or if we prefer one of the payment plans, ranging from $ 2.5 a month, you decide, but the good thing is that you can try it before.

The system is very easy to configure, has statistics and works great.

Roost Web Push

One of the most used, the Roost web notification system also goes through the registration in their service, offering notices in Safari and Chrome, plus a lot more options.

Like the previous one, just install the plugin invites us to create a 30-day trial account in the service before using it, with the proviso that you will ask us for the credit card information, even if they do not load anything initially.

The good news is that you can skip this step , so if you leave the proces or register in that step and go back to your WordPress you will see that you can access with the chosen email and password and use it without needing to give any banking information.

From the plugin's administration page you have access to the settings, where you can even specify the sending of notices when there are new messages in bbPress forums, what categories will send notifications, and if you prefer to send the notification only when a user visits you more than once or only after clicking on something, not to be especially heavy.

Of course, as a professional service that is, you can also send personalized notices, not just the automatic ones when you post something, a great marketing element.

Which is better?

It's a complicated question. Actually the best is the Roost system and in fact the most used professionally. Now, if for you it is a problem the monthly payment for a service for a limited user segment (Mac users) perhaps your best choice is one of the first two, among which wins by a landslide in simplicity Tidio system the plugin called Web Push Notifications simpler is impossible.

Above all keep in mind what I just pointed out, that is something that you offer to a very specific sector of visitors, those who use Safari or Chrome for Mac who will be the ones who will really take advantage of this type of notification service.

Yes, you will mark differences completely, because it does not stop being a really powerful subscription service, that warns your readers even if they do not have the browser open, directly on their computer desktop .

Note: Web notifications only work with the web browser S afari for Mac OSX and Chrome for Mac OSX, and in the case of Chrome only with HTTPS.

NOTICE : This publication is from two years ago or more. If it's a code or a plugin it might not work in the latest versions of WordPress, and if it's a news story it might be obsolete. Then do not say that we have not warned you.

Loading …

That may also help you:

"Reader" mode in WordPress • WordPress Help

 safari reader mode "title =" safari reader mode "width =" 500 "height =" 373 "class =" aligncenter size-medium wp -image-64536 "srcset =" 500w, /2012/07/modo-lector-safari-1024x765.png 1024w, 1188w "sizes =" (max-width : 500px) 100vw, 500px "/> </a></p>
<p> If you use the <strong> Apple Safari </strong> you know what I'm talking about, I'm referring to" <em> Reader mode </em> "of this browser , an icon that appears in the navigation bar and that allows you to visualize the page you are visiting without everything that is left over (announcements, header, etc.) <strong> You only see the content of the article, with its images and others but without rest of elements of the web </strong>. </p>
<p> Well, the good news is that We can <span class= add this reading mode for our readers even if they do not use the Safari browser, like an extra functionality in our WordPress which will be much appreciated by visitors.

The process is not as simple as installing a plugin and that's it, but the result is worth it, giving your website a very professional functionality.

Let's go!

1. The solution

We will get to add the reader mode thanks to a plugin for jQuery called Colorbox . Logically, the first step is to download it from the official site .

The current version of Colorbox is 1.3.19, which works with jQuery 1.4.3+ in Firefox, Safari, Chrome, Internet Explorer 6, 7, 8, 9, Opera 11. If you want higher compatibility with older browsers you can use the previous version of the plugin, which is also available on the official website.

2. Installing Colorbox

First of all, download the latest version ( direct link here ). Once you have downloaded the zip, unzip it and you will see the content, this:

 folders colorbox "title =" folders colorbox "width =" 500 "height =" 350 "class =" alignnone size-medium wp -image-64535 "srcset =" 500w, /07/carpets-colorbox.png 980w "sizes =" (max-width: 500px) 100vw, 500px "/> </a></p>
<p> There are several examples folders, which contain different styles that you can use for the link" <em> Reader mode </em>. "If you want to decide, open each example folder and open the file <code> index.html </code> of each one to see what the reader mode would look like. </p>
<p> Once decided, we can now get to <strong> upload the plugin to our server </strong> via FTP The idea is this: </p>
<li> Copy the file <code> jquery.colorbox-min.js </code> from the folder called "colorbox" in the directory ' <code> / js / </code> ] 'of your theme (if you do not believe it). </li>
<li> Choose one of the sample styles and copy the file <code> colorbox.css </code> in the directory of your theme. </li>
<li> In the same folder for example, copy all the files in the folder '<code> / images / </code>' in the directory of images of your theme. </li>
<p> If for some reason you prefer to create a folder called '<code> colorbox </code> 'in the directory of your theme, and put all those files there, you can do it, but in this guide the steps are referred to the folder structure of the subject <em> TwentyEleven </em>. </p>
<h2><span id= 3. Connecting the script with WordPress

Once the above is done you have to tell WordPress, and specifically to your theme, where is Colorbox and how to use it .

To do this we open the file functions.php of your theme (if you do not believe it) and we add the following before closing it (before the closing PHP tag '?> '):

Thanks to these lines of code, the topic will know where each Colorbox file is and the JavaScript of the "Reader mode" that we are going to create next. Once saved you will be ready to upload them to the site (only in single entry pages, or " single ").

I remind you, as you can see in the routes used, that I am using the default configuration; putting the script in the folder / js / .

4. We define what is the content

So that the script knows what it has to show in the " Reader mode " it is convenient to mark it clearly. For this we will make a division around the content with a div .

You will tell me that it is usually " surrounded " the " content " with a " div "but it is better to create it" ex profeso "for to have it controlled and well specified .

To do this, we go back to the file functions.php of your theme and we add this to another:

This filter will run every time your theme shows the content of an entry. If the user is on a simple login page the code wraps the content with a div and the class .rm-content around it.

5. We created the link for the "Reader mode"

Once we have all the infrastructure created you are ready to put a link to the " Reader mode ".

To do this we go to the directory / js / of the theme and create a new file that we will call ' aw-reading-mode.js (if you look at the first code we already prepared the " call " a this file.

Well, nothing, we created the file paste this code in it:

Reviewing the code a little, you'll see what in line 4 we set the selector for the element that wraps the input (actually it is not necessary if you use the filter from step 4), and on line 7 is the HTML that will be displayed for the link to " Reader mode ", which of course you can customize to your liking.

Then, line 10 adds that HTML to the element that surrounds the content (that is, creates the link). And on line 12 we start Colorbox with the size options, specifying its content as the wrapped element. There are more possibilities, very well explained on the official Colorbox website.

6. Giving style

With all the above we can already use it and do tests but it never hurts to apply some style to our " Reader mode ", putting the emphasis in any case in the readability and readability that's what it's about, and not about doing virgins and putting colorines, it's not about that as you'll understand.

An example of style, which looks very good, it would be this:

Some notes on this CSS:

  • The div #cboxLoadedContent it is used to adjust the element that surrounds the content. You can make it more flexible by specifying a CSS class name if you prefer.
  • Line 11 is used to prevent the link to "Reader mode" from appearing within the pop-up window
  • If you want to use the existing styles of your theme you can skip the filter and, instead, specify an element such as .entry-content in the JavaScript. This element will move to the pop-up window, so your styles will also be applied to the pop-up window.

And that's it. It is a bit frightening but in reality it is simple, and following these simple steps you will be able to verify that it works of coña it does not slow down your site (Colorbox is only 10Kb of script, 5kb with gzip) and offers a touch of quality and professionalism to your website, for visitors that do not use the Safari browser, which already has this integrated utility, as you know.

(…) Plus: with plugins

How could it be otherwise, there are also plugins that They offer this functionality, and thanks to Quique that you have reminded me in the comments here are a few that look very good:

  • Readability : Simple and effective, offers the window popup mode Easy reader
  • Readability plugin : this is something different, it offers a kind of reading list, ideal for tired views.
  • Easy reader : very easy to configure, it offers a button to insert in input s and pages and thus offers the easy reading mode.

Now, for options that do not remain.

NOTICE : this publication is from two years ago or more. If it's a code or a plugin it might not work in the latest versions of WordPress, and if it's a news story it might be obsolete. Then do not say we have not warned you.

Loading …

That may also help you:

WordPress 3.2 Requirements

Well it's about to come out the older version WordPress 3.2 and it will have important news and, what is more important at the moment, new requirements .

WordPress 3.2 brings Server-level requirements, and browser usage recommendations based on the Browse Happy initiative notes:

Adapt your site for iPad

No doubt, the iPad is revolutionizing the computer world by leaps and bounds. If for months nobody gave a euro for a tablet PC suddenly, Apple brings to light the iPad and everyone discovers that he needs the gadget (myself included).

And like the iPad it incorporates new navigation modes (mainly), different from the ones we know so far, a new experience of " touching the web ", we will do badly if we do not adapt our site created with WordPress to the characteristics of the iPad. Come on, that has to be updated .

Unfortunately, there is still almost nothing to adapt our WordPress site for iPad. Themes are not found and there are only plugins that incorporate some kind of functionality, but nothing complete, that transforms our WordPress into a native website for iPad. It seems that the only option right now is to design a version of our website exclusively for iPad and the 'user_agent' will detect the device and show it.

But no, everything has a solution, in some cases per box …

PadPressed is so far the only complete WordPress-specific solution, and spectacular result, that turns our site into a native website for iPad when it detects that our visitor uses the fashionable device . If you need a quick solution right now it's the best you can find, and if you look closely the price is not expensive for the job that saves you.

In this video you can see the fantastic result … [19659003]

More options ?, then use a exclusive theme for iPad like these …

Or follow one of these guides with which adapt your site to iPad :

NOTICE : this publication is from two years ago or more. If it's a code or a plugin it might not work in the latest versions of WordPress, and if it's a news story it might be obsolete. Then do not say we have not warned you.

Loading …

That may also help you:

3D theme with CSS3 – WordPress Help

The truth is that it is a virgin, perhaps impractical, but visually very interesting and full of possibilities. The 3D theme made with CSS3 that has developed by Nathan Barry may be the first of its kind, but I'm sure we'll see many more that take advantage of the features of CSS3 .

At the moment, as the only browser that supports CSS3 completely is Safari you can only enjoy it in all its beauty with this browser, because in Chrome or Firefox you'll see a nice, cool theme, but much less impressive. The best thing is that you download the latest version of Safari to enjoy it.

The theme is free so you can download it and try it for some special project you have out there or, if you have Safari, see Demo .

New attack on shared servers

For the last few days there is news of attacks on sites that are based on PHP as is WordPress, and today I can give some clear directions in this regard, sorry for the delay however.

The first thing to clarify is that is not a massive attack on WordPress but this injection of code affects any web based on PHP and, to this day, the other relevant data is that they also share a server, it is not happening on dedicated servers. In fact, if it were a massive attack on WordPress there would be many more infected sites, given the huge implementation that today (thanks to you) has this CMS.

This makes us think of two possible causes, one sure. The first is that the attacker uses security vulnerabilities of the server on which he is hosted and which he shares with other sites, and the second is that something is allowing the code to be injected into the PHP files of the attacked sites, either a bad plugin designed, a bad security configuration of the CMS used. However I bet on the first option because the Zettapetta has infected static sites where there were a couple of loose PHP files and, as I said, if it were something special for WordPress we would all be infected, or almost, and it is not.

This case is special, because there is even a video in which the supposed cause explains how to inject code into shared servers of Networks Solutions without having to steal usernames and / or passwords!

Fortunately there is a solution. [19659003] The attackers are infecting the webs with a script that tries to inject malicious software into the "client" sites and, in addition, prevents the anti-malware mechanics that modern browsers such as Firefox and Safari can detect.

script affects any shared server and attacks have already been verified in several top-tier hosting providers, such as Mediatemple.

In the atac sites The following javascript was inserted:

And what does the Zettapetta ] this one of the noses is to add a lot of base64 code at the beginning of all the PHP files that will be found on the server, recursively. Come on, if it enters your WordPress it infects all the files 'core', those of the plugins, the themes, everything, up to the wp-config.php and the index.php usually empty.

Once the base64 is decoded, what it contains is this:

The bug has cloth so to clean it has been said …

The first thing is to try the hack they have developed in . Download this file to your desktop: and rename it to wordpress-fix.php

Once done this you upload it to your site by FTP and execute it from the browser. That is:

The script takes a few minutes to complete as it scans your entire site and removes the malware entries, recursively as well.

When finished you can delete the file and then to ensure that you leave everything clean, follow these indications, as always:

  • Export all your content using the WordPress export utility and save the wp-content folder as well as any other that you use so manual. Check your theme, plugins and uploads folders, etc, before giving them for insurance.
  • Check the file wp-config.php to eliminate any possible code injection, change the permissions to 644 or, much better, load a wp -config.php completely clean.
  • Change all passwords: ftp, database. Use strong passwords, using alphanumeric characters and symbols
  • As the problem affects the database, it must be discarded. Delete the current one and create a new one or, failing that, check each one of the tables
  • Delete all the contents of the current WordPress installation (remember that you have done backup before)
  • Install a clean WordPress (latest version) ), using the information from the newly created database
  • Upload your wp-content folder again, once you have verified that everything is clean
  • Import the posts from your site that you exported with the WordPress import utility
  • Set up your WordPress securely by following the instructions in the links provided

Let the backup be with you!

NOTICE : This publication is from two years ago or more. If it's a code or a plugin it might not work in the latest versions of WordPress, and if it's a news story it might be obsolete. Then do not say we have not warned you.

Loading …

That may also help you:

Prepare your site for iPhone • WordPress Help

Impressive the compilation made by Cats who code about codes with which to adapt your site to the visualization in iPhone. As I think it is of great interest to developers and advanced users and that, of course, are applicable to WordPress, here you have them with some adaptation to our environment:

Detect iPhones and iPods using Javascript

When developing for iPhone or iPod Touch the first thing to do is detect it so that, then, we apply codes or styles. The following code detects iPhones or iPods using Javascript, and redirects them to a specific page for iPhone.


Detecting iPhones and iPods using PHP

Although the previous code was nciona of wonder can that Javascript be deactivated in the iPhone. If this is the case, you can use PHP to detect iPhones or iPod Touch.


Define the width of iPhone as viewport

In many occasions you visit a website with your iPhone and see it in miniature. The reason is that the developer forgot to define the viewport (or does not know that it exists). The declaration of width = device-width allows you to set the width of the document to the width of the iPhone screen. The other two statements are very useful if you are developing a site "just for iPhone". Otherwise you can delete these two statements.
Defining a viewport is easy: Simply insert the following goal in the "head" section of your site (file "index.php" of the active template):


Insert a specific icon for iPhone

When a user adds your website to your home page, the iPhone uses a screenshot of your site as an icon. But you can offer a specific icon, which is much better.
Defining a custom icon for iPhone is easy: Simply paste the following code in the "head" section of your site ("index.php" file of the template active). The image must be 57px by 57px in format .png . You do not have to add glitters or corners as the iPhone automatically adds them:

Source: tutorial-building-a-website-for-the-iphone /

Prevent Safari from adjusting text size when rotating

When you rotate the iPhone, Safarie adjusts the text size. If for some reason you prefer to avoid this effect you just have to use the following CSS, which you will have to add to your style sheet (file "style.css" of your active template).
The declaration -webkit-text -size-adjust is a unique CSS property of webkit that allows you to control the text setting.

Source: -iphone /

Detect the orientation of the iPhone

As the iPhone allows you to see the page in portrait or landscape you may need to detect in which mode the document will be visible.
This Javascript function detects the current orientation of the iPhone and applies a specific CSS class for each targeting mode. Note that in this example the CSS class is added to the ID of page_wrapper . Replace it with the desired ID name (line 24)