Showing posts with label WordPress expert. Show all posts
Showing posts with label WordPress expert. Show all posts

Tuesday, 3 January 2017

Top 4 WordPress Plugins For Footnotes

Footnotes are defined as attributes or notes which are placed at the bottom of a page. These are used to acknowledge the content on the page. The WordPress footnotes plugins are wonderful tools which can be used by business professionals effectively add footnotes to the WordPress site.

These footnotes can be a plain text or media that appears on the bottom of the WordPress website. All of the plugins used by WordPress developer are easy to customize and are affordable. You can add any kind of content in the footnotes to help the viewers about the information on the page.





1. CM Footnotes

The footnotes plugin by Creative Minds is a highly advanced plugin which can be customized from the scratch. The plugin enables to add any type of desired texts to your website. You can add footnotes, citations, end notes, bibliography and any kind of media. Footnotes can be added to any page or post as well as customize them according to the requirements. The plugin is ideal for developers who want to have unique and customized footnotes on their website.

2. Easy Footnotes

The easy footnotes plugin is one of the most popular plugin among WordPress developer as it is easy to install and work with. Viewers just have to click on a footnote and they can easily view the data. This way, they don’t have to scroll to the bottom of the blog or article. When the user adds a shortcode, a footnote can be placed at the bottom of the page. Every footnote is assigned an individual icon, which can be clicked to automatically get the user on a certain word.

3. Inline Footnotes


The Inline Footnotes plugin is easy to use and perfect for new WordPress users. People can use a shortcode to add relevant footnotes to post or web pages. The Inline Footnotes plugin can be viewed in the text itself, so users need not scroll to the bottom of the page. A number appears along with the word and users can see the information there itself.

4. WP NoteUp

WP NoteUp is a premium plugin which allows the admin to add footnotes while modifying the WordPress pages. The website admin can add notes, images or any kind of media to any page or post. Moreover, one can customize the style and layout of the footnote. The plugin is ideal for people who want to add footnotes when they are editing pages or creating new posts.

Conclusion

Apart from the mentioned above, there are many other footnote plugins available. The key is to find the one that goes well with the website. There are some plugins which have simple shortcodes, and some that enables the viewer to view the content without scrolling down the page.

Tuesday, 23 August 2016

How to Develop WordPress Themes


Developing WordThemes are very convenient these days. One does not require any prior knowledge. Here is the simple tutorial that will guide you to create WordPress theme.

What Makes a Theme Great?

Is it Good design? There are many WordPress themes which appear to be charming initially. But when you download it, you will realize that it lacks the basic coding standards. So, coding is necessary. It is easy to develop a WordPress theme, but a good website for eCommerce development requires a lot of efforts and planning. You can consider it by hiring WordPress developer who can professionally convert your coded HTML/CSS design and into a beautiful WordPress theme.

The theme which is designed to modern standards should meet some trends and expectations of a modern web design. Nowadays, CSS3 gradients, transparent boxes, font replacement and noisy background are in the online fashion. Earlier it was cursor trails, animated gifs, and flaming text.

Now let's start

If you are in the practice of writing code in your style, then you need to understand the architecture of the site and figure out how to read it. To overcome this difficulties WordPress has well-established coding standards for PHP, HTML, and CSS. Following these standards, it becomes easier for developers to read and modify your code. They create a baseline for collaboration; it is because WordPress is an open source, and same applies to the plugins and themes. The coding standards help to improve the readability.

The standards given below means your code can be read, understood, and modified.

Example:

WordPress coding standards recommend the following structure to ensure readability of CSS:


- Refer tabs for indentation. Avoid spaces
- Provide a line to each selector, which should end with either a comma or an open curly brace.

1 #selector-1,
2 #selector-2,
3 #selector-3 {
4         background: #fff;
5         color: #000;
6 }


Organize your Theme File
Every web project requires a different set of resources. Some applications work on desktop and works under a single language while few aim for mobile devices with various languages. Many projects may range anywhere from three to four (HTML, CSS, PHP, and JavaScript) languages. Moreover, the components of the themes can work on the side of the client or server, and initiate communication directly with WordPress.

