Browsing Category

WordPress Tutorials

WordPress Tutorials

Setting to Leverage Browser Caching on GoDaddy Hosting doesn’t work

April 8, 2016

You may all know how to set expired headers for static files using .htaccess file. There are a lot of tutorial online. The purpose is to tell browser to cache static content, such as CSS, JS or image files, for a period of time. By doing that, browsers do not have to query the files again, thus decrease loading time of a page. Google PageSpeed Insights measures this parameter and give you bad rate if you do not utilize this setting.

Basically, your .htaccess file should have this content

# BEGIN Cache-Control Headers
<ifModule mod_headers.c>
<filesMatch “\.(ico|jpe?g|png|gif|swf)$”>
Header set Cache-Control “public”
</filesMatch>
<filesMatch “\.(css)$”>
Header set Cache-Control “public”
</filesMatch>
<filesMatch “\.(js)$”>
Header set Cache-Control “private”
</filesMatch>
<filesMatch “\.(x?html?|php)$”>
Header set Cache-Control “private, must-revalidate”
</filesMatch>
</ifModule>
# END Cache-Control Headers

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

However, it may not work if you use GoDaddy Hosting. Due to various default settings of GoDaddy, they disable many features and you cannot change via .htaccess. To make above settings work, you can add this on top of the .htaccess file

Header unset Pragma
FileETag None
Header unset ETag

<IfModule pagespeed_module>
ModPagespeed on
# using commands,filters etc
</IfModule>

Well yes, you have to disable Etag Header setting for static content, and turn on pagespeed_mobule. I’m sure that will help you to increase Google PageSpeed Insight grade.

Featured, WordPress Themes, WordPress Tutorials

Guidelines for Choosing a Premium Responsive Video Theme for WordPress

October 19, 2015

Buying a premium responsive video theme for WordPress is usually safer than using a free one. However, that does not mean you cannot still go wrong. To end up with the right premium responsive video sharing theme and not just an expensive mistake, you should follow the guidelines below.

Guidelines for Picking a Premium Responsive Video Theme for WordPress

Select a video theme whose price stay balance with your actual income. In other words, you should estimate the revenue can be generated through your purchased theme. This is a note for both businesses and freelancers: get the responsive video theme you need and make sure you are generating enough revenue to justify it.

Only purchase the responsive video sharing theme of the most reputable WordPress authors or marketplaces. There are a lot of theme authors out there who do not care about their products’ quality; instead, they just care about sales. Avoid falling for persuasive copy or ads. You should read the purchasers’ reviews and comments, and choose an author/marketplace with a great track record for excellence. Also, you need to check for their business vital signs to ensure that they are active.

Check out the theme author’ support system to ensure that it meets your needs. Every premium responsive video theme comes with the author’s support. However, not all support teams are good enough to satisfy your demands. You should find the one with a good reputation for customer satisfaction. There is nothing worse than waiting around while your support ticket is unnoticed for days.

Choose a responsive video sharing theme that matches your content. In particular, you need to determine which post formats you want to publish on your website, how many columns your site layout will have, whether you need an image slider or not, and many more.

Finally, select a responsive video theme with portability in mind. This is very important. Do not let yourself get trapped by features which cannot be ported to other themes. If you are forced to switch to another theme, then you will encounter a big problem.

Quality Premium Theme Examples

Here are two of popular responsive WordPress video themes in 2015. Just experience their demos and pick the right one or get ideas for your video websites.

True Mag – Responsive WordPress Video Blog Theme

True Mag is a modern and clean WordPress theme for video blog, video portfolio and magazine. This responsive video theme is built with the best practices of UI, UX and SEO. It also comes with great features for videos: Built-in Video Ads plugin, Video Short-codes, Video Auto Play, Front-end Video Submission and Self-hosted Video Support.

Responsive Video Theme

NewsTube – Responsive Magazine Blog & Video Theme

This is a clean and fully responsive theme for blogs, online magazines and video websites. It comes with flexible layouts and extensive Theme Options panel. The responsive video theme also supports videos from popular video sharing sites such as YouTube and Vimeo. NewsTube allows you to create great video playlists and channels, as well as your users to submit videos from front-end.

Responsive Video Theme

Featured, WordPress Themes, WordPress Tutorials

How to make WordPress video themes responsive

October 17, 2015

Responsive designs have become a vital part of websites when more users browse websites on smartphones and tablets. Also, Google has considered mobile-friendliness to be one of the standards to rank a site. Under that circumstance, many non-responsive WordPress sites, especially video websites, risk losing their spot in the search ranking. That is the reason why owners need to use responsive video WordPress themes to optimize their sites.