Therefore, keeping your resources organized is vital to overcoming these complexity concerns. Failing in this will be challenging for designers, developers, or users. 

Theme file organization in short:

- Set up template files for different page components instead of one file.
- Keep the foremost template files within the theme’s root directory.
- Give CSS, image, page templates, JavaScript, and language files their directory.
- Be absolutely clear in file naming, prefix page template.

Be consistent to Template Hierarchy

The templates and files are used to produce different parts of the website. Some of them are displayed on every page, and others appear only in certain conditions. There is a hierarchy in WordPress, which represents, which template is to be utilized first and after that. If you do not provide the first option, WordPress will automatically use the second one. It is very vital to understand this hierarchy for WordPress ecommerce development as it familiarises yourself with the template hierarchy and ensures that you’re developing a correct template in the intended places.

Internationalize/Localise Your Theme

Internationalising your WordPress theme means you make it ready for translation. Localisation is the actual transfer of theme strings from one language to another. If you are fluent in another language, you might translate your theme yourself. Otherwise, you can, at least, give others the chance to do it for you.

Making your theme readable for non-English readers comes down to two acronyms: “i18n” and “l10n.” I18n is represented for internationalisation. Similarly, l10n is the numeronym for localisation. To do this WordPress uses the GNU gettext localisation framework. Special tools then parse the source code files and the translatable strings extracted into POT files.

The next step is to translate the text file inside the POT file into the target language. There are some important tools which can be used to create POT file: GNU Gettext, Pootle, Poedit and Launch Pad.

To Conclude

Test Your Theme


It is nothing more disgusting if you download a theme, which has a plethora of bugs, and no sooner people will stop using it. Therefore, it is essential to test the theme developed. Apart from this, if you are thinking to showcase your theme in WordPress directory, the validation team will not accept it. Therefore, check it twice before giving it a green signal.



Thursday, 17 September 2015

How to Create a Strong Verification for your Maintainable WP Meta boxes?

In order to give strength to its hook system, WordPress leverages event-driven pattern for designs. Though, we know that the design patterns are certainly dependent on each other , thus it is highly unlikely to recognize a design pattern. This is what which makes WordPress flexible.

Apart from achieving exclusiveness, other thing which WordPress developers look for is to create a code which is easily maintainable. As with the advancement of technology and enhancement in the features the codebase of any web app tends to grow more complex. Thus, with passing time it becomes difficult to preserve the clarity and maintainability of the code.

This is equally applicable on WordPress, be it a plugin, an extension, themes or any other project type. The thing which is important is to write a maintainable code.

That's it!
No! certainly not!

This is where developers go wrong, as they make sure that they have followed all the steps to a write maintainable code. Let's for instance they apply meta box, apply options and also apply tabbed navigation in the WordPress dashboard, but they forget to check whether the code they have written works for real or not.

In this blog we will go to the server side in order to apply code which can verify that whether the user has the authority to save the meta data or not .


How to verify that the permissions are granted?

You need to incorporate a security check during the serialization process so as to check whether the user has the ability to save post meta data and to publish. To do this we can use nounce value so as to implement this. This is a number which is used once in order to protect URLs from the scope malicious users.

1. How to add a Nounce?

To add a nounce in the meta boxes, you need to implement the functionality in the markup which will render the post template. For this you need to load admin/views/authors-quick-tab.php and then after you need to update the template so that it contains wp_nounce _field.


<div id="authors-quick-tab">

<h2 class="nav-tab-wrapper current">
<a class="nav-tab nav-tab-active" href="javascript:;">Tab 1</a>
<a class="nav-tab" href="javascript:;">Tab 2</a>
<a class="nav-tab" href="javascript:;">Tab 3</a>
</h2>

<?php
// add tabbed content
include_once( 'tabs/tab1.php' );
include_once( 'tabs/tab2.php' );
include_once( 'tabs/tab3.php' );
// Add a nonce field
wp_nonce_field( 'authors_quick_tabs_save', 'authors_quick_tabs_nonce' );
?>