WordPress video themes responsive 2

If you have a video site on WordPress and want to turn it into a responsive one but lack coding knowledge, then this article will help. It is going to guide you how to make WordPress video themes responsive in simple steps.

How to make WordPress video themes responsive

In this article we will take Tenwty Ten theme as example. To make the theme responsive, you need to modify only one file, style.css.

First, put this code at the end of your style.css:

@media only screen and (max-width: 480px) {

}

This is a conditional styling code which tells the web browser that if the screen size is equal or less than 480px, all the styling parameters should be set in between the brackets. And 480px is the maximum screen size of a smartphone.

For tablets, the conditional code will be:

@media only screen and (min-width: 768px) and (max-width: 959px) {

}

For the sake of simplicity, in this article we only discuss responsive video WordPress themes for smartphone. Once you master that, making WordPress video themes responsive for tablets will be very easy.

WordPress video themes responsive 1

After typing the conditional code, you put all the following codes in between the brackets.

The first code will set the main frame size of the theme to 400px:

#access .menu-header, div.menu, #colophon, #branding, #main, #wrapper, #site-title {

width:400px;

}

The second code sets the size of main container:

#container {

width:100%;

}

The container layer width is set to be 100%, which means 100% multiplied by the above layer width. So, it will become 400px as 400px x 100% is still 400px.

The next code will hide the header image of the video theme:

#branding img {

display:none;

}

You can also modify the code above to resize the header image:

#branding img {

width:100%

}

Here the width is set to 100% meaning 100% multiplied by the above layer width.

And, the following code is to hide or re-positions the blog description:

#site-description{

display:none;

}

If you insist that the description must be displayed, then change the code above so it looks like this:

#site-description{

float:left;

}

Next, you set the navigation bar size (width) by using:

#access{

width:100%;

}

Then, you need to set the width of the content container:

#content{

width:100%;

}

Also, set the post content layer margin (position):

.hentry{

margin-left:-13px;

}

The code above will make the post content layer positioned 13px to the left.

Next, you hide the sidebar by using this code:

#primary{

display:none;

}

And resize the footer section: </pre>

<blockquote>

#footer{

width:100%;

}

With the code above you can only resize the main layer of the footer, not its content.

The following one re-positions the WordPress credit text:

#site-generator {

float:left;

margin-top:5px;

}

And the last code will set the footer border’s width:

#colophon {

width:100%;

}

That’s all. Now your theme is responsive. Just practice more and you are able to make your default WordPress video themes responsive without the help of developers.

Featured, WordPress Themes, WordPress Tutorials

Useful tutorials to build WordPress themes for education

October 15, 2015

If you want to build a custom education theme for WordPress with your limited coding knowledge but you do not know where to start from, then this writing will help. The article introduces easy-to-understand tutorials to create a WordPress theme from scratch, which can support you in the first step of developing your own WordPress themes for education.

9 tutorials to build WordPress themes for education

How to Create a WordPress Theme: The Ultimate WordPress Theme Tutorial

WordPress themes for education 1

This series includes 12 parts, starting with a look at structure of a WordPress theme before taking a deep look at the structure of template files. It gives you basic knowledge of creating a theme from scratch, ensuring that your future WordPress themes for education will have clean structure.

How to Create a WordPress Theme from Scratch

This tutorial was published on Tuts+ a few years ago. It looks at taking a HTML/CSS template and turning it into a functioning WordPress theme and describes the use of each template file with code samples. Just follow it step by step and you are able to develop simple WordPress themes for educational blog.

Designing for WordPress: Complete Series

Another useful instruction is Chris Coyier’s video screencast series.  This instruction takes a live look at developing a WordPress theme, which gives visual insight you do not get from a written guideline.

WordPress Theme Development Training Wheels

This tutorial series of theme development is written by Nur Ahmad Furlong and published on Tuts+. The series takes WordPress newbies who don’t have experience with HTML or PHP code through the basic steps to create a custom WordPress theme for education site.

Building custom WordPress theme

Chapter II of the “Complete WordPress theme guide” series on Web Designer Wall shows you how to create a custom theme. Part I and III cover the installation of WordPress and the way to export WordPress. This tutorial is also applied for the WordPress themes for education.

Developing your first WordPress theme

WordPress themes for education 3

This is another tutorial on Wptuts+. It not only covers the basic knowledge and steps to build a WordPress theme, but also gives you some tips to create a genetic theme to sell or give away. This helps you to save effort, money and time when developing your own WordPress themes for education.

How to Create WordPress Themes from Scratch

It can be considered one of the most extensive tutorial series of WordPress theme development. After reading this series, you may be surprised to know that developing WordPress themes for education is not very hard. The tutorial covers the whole process of building a WordPress theme, from structuring the theme layout, designing it in Photoshop and slicing, coding the layout into fully CSS based HTML to WordPress implementation.

Basics of WordPress theme design

This tutorial from WPShout takes a deep look at each of template files, from basic to advanced ones, and gives a simple description of how it works in “plain” language. It also gives you more knowledge about template tags, making your process of building WordPress themes for education easier.

How to Build a Custom WordPress Theme from Scratch

WordPress themes for education 2

The WordPress theme tutorial covers the basics of WordPress theme development and goes through the process that the author used when creating his ‘Sticky’ WordPress theme. Before building your own WordPress theme for education site, just read this example.

Featured, WordPress Themes, WordPress Tutorials

Beginners’ guide: How to find the right WordPress video theme on ThemeForest

September 18, 2015

Suppose that you start to redesign your WordPress site and want to turn it into a mobile-friendly, video-focused one. So you visit ThemeForest marketplace, where browses a lot of versatile and high quality themes, in order to find the right theme for your video site. However, the process is not easy because you are challenged by the vast number of themes and templates here.

To help you overcome the challenge, this article will share the process of how to pick the appropriate ThemeForest WordPress video theme.

Find the Right WordPress Video Theme – ThemeForest

First, you should hover over the WordPress tab on the top menu of ThemeForest, and click on a category for the types of layouts you would like to have. If you are a blogger, you may want to look at the Blog/Magazine category.

video theme themeforest 1

Next, you hit the Tags widget on the left sidebar and choose “video” tag. Now you may want to sort those WordPress video themes by newest items, trending items, best sellers, best rated or price. The price perhaps is not a big priority because you can get a great WordPress video theme for around $50 and the prices do not go that much lower from there. However, it is important to make sure that those themes are ordered by rating. This helps you avoid buying any item from ThemeForest that has not been purchased at least a double-digit number of times and had five star ratings.

Once you have a shorten list, you should start to review each ThemeForest WordPress video theme by hovering your mouse over it and see a preview before you click. This will save you a lot of time.

video theme themeforest 2

If you find one that could be suitable for your video site, you can check its live preview. Also, you should go to the ThemeForest purchase page of the item and look at the purchasers’ comments. This helps you understand more about the theme’s design and functionality, see a lot of problems as well as know whether they are solved.

When checking those comments you can also see URLs of the sites activating this theme. Remember to take a look at those sites so as to see what the ThemeForest WordPress video theme looks like in use. If the theme looks wildly different to the live preview and you are not confident in customizing it, then this one is probably not a good choice for you. In contrast, when you see a video website (using the theme) without the perfect design (like the theme demo) and you still love it, then you should choose this item.

That is all about how to find the perfect WordPress video theme. ThemeForest is no doubt one of the best theme marketplaces; nevertheless, to ensure that the chosen theme is the best suit one, you had better follow those steps.

Featured, WordPress Themes, WordPress Tutorials

Masonry layout in designing educational WordPress theme

September 14, 2015

With the current trend, more and more WordPress websites use Masonry layout, which is favored by a lot of users. The name of this layout probably originates from the jQuery Masonry plugin which is developed by David DeSandro – a designer of Twitter.

Masonry Layout is initially used by Pinterest.com, a famous website that specializes in sharing images and other media content; so Masonry Layout is also known for the name of Pinterest Style Layout.

While Masonry layout is usually used on photography or creative websites, it is a good idea to build education WordPress sites owning this grid style. If you are a WordPress designer or developer, you should think about creating an educational WordPress theme with Masonry design. You can read the following section in order to know how to create this trending layout.

As we often see, elements in the classic layouts are often aligned with CSS floats. It means that to arrange these elements horizontally and vertically, their size will be ignored. This creates a lot of unnecessary gaps in the layout of many WordPress themes like WordPress education academy theme.

  educational wordpress theme 1

However, with the Masonry layout, elements will be arranged based on columns with no fixed height rows. In particular, it reduces the spaces and tries to fit the maximum number of elements into the rows and columns. Simply, you imagine a Masonry layout looks like the puzzle game Tetris.

  educational wordpress theme 2

Masonry layout in use

Masonry Layout can be well applied for a WordPress education academy theme to present classes’ images (Image Gallery) or online/onsite courses. This kind of layout is suitable with the websites using infinite scrolling. It is very wonderful.

How to create Masonry layouts

In order to create a Masonry layout is quite simple, you need to download and activate the jQuery Masonry plugin. Make sure that your parent folder has the following file and folders: css, js, img and index.html