</div>



The code written above has introduced a nonce which has the functionality for saving the authors quick tabs (which we've named authors_quick_tabs_nonce) . This was also linked with a value which is figured out by authors_quick_tabs. This won't load on the very first go when you will load your web app on browser, as these values are displayed in a hidden field.

Those people who are intrigued can launch a suitable bowser's development tool in order to check the meta box, and you would get something like this and of course with a different value of nonce.

<input type="hidden" id="authors_quick_tabs_nonce" name="authors_quick_tabs_nonce" value="q4df212f34">

2. Check the Nonce

To make sure that the permissions of saving the post assigned to the user is implemented properly or not, you need to check the following three things:

  • User must save the data on the 'post' post type
  • Users must actually have save permission
  • Post must be not automatically saved by WordPress

In order to incorporate the first two we can write a helper function and for checking the third one you can go for an intrinsic function. Primarily, you need to establish the hook as well as the functions that can make use of the helper functions and then you need to save your meta data. Now you need to add some piece of code in the Authors_Quick_Meta_Box which is given below.


<?php add_action( 'save_post', array( $this, 'save_post' ) ); ?>

The next step is to define the function. You can make use of the following code in which we have called two functions.

<?php
public function save_post( $post_id ) {

if ( ! $this->is_valid_fnc() || ! $this->user_save( $post_id, 'authors_quick_tabs_nonce', 'authors_quick_tabs_save' ) ) {
return;
}

}
?>



In the given code, it is written to run the save_post function when we call a save_post action. The function is written to verify that the saved post is not of the 'post' post type, and if the user do not has the authority to save then function should exit.

Definition of the function is must so as to make the logic work. Then we need to write the is_valid_fnc function as this function checks the $_POST array to ensure that the saved post type is a 'post'.


<?php
private function is_valid_fnc() {
/**
* check valid post type or not
*/
return ! empty( $_POST['post_type'] ) && 'post' == $_POST['post_type'];
}
?>


After this we need to add the user_save function, to make sure that the whether the saved post is automatically due to the WordPress or not. Further , if the user is saving the function so there should be a proper nounce value for that particular post.


<?php
private function user_save( $post_id, $nonce_action, $nonce_id ) {

$is_var_save = wp_is_post_autosave( $post_id );
$is_var_revision = wp_is_post_revision( $post_id );
$is_var_valid_nonce = ( isset( $_POST[ $nonce_action ] ) && wp_verify_nonce( $_POST[ $nonce_action ], $nonce_id ) );
// Return true or false.
return ! ( $is_var_save || $is_var_revision ) && $is_var_valid_nonce;

}
?>

Notice here that we're passing in the nonce_action and the nonce_id that we defined in the template in the very first step. We're also using wp_verify_nonce in conjunction with said information. This is how we can verify that the post that's being saved is done so by a user that has the proper access and permissions.
One thing you should note is that we are passing nonce_id and the nonce_action which were defined at the very beginning. Moreover, we will also use wp_verify_nonce conjunction in order to make sure that user who has proper authorities only can save the post.


Maintainable code is certainly an indispensable need of the modern development world. Thus, verifying it becomes a crucial task.
Feel free to share your queries!

Friday, 16 January 2015

Speed Up Your WordPress Website Performance With Varnish Cache

Lets face it, WordPress standard installation is slow. And installing a number of plugins, themes and images makes it a lot more slower. You can minify your CSS and JS with help of “Better WordPress Minify” plugin, or you can use EWWW Image Optimizer plugin to reduce your images file size. However, there are lot of other factors that affects your WordPress site performance.

Possibly by now, you'll be thinking to Hire WordPress Expert to get the job done. But, there's another viable solution. Wondering, what's the solution? Varnish Cache is a web-application accelerator which is designed for dynamic websites with heavy content.

Varnish Cache – A Foreword

This caching system stores copies of pages for readers who aren't logged in into WordPress admin. Whenever users requests for something it reaches to Varnish instead of the server. And then, Varnish looks for what user has requested and then forward the request to the server. The server sends the response to Varnish, which in turn sends that response to user's original request. But if Varnish would only perform such function, it wouldn't be much of help to us.

However, Varnish also help improve performance by storing the responses it has received from the server in the virtual memory. And so, Varnish is able to quickly send the next response to the user instantly from its cache, and thereby the load on server to process users requests is reduced significantly. This eventually help improves the response time and your process requests can be carried on great speeds.

How to Install Varnish Cache?


We’ll be setting up Varnish to listen to all web requests on port 80, while Apache will be supporting Varnish on port 8080. So, when Varnish will ask for a page that needs to be built manually, the request will get passed on to the Apache port 8080. Let's look at Varnish installation on our instance:


Edit Apache’s ports.conf file to listen on port 8080:



sudo nano /etc/apache2/ports.conf

You'll get the following outcome:

NameVirtualHost *:8080

Listen 8080



Next, you need to edit your “Apache” website config file in order to respond to port 8080:

sudo nano /etc/apache2/sites-available/wordpress

Now, change the virtual host from *:80 to *:8080

<virtualhost *:8080>


You'll require to change your Apache default website to listen for web request on port 8080 or need to disable it:


sudo a2dissite 000-default


In case, you've decided to review your original Varnish configuration files later, you'll have to move those files to your home directory in the form of backups.

sudo mv /etc/default/varnish ~/default-varnish-old

sudo mv /etc/varnish/default.vcl ~/varnish-default-vcl.old



Replace your default Varnish configuration file with the one given below (copy and paste).

sudo nano /etc/default/varnish



Let's look at the configuration file that needs to be replaced:

/etc/init.d/varnish expects the variables $DAEMON_OPTS, $NFILES and $MEMLOCK

# to be set from this shell script fragment.

#

# Should we start varnishd at boot? Set to "no" to disable.

START=yes

# Maximum number of open files (for ulimit -n)

NFILES=131072

# Maximum locked memory size (for ulimit -l)

# Used for locking the shared memory log in memory. If you increase log size,

# you need to increase this number as well

MEMLOCK=82000

# Default varnish instance name is the local nodename. Can be overridden with

# the -n switch, to have more instances on a single server.

# INSTANCE=$(uname -n)



How to Configure Varnish?

Once Varnish is installed, edit your port and change it to 80. Just remember not to change your Apache port yet, and keep it running till you're sure that everything complies properly. Moreover, if you're not sure about your configuration files, configure Varnish for port 81, and the perform a side-by-side test without losing your users:

nano /etc/default/varnish

DAEMON_OPTS="-a :80 \

             -T localhost:6082 \

             -f /etc/varnish/default.vcl \

             -S /etc/varnish/secret \

             -s malloc,256m"



Next, make you'll need to make copy of the original VCL file:


mv /etc/varnish/default.vcl /etc/varnish/default-old.vcl


Configuring Apache


After configuring your Varnish cache, edit your Apache (or HTTP Server) so as to use some other port. (8080) Make sure to verify whether virtual host also configs or not.

nano /etc/apache2/ports.conf

NameVirtualHost *:8080

Listen 8080


Now restart the HTTP Server and Varnish. Varnish will listen to HTTP (web) traffic on port 80, and Apache in 8080.  But, how does Varnish will come to know where it needs to look for the HTTP Server? For this purpose, look at the top of default.vcl file.


/etc/init.d/apache2 restart

/etc/init.d/varnish restart

Getting Rid of Content from WordPress


In case you need to purge your WordPress website content manually or automatically when the posts are saved, install the Varnish HTTP Purge extension to your site. For doing so, add the following line of code to your
wp-config.php file:

define('VHP_VARNISH_IP','126.0.0.1');


Wrapping Up!


Adding plugins, images and other elements to your WordPress site makes it sluggish. However, you can make your WordPress site performance faster with help of Varnish Cache. This post will help you gain insight on Varnish cache, it's installation and configuration.