educational wordpress theme 3

This is the HTML code for a simple Masonry layout:

<!DOCTYPE html>

<html>

<head>

        <title>Masonry Layout</title>

        <meta charset=”utf-8″ />

        <meta http-equiv=”X-UA-Compatible” content=”IE=edge, chrome=1″ />

        <meta name=”viewport” content=”width=device-width, intial-scale=1.0, user-scalable=no” />

        <link rel=”stylesheet” href=”css/normalize.css” />

        <link rel=”stylesheet” href=”css/main.css” />

</head>

<body>

        …

        …

        …

        <!—end header –>

        <section class=”container”>

                <ul>

                        <li class=”item red”>

                                <a href=”https://www.behance.net/gallery/Oscar-Wilde/9330545“>

                                        <img src=”img/1.jpg” alt=”1″ />

                                        <p>Dewald Venter</p>

                                </a>

                        </li>

                        …

                        …

                        …

                </ul>

        </section>        <!– end container –>

        <!– Javascript – Jquery –>

        <script src=”js/jquery.min.js”></script>

        <script src=”js/masonry.min.js”></script>

</body>

</html>

Next, use CSS code to style the layout:

*, *::after, *::before {

        -webkit-box-sizing: border-box;

        -moz-box-sizing: border-box;

        box-sizing: border-box;

}

a {

        display: block;

        text-decoration: none;

        color: #000;

}

ul {

        list-style: none;

}

img {

        display: block;

        max-width: 100%;        /* flexible image */

        outline: none;

        border: none;

        margin: 0 auto;         /* align center image */

}

.container {

        max-width: 1200px;

        margin: 100px auto;

        padding: 0 auto;

}

.container ul .item {

        text-align: center;

        border-radius: 10px;

        display: block;

        width: 32%;     

        padding: 8px;

        margin: 7px 5px;

}

/* Responsive design */

@media screen and (max-width: 900px) {

        .container ul .item {

                width: 45%;

        }

}

@media screen and (max-width: 500px) {

        .container ul .item {

                width: 100%;

        }

}

Finally, use the below jQuery script so as to initialize the Masonry layout. Note that item selector must be elements in the container:

<script>

        $(document).ready(function() {

                var $container = $(‘.container’);

                $container.masonry({

                                itemSelector: ‘.item’

                });

        })

</script>

Conclusion

In general, it is easy to generate a masonry layout for using plugins. You can choose to use another plugin instead of jQuery Masonry plugin and create a Masonry educational WordPress theme as your liking.

Featured, WordPress Tutorials

How to use Envato Toolkit for WordPress theme updates

September 8, 2015

Currently, ThemeForest is one of the most popular marketplaces for purchasing premium WordPress themes and templates. It is known for not only the vast number of high-quality themes but also its outstanding support team and the Envato WordPress Toolkit.

What is Envato WordPress Toolkit? This is a plugin that allows users to manage their ThemeForest purchases and choose whether or not to update WordPress themes automatically. Also, it allows WordPress theme authors to offer their buyers efficient and fast updates.

In this article, we will show you how to setup and use this handful plugin.

Download the Envato WordPress Toolkit

In order to download the toolkit, you will need to visit its GitHub page and click the “Download ZIP” button on the right sidebar. wordpress

Generate an API key

Before installing the plugin you will have to get an API key in order to link your WordPress website to your ThemeForest account.

All you need to do is login to ThemeForest, head to My Account page and click on My Settings tab. Next, hit the Generate API Key button to generate a free API key.

cactusthemes

Install Envato WordPress Toolkit

Just login your WordPress dashboard, head to Plugins > Add New and upload the plugin from your computer. Hit Install Now then Activate the toolkit.

Once activated, Envato Toolkit menu item will appear in the left sidebar. You simply click on this new menu item and enter your Envato username and the above API key. Hit the Save Settings button.

Now, refresh your browser (if necessary) and all of your ThemeForest purchases will be displayed on this page.

Update Themes

Envato WordPress Toolkit will display a notification beside each of your themes whenever there is an update available. If you want to automatically update a theme, simply click on the “install automatically” link on its notification.

cactusthemes

Remember that once a theme is updated, all modifications you have made directly on this one may be lost. Therefore, you should use a child theme so as to ensure that your modifications are preserved.

In addition to theme updates, the toolkit let you install WordPress themes which have not been uploaded to your website. It also allows you to manage all your items, for example, delete purchased items, view version information and set up theme backups.

Featured, WordPress Themes, WordPress Tutorials

How to select a best WordPress theme for video

August 22, 2015

Selecting a best WordPress theme for video blog is one of the good ways to determine the future of your video-related site. A good theme not only makes a good impression to visitors but also helps your SEO. The structure of your design plays an important role in searching engine optimization. This article will share some useful experience on choosing a theme that is suitable for your videos.

Select a Theme that Matches Your Content

This is obviously the most important one. If you want to pick a best WordPress theme for video blog, then choose one that relates to your content. In particular, if intending to build a simple video, you should choose a generic theme with some video features. However, in order to create an extensive video portfolio you will need a theme that supports more video features. For many bloggers, it’s very simple as they choose a very generic theme and install some free plugins supporting videos. This isn’t a bad option for a starter with low budget.

Pick a Simple and Easy-to-use video WordPress Theme

There are a lot of WordPress themes for video site in the market that has lots of features. It may look beautiful in the display but not be easy for you to customize and manage. One suggestion that you shouldn’t get into a fancy work, instead, you can choose themes with simple design because they are easy to modify.

If you want a theme that has many advanced features, you should get a custom one since this is the only way you can assure functionality.

video themes WordPress 2015 9

An advance solution for video WordPress theme

Check for Browser Compatibility

It is important to make sure that your new WordPresss video theme is compatible with mobile devices and all main browsers, including old browsers like IE8. If you ignore this, it might lead to poor user experience for those who access your site via mobile or a browser which is not supported by the theme.

best WordPress theme for video

Be Aware of the Terms of Service

When looking for a free or premium WordPress theme for video blog, you should be aware of its terms of service. If a free theme requires a lot of backlinks, you move it on.

Remember to follow the term of service to ensure that you are using the video theme in a right way. Also, this shows that you appreciate the works of authors and encourage them to creating more good themes.

Recommendation

You can download a lot of free theme on the Internet. However, we suggest that you look for something that you will get frequent support for. Premium video themes take a one time fee but provide guaranteed support. The following are premium themes you should consider:

  • VideoTouch – Video WordPress Theme
  • deTube – Professional Video WordPress Theme
  • VideoTube – A Responsive Video WordPress Theme
  • True Mag – WordPress Theme for Video and Magazine
  • SOHO – Fullscreen Photo & Video WordPress Theme
  • Snaptube – Premium Video WordPress Theme
WordPress Tutorials

6 ways to insert charts into WordPress education themes

August 19, 2015

Beside the images, bloggers often want to present the statistics under the charts and graphs to help readers access easier. According to the default settings of WordPress in general and WordPress education themes particularly, it is impossible to create charts or graphs but there are some codes, plugin or API library to enable the users to insert the interactive charts and graphs. Some people like to use the simple method such as setting up and using plugin while some prefer using codes or API. Therefore, depending on design requirements, you can choose the suitable one.

wordpress education themes 1

The list below provides you six methods to insert charts and graphs into WordPress in general and WordPress themes on education in particular.

ChartBoot for WordPress

This is a useful plugin for inserting the available graphs of Google into the WordPress generally and WordPress themes on education in particular. Thanks to it, you can directly create or edit the graphs of Google from the inside of dashboard. You can input the data for the graphs from Excel and then insert into the WordPress education themes after completing the settings. You can also choose the position for the graph by copying and pasting its shortcode to the appropriate chart.

Easy Graphs

This plugin is quite flexible in creating bar, line and pie; meaning that its shortcode can accept detailed specifications for data and other information in order to create a complete one. If you want to compare two values of the data on the same pie chart, this plugin will be a great choice.

JSXGraph – Graphics with JavaScript

If you want to insert the geometric charts into the WordPress or WordPress education themes, you should choose this plugin. All charts in the plugin can automatically update the data. It is extremely useful for education websites as it help students insert the charts into the post more conveniently.

Google Docs Spreadsheet Charts

chart - wordpress education themes

You can also use Google spreadsheet to create charts for WordPress themes on education. To take the data, you need to press Publish chart after input. The chart is directly linked with Google Docs Spreadsheet Charts and automatically updated when the data is modified. This method is effective, reliable and highly recommended when doing surveys with the ever-changing data.

Easy Chart Builder

This plugin provides you an easy and direct way to create charts. You can edit the size for the chart to make it fit with mobile themes (Interactive with Responsive Theme). You can also insert charts into widget areas and custom pages.

Google Visualization Charts

It is an ideal plugin for different charts. You can directly enter the information of the chart into a shortcode and set it up in the suitable position in the WordPress site. After activated, Google Visualization Charts will automatically fetch the API code of Google to create charts. Moreover, the plugin supports a size adjustment feature which helps your charts look great on mobile phones and tablets.