ThemeLab http://www.themelab.com We build High Quality, Good Looking Premium WordPress Themes that are Easy to Use and ready for just about anything. Mon, 26 May 2014 10:33:36 +0000 en-US hourly 1 http://wordpress.org/?v=3.9.1 Accountancy – The Best WordPress Theme for Accountants http://www.themelab.com/accountancy-the-best-wordpress-theme-for-accountants/ http://www.themelab.com/accountancy-the-best-wordpress-theme-for-accountants/#comments Mon, 26 May 2014 10:29:16 +0000 http://www.themelab.com/?p=5240 We are proud to announce the release of Accountancy, our new WordPress theme for CPA and accountants. Accountancy is designed with the need of professional accountants and accounting agencies in mind. It features a clean-cut look with all the features you would need to build a professional business website. Here are some of its features:

The post Accountancy – The Best WordPress Theme for Accountants appeared first on ThemeLab.

]]>
We are proud to announce the release of Accountancy, our new WordPress theme for CPA and accountants.

Accountancy is designed with the need of professional accountants and accounting agencies in mind. It features a clean-cut look with all the features you would need to build a professional business website. Here are some of its features:

Fully Responsive

Like all our WordPress themes, Accountancy is a fully responsive and mobile friendly WordPress theme. It gracefully adjusts itself to the user’s screen size, and looks beautiful on all devices. Go on, test the demo on your mobile phone.

Accountancy responsive theme

Featured Slider

Accountancy comes with a featured slider, which allows you to add multiple images and descriptions to showcase your product and services. The featured slider is optimized for speed and responsiveness regardless of user’s device or screen-size.

Featured slider in Accountancy WordPress theme for accountants

Testimonials Module

Show off featured testimonials from your satisfied customers with the built-in testimonials module that comes with the theme. Accountancy makes it easy for you to add testimonials, and takes care of displaying them elegantly on your site.

Built-in testimonials module

Custom Widgets

Accountancy comes with custom widgets, designed with accountant firms and professionals in mind. Easily add a contact form in your sidebar, display location map, or office hours. Accountancy makes it super easy to set up your professional website quickly and with no pain.

Custom widgets in Accountancy theme

Color Schemes

Accountancy comes with three different color schemes, which can be easily switched from Theme Customizer without ever writing a single line of CSS or HTML.

Accountancy comes with built in color schemes

SEO Friendly WordPress Theme for Accountants

We understand the role of SEO in growth of any business. Accountancy’s semantically structured markup, and blazing fast speed make it the most SEO friendly WordPress theme for accountants.

Most SEO friendly WordPress Theme for Accountants

Other Features

Among other cool features, Accountancy comes with custom menus, cross browser compatibility, and custom page templates. It is bloat free and designed to work out of the box.

Like all other ThemeLab themes, Accountancy has a rock solid code base that adheres to WordPress development best practices and standards. We also worked hard to make sure that sites built with Accountancy load faster and are secure.

We are confident that you will find Accountancy to be the best WordPress theme for Accountants.

For more ThemeLab news and updates, join us on Twitter or Google+.

The post Accountancy – The Best WordPress Theme for Accountants appeared first on ThemeLab.

]]>
http://www.themelab.com/accountancy-the-best-wordpress-theme-for-accountants/feed/ 0
How to Add Social Media Icons to WordPress http://www.themelab.com/add-social-media-icons-wordpress/ http://www.themelab.com/add-social-media-icons-wordpress/#comments Fri, 23 May 2014 17:00:30 +0000 http://www.themelab.com/?p=3777 The best way to connect your social media profiles to your WordPress website is by adding social media icons to your sidebar. In this article, I will show you how to add social media icons to WordPress. There are hundreds of social media plugins available in the WordPress repository. We will be using the Simple

The post How to Add Social Media Icons to WordPress appeared first on ThemeLab.

]]>
The best way to connect your social media profiles to your WordPress website is by adding social media icons to your sidebar. In this article, I will show you how to add social media icons to WordPress.

There are hundreds of social media plugins available in the WordPress repository. We will be using the Simple Social Icons plugin. Mainly because it is simple and makes it super easy to add social icons to any widget ready area or sidebar on your WordPress site.

Simple social icons displayed in WordPress blog's sidebar

How to Add Social Media Icons to WordPress

First thing you need to do is install and activate the Simple Social Icons plugin (here is how to install a WordPress plugin).

Next, go to your widget page. This is located under Appearance in your WordPress admin menu. Simple Social Icons will be listed with your other available widgets so you just need to drag the widget to your preferred widget zone (e.g. your theme sidebar).

Adding Social Icons Widget to your sidebar

Most WordPress plugins are configured via a general settings page. Simple Social Icons handles things differently by placing all configuration options in the widget itself.

Instead of choosing from predefined icon sizes, you can define the exact size of your social media icons; whether it be 10 pixels or 150 pixels. Icons can be aligned to the left, center or right.

Simple social icons widget settings

The background and text colors can be changed. You can also change the color of the icons when a user hovers over an icon.

Social Icons Widget - setting colors

12 major social media websites are supported including Twitter, Facebook, Google+, LinkedIn and StumbleUpon. An email and RSS icon is available too. Simply paste the URLs of your social network profiles. Leave URI field blank for social networks that you don’t want to display.

Enter profile URI for your social networks

The final output looks great. Remember you can adjust the size and colors of icon to match your sidebar’s width and colors.

I hope this article helped you add social media icons to your WordPress blog.

If you liked this article, then join ThemeLab on Google+ and Twitter.

The post How to Add Social Media Icons to WordPress appeared first on ThemeLab.

]]>
http://www.themelab.com/add-social-media-icons-wordpress/feed/ 0
How to Install a WordPress Plugin http://www.themelab.com/install-wordpress-plugin/ http://www.themelab.com/install-wordpress-plugin/#comments Thu, 22 May 2014 17:00:34 +0000 http://www.themelab.com/?p=3701 Plugins are the reason why WordPress is such a flexible content management system. They can be used to enhance WordPress or add new functionality such as an eCommerce shop, ticket support system, discussion forum and more. In simpler terms, a plugin is a series of functions that can be inserted into your website (hence the

The post How to Install a WordPress Plugin appeared first on ThemeLab.

]]>
Plugins are the reason why WordPress is such a flexible content management system. They can be used to enhance WordPress or add new functionality such as an eCommerce shop, ticket support system, discussion forum and more.

In simpler terms, a plugin is a series of functions that can be inserted into your website (hence the name plugin). Once a plugin has been installed and activated on your website, this additional functionality will be available to you.

In this tutorial, I will show you three different ways you can install a WordPress plugin. It does not matter which method you use, as plugins are always installed in the same location.


How to Install a WordPress Plugin From the Official WordPress Plugin Directory

The plugins section can be found on the main navigation menu within your admin area. All of your installed plugins are listed on the first screen.

WordPress Plugins Screen

The official WordPress plugin directory currently has around 31,245 plugins listed. There truly is a plugin out there for every problem your website has.

Plugins can be installed directly from your WordPress admin area. Clicking on the “Add New” link in the plugins menu brings you to the “Install Plugins” section. The first tab is this section is the search tab. You can search for plugins by performing a manual search yourself or clicking on a keyword from the tag cloud.

Installing a new plugin in WordPress

If you are new to WordPress, you may not know what plugins to install. The featured and popular tabs linked at the top of the page are a good way of finding out about quality plugins. There is also a list of the latest plugins that have been added to the directory.

Popular plugins tab under the add new plugin section

A feature that most WordPress users do not take advantage of is favoriting. If you login to WordPress.org, you will see an option to favorite a plugin underneath the download link. All plugins you favorite will be listed in your profile.

Adding a plugin as favorite

A list of all your favorite plugins is also listed in the Favorites page in your admin area. All you have to do is enter your WordPress.org username in order to list all of your bookmarked plugins. This is a great way of remembering your preferred plugins across all of your WordPress powered websites.

Your favorite plugins from WordPress plugin directory

Within your admin area, a description of every plugin is listed next to the plugin. You can click on the details link to read a more comprehensive summary. All you have to do to install a plugin is click on the install link.

Installing a plugin from WordPress admin area using search

WordPress will download and install the plugin on your website. You can then activate a plugin right away, or activate it later by clicking on the Plugins menu.

Activating a plugin after installation


How to Install a WordPress Plugin From a Zip File

Only plugins listed within the official WordPress plugin directory can be installed through the search, featured, popular, newest and favorite tabs. All plugins, whether it be a free plugin from WordPress.org or a premium plugin from a different source, can be downloaded as a zip file.

Within the “Install Plugins” area, there is an option to install a plugin by uploading a zip file. To install a plugin in this way, all you have to do is select the plugin zip file and click on the install button.

Installing a WordPress plugin by uploading a zip file

WordPress will extract the contents of the zip file and install the plugin on your website.

Plugin installed from a zip file

It is common for the zip files of premium themes and plugins to contain additional folders such as documentation and original Photoshop files. Whenever you download a plugin in zip format from outside the official WordPress directory, you should check that the plugin files are located in the top level of the zip file. If not, you need to extract all files and then zip up the appropriate plugin folder.


How to Upload and Install a WordPress Plugin Manually

When you install a plugin by zip file or by directly from the official WordPress plugin directory, WordPress extracts the plugin files and stores them in your /wp-content/plugins/ folder. Alternatively, you can upload the plugin to that location yourself.

If you install WordPress at the root of your domain, your plugins folder will be located at www.yourwebsite.com/wp-content/plugins/. Plugin files would be located under the plugin name e.g. www.yourwebsite.com/wp-content/plugins/contact-form-7/index.php.

You can upload files using an FTP client such as FileZilla. To connect to your website using FTP, you need to know your FTP connection details. This information is normally provided by your hosting company in their welcome email. Contact your host if you have not received it.

To connect to your website using FTP, you need to know your website’s hostname, FTP username and FTP password. This login information is sometimes the same as your hosting control panel login information.

FTP Site Manager

Once you are connected to your website, navigate to your plugins folder (this folder lists your other installed plugins). Next, upload the plugin(s) you want to install.

Upload a Plugin

Any plugins you upload via FTP will be listed in your installed plugins list. Next, activate the plugin and configure it to your liking.

List of your installed plugins

I hope this article helped you learn how to install a WordPress plugin. Explore WordPress plugins to discover the true power of a WordPress website.

If you liked this article, then join ThemeLab on Twitter and Google+.

The post How to Install a WordPress Plugin appeared first on ThemeLab.

]]>
http://www.themelab.com/install-wordpress-plugin/feed/ 0
The Ultimate Guide to WordPress Conditional Tags http://www.themelab.com/ultimate-guide-wordpress-conditional-tags/ http://www.themelab.com/ultimate-guide-wordpress-conditional-tags/#comments Wed, 21 May 2014 17:00:54 +0000 http://www.themelab.com/?p=3792 WordPress conditional tags are a great feature of WordPress that allows you to control what content is displayed on a page. There are conditional tags for different areas of your website such as your home page, blog posts and pages. This allows you to change what is displayed around your website. For example, you could

The post The Ultimate Guide to WordPress Conditional Tags appeared first on ThemeLab.

]]>
WordPress conditional tags are a great feature of WordPress that allows you to control what content is displayed on a page. There are conditional tags for different areas of your website such as your home page, blog posts and pages. This allows you to change what is displayed around your website. For example, you could change your website logo in different areas of your website.

In this tutorial, I will explain what conditional tags are available to you and show you how they can be used in themes and plugins.

How WordPress Conditional Tags Work

Conditional tags are a boolean data type that can only return true or false. The tag is_home(), for example, refers to the blog index. We can use this tag to display a message to visitors of our blog. This message will not be displayed elsewhere.

The code is straightforward. All we are doing below is checking if the page being shown is the blog index page. If it is, we display our message.

<?php         
 
if ( is_home()) {

echo "Welcome to Our Blog!!";

}

?>

The above is a basic example of what can be achieved using conditional tags, however that is essentially all there is to it. You are simply checking the type of page that is being displayed. Depending on whether the result is true or false, another piece of code is actioned.

Before we look at more examples of how conditional tags can be used, let us first look at popular conditional tags that you are likely to see used in your WordPress themes.

  • is_home() – Checks if the blog post index is being displayed. This may or may not be your home page as well.
  • is_front_page() – Checks if your home page is being displayed. This works whether your front page settings are set up to display blog posts (i.e. blog index) or a static page.
  • is_single() – Checks to see whether any type of single post is being displayed (excluding attachments).
  • is_attachment() – Checks if an attachment is displayed.
  • is_page() – Checks if a page is being displayed.
  • is_singular() – Checks whether a single post, attachment or page is being displayed. True is returned if either of those conditions are met.
  • is_category() – Checks whether a category archive page is being displayed.
  • is_search() – Checks if a search results page is being shown.
  • is_tag() – Checks whether a tag archive is being displayed.
  • is_author() – Checks if an author archive page is being displayed.
  • is_archive() – Checks if any type of archive page is being displayed including category, tag, date and author archives.
  • is_sticky() – Checks if a post has been defined as sticky.
  • is_multi_author() – Checks if more than one author has published posts on the website. True is returned if two or more people have published posts. If only one author has published posts, or if no posts have been published at all, false is returned.

There are six time based conditional tags that you will also find useful. These tags refer to date archive pages. For example, the URL http://www.yourwebsite.com/2013/12/ is a month based archive page.

If any of the following conditional tags returns true, is_archive() would also be true.

  • is_date() – Checks if it is a date based archive page.
  • is_year() – Checks if it is a year based archive page.
  • is_month() – Checks if it is a month based archive page.
  • is_day() – Checks if it is a day based archive page.
  • is_time() – Checks if it is a time based archive page.
  • is_new_day() – Checks if today is a new day. If the current post was published on a different day from the previous post that was published, it would return true. False will be returned if both posts were published on the same day.

You will come across conditional tags such as is_home() and is_single() frequently, however you do not need to remember all of these conditional tags. Most WordPress users refer to the WordPress codex for the appropriate conditional tag when they need to set up a conditional function.

Conditional Tags Examples

Many conditional tags allow parameters to be passed to the function. This gives you much more control over what conditions have to be met before something is actioned. is_page() is a good example of this. The tag allows you to check whether the page that is being displayed is a page. is_page() will return a value of true if any page is displayed, however you need to specify the $page parameter if you want to be more specific. The $page parameter can be the page ID, page title or page slug.

Let us consider a regular website that has an about page and you want to customise the about page differently from all other pages. For example, you could display a photograph of your company at the top of the sidebar, or you could display additional information at the bottom of the about page.

To do this, you need to define the $page parameter. If the page ID was 10, you could open up your conditional statement with something like this:

if ( is_page(10) ) {

A specific page can also be specified by passing the page title to the function.

if ( is_page( 'About Us' ) ) {

The page slug can also be used. As you may recall, the page slug is the unique named identifier at the end of the URL. If your about page URL was www.yourwebsite.com/about-our-company/, the page slug would be about-our-company.

if ( is_page( 'about-our-company' ) ) {

Some conditional tags, such as is_page(), can also pass parameters in an array. The following conditional statement will return a value of true if either of the conditions are true.

if ( is_page( array( 10, 'About Us', 'about-our-company' ) ) ) {

It is common for developers to set more than one condition when using conditional tags. Let us go back to the simple task of displaying a welcome message to blog visitors. This is something that a corporate website might want to add to their blog area but not to other areas of their website (e.g. home page, contact page, about page etc).

They can do this by using the is_home() and is_single() conditional tags; which represent the blog index and single posts respectively. To display a message in both areas, you need to use the logical OR operator ||. This is illustrated in the code below. The initial if statement checks whether the page is the blog index or a single post. If either is true, the message is displayed.

<?php         
 
if ( is_home() || is_single() ) {

echo "Welcome to Our Blog!!";

}

?>

Another logical operator that is very useful is the AND operator &&. This is used when you want two or more conditions to be true before something is actioned. The following if statement checks if a page is both an archive page and categorised under the news category. In the news category pages, the welcome message will be displayed. Nothing will be displayed in other categories.

<?php 

if ( is_archive() && is_category( 'News' ) ) {
  
echo "Welcome to the News Archives";

}

?>

AND and OR operators can be combined. The example below is taken from the functions.php template of the default WordPress theme Twenty Thirteen. The function is used to display the page title in the browser, however only part of the function is shown below.

The if statement returns a value of true if there is a site description and the user is viewing the blog index or the home page. The site description can be entered via the tagline field in your general settings area. If you complete this field, on your blog index and home page the title bar will display “Site Title | Site Description” (note: the separator is displayed using the string $sep in the code below). If you do not, the title bar will display “Site Title”.

As you can see, is_home and _is_front_page are viewed as a single entity due to the OR operator. This is why they are wrapped inside brackets.

if ( $site_description && ( is_home() || is_front_page() ) )
		$title = "$title $sep $site_description";

Another PHP logical operator you can use is the not operator !. This is more practical to use in many circumstances. For example, let us say you want to display a photograph on all of your pages except your archives. There is no need to set up a long conditional statement that asks “Is this the home page, is this a single post, is this a page…”. It is more practical to simply ask “Is this not an archive page?”.

To do this, simply add an exclamation mark before the conditional tag. The code below shows how straightforward this is in practice. It will display an image on every page of your website except archive pages.

<?php 

if ( !is_archive() ) { ?>
  
<img src="photo.jpg" />

<?php 

}

?>

Up until now, we have looked at basic examples of conditional tags being used where something is either actioned or it is not actioned (i.e. if A is true, do B). In practice, there is usually another action to do if a condition is not met. Additionally, there may be several conditions that can be met, with a different response to each one.

Rather than write lots of individual statements for this, it is practical to use else and elseif statements. This allows you a greater degree of control over what is displayed on your website.

We can show this using an example. Let us say that you want to show a different logo on your website in different areas of your website. How would you do this? The answer is simple: We use else and elseif statements. The code below shows how this can be achieved.

<?php 

if ( is_home() || is_front_page() ) { ?>
  
<img src="logo-home.png" />

<?php 

} elseif ( is_category() ) { ?>

<img src="logo-category.png" />

<?php 

} elseif ( is_single() ) { ?>

<img src="logo-blog-post.png" />

<?php 

} elseif ( is_page() ) { ?>

<img src="logo-page.png" />

<?php 

}

else { ?>

<img src="logo-general.png" />

<?php 

}

?>

Depending on what area of the website a visitor is viewing, one of five logos would be displayed using the above code. It is a basic example that illustrates how easily else and elseif statements can be used to control many different areas of your website.

Elseif statements are also used in other parts of WordPress. Most functions.php templates use them and many WordPress themes use them to change how their website title is displayed in browsers.

More Conditional Tags

There are a number of additional conditional tags available. Many of these are used by developers in themes and plugins.

Below is a list of some of the other conditional tags that are available to you.

  • is_tax() – Checks whether a custom taxonomy archive page is displayed.
  • has_term() – Checks if the current post has one of the specified terms.
  • taxonomy_exists() – Checks if the taxonomy name exists.
  • post_type_exists() – Checks if a post type exists.
  • is_post_type_hierarchical( $post_type ) – Checks if the post type is hierarchical.
  • is_post_type_archive() – Checks if the archive page of a specific post type is being displayed.
  • is_comments_popup() – Checks to see if the comments popup window is open.
  • comments_open() – Checks whether comments are permitted for the current post or page.
  • pings_open() – Checks if pings are permitted for the current post or page.
  • is_feed() – Checks whether the current query is for a feed.
  • is_404() – Checks whether a 404 error is being displayed.
  • is_paged() – Checks whether the page you are currently viewing is a paginated page other than page one. Posts and pages are paginated when you use the nextpage quicktag in your content to split up large posts.
  • is_trackback() – Checks whether a trackback is being used.
  • is_admin() – Checks whether the user is logged into the administrator area. It is not used to check whether a user has administrator privileges, only whether they are logged into the WordPress dashboard.
  • is_page_template() – Checks whether the page being viewed is using a page template. A specific page template can be defined, if necessary.
  • is_preview() – Checks whether a blog post is being viewed in draft mode.
  • has_excerpt() – Checks whether the current post has an excerpt. Specific posts can be defined.
  • has_nav_menu() – Checks whether a menu location has a menu assigned. This is used by theme developers to show something in the event that the user has not added a menu.
  • in_the_loop() – Checks whether the caller is still within the WordPress loop.
  • is_active_sidebar( $index ) – Checks if a given sidebar is being used.
  • is_multisite() – Checks if multisite is supported.
  • is_main_site() – Checks if a multisite is the main site in the network.
  • is_super_admin() – Checks if a user is a super admin within the network.
  • is_plugin_active( $plugin ) – Checks whether a plugin is activated.
  • is_child_theme() – Checks if a child theme is being used.
  • current_theme_supports( $feature ) – Checks if a theme supports a specific feature such as post formats or featured images.

Conditional tags are an important WordPress concept. Due to how useful they are, there are few WordPress themes that are designed without them. Once you understand else statements, elseif statements and logical operators such as AND, OR and Not; you will be able to tackle any conditional function.

I hope this guide helped you learn how to use WordPress conditional tags in your themes.

If you liked this article, then join ThemeLab on Twitter and Google+.

The post The Ultimate Guide to WordPress Conditional Tags appeared first on ThemeLab.

]]>
http://www.themelab.com/ultimate-guide-wordpress-conditional-tags/feed/ 1
How to Switch Off a Website With One Line of Code http://www.themelab.com/switch-website-one-line-code/ http://www.themelab.com/switch-website-one-line-code/#comments Tue, 20 May 2014 17:00:36 +0000 http://www.themelab.com/?p=4039 Sometimes you may need to switch off a WordPress site without affecting data. If you are an aspiring developer, then sometimes you may want to remotely make a site disappear without actually destroying anything. This is where CSS comes in handy. In this article, I will show you how to switch off a website with

The post How to Switch Off a Website With One Line of Code appeared first on ThemeLab.

]]>
Sometimes you may need to switch off a WordPress site without affecting data. If you are an aspiring developer, then sometimes you may want to remotely make a site disappear without actually destroying anything. This is where CSS comes in handy. In this article, I will show you how to switch off a website with one line of code.

There are two ways to do this, first method remotely loads a tiny CSS file into your site, which you can turn on from a remote URL. This method is particularly helpful for theme developers who are looking for a way to deal with non-paying clients.

The second method is to add the CSS yourself. This method is useful, when you just want to hide the style and appearance of a website.

Remotely Switching Off a Website

First thing you need to do is to visit CSS Kill Switch and create an account for your website by providing a site ID and password.

Add your site to CSS Kill Switch

Once you have added your site, CSS kill switch will show you two lines of code. You need to use either one of them, I would recommend using the @import line. Simply copy and paste it in your WordPress theme’s stylesheet.

Implementing CSS kill switch

Now to turn off your website, all you need to do is revisit CSS Kill Switch and sign in with your site’s ID and Password. Once you are logged in, simply check the Engage box to turn off the website.

Manually Switching Off a Website

What CSS Kill Switch does, can be done manually as well. Simply add this single line of code in your theme’s stylesheet:

body * { display: none !important; }

CSS Kill Switch also adds black as background color. If you are doing this manually and want to deceive someone into believing that there is something wrong with the website, then leaving it white will make people think they are facing the dreadful WordPress white screen of death error. It will take them sometime to figure out that there is nothing wrong with WordPress on their website.

Please note that by switching off the appearance of a website, you are not actually shutting down a website. The contents of the site will still be visible to search engines and text only browsers. Any user can still see the content by viewing the source code of the page. The CSS code is also easily detectable by clicking on Inspect Element any where on a web page.

I hope this article helped you learn how to switch off a website with just one line of code.

If you liked this article, then join ThemeLab on Twitter and Google+.

The post How to Switch Off a Website With One Line of Code appeared first on ThemeLab.

]]>
http://www.themelab.com/switch-website-one-line-code/feed/ 1
How to Highlight Author Comments in WordPress http://www.themelab.com/highlight-author-comments-wordpress/ http://www.themelab.com/highlight-author-comments-wordpress/#comments Mon, 19 May 2014 17:00:24 +0000 http://www.themelab.com/?p=4042 It becomes difficult for users to notice author’s comments on posts with many comments. This sometimes results into users asking same question in comments, even though the author has already answered in an earlier comment. This is why most popular blogs highlight author comments in WordPress. It is really simple, and in this article I

The post How to Highlight Author Comments in WordPress appeared first on ThemeLab.

]]>
It becomes difficult for users to notice author’s comments on posts with many comments. This sometimes results into users asking same question in comments, even though the author has already answered in an earlier comment. This is why most popular blogs highlight author comments in WordPress. It is really simple, and in this article I am going to show you how to highlight author comments in WordPress.

Author comment highlighted

WordPress adds CSS classes to many elements in the HTML output it generates. These default CSS classes can be used or by themes or plugins. WordPress also adds a CSS class to comments added by a post’s author. This CSS class is .bypostauthor and you can see it by right clicking on your own comments for posts you have written.

bypostauthor class added to comments written by post's author in WordPress

Now all you have to do is to use this class to highlight author comments differently. Lets change the background color of author comments in WordPress. Add this CSS to your theme or child theme’s stylesheet.

.bypostauthor { 
background: #eee;
} 

Here is another example, this one just adds a border to highlight author’s comment:

.commentlist .bypostauthor {border-top: 10px solid #e18728;}
.commentlist li ul.children li.bypostauthor {border-top: 10px solid #e18728;}

The easiest and quickest way to learn how to modify themes is by studying other themes. Lets see how the default Twenty Twelve theme adds ‘Post Author’ label to highlight author comments in WordPress.

Twenty Twelve uses a function called twentytwelve_comment. Defined in the theme’s functions.php file, this function acts as the callback function for wp_list_comments() function. Adding a callback function to wp_list_comments allows themes to control the display of comments.

In Twenty Twelve’s functions file you find these lines which add the Post Author label to comments added by the post’s author:

printf( '<cite><b class="fn">%1$s</b> %2$s</cite>',
	get_comment_author_link(),
	// If current post author is also comment author, make it known visually.
	( $comment->user_id === $post->post_author ) ? '<span>' . __( 'Post author', 'twentytwelve' ) . '</span>' : ''
);

After adding the Post Author label, it styles the label using this CSS:

.bypostauthor cite span {
color: #fff;
background-color: #21759b;
background-image: none;
border: 1px solid #1f6f93;
border-radius: 2px;
box-shadow: none;
padding: 0;
}

We hope this article helped you highlight author comments in WordPress.

If you liked this article, then join ThemeLab on Twitter and Google+.

The post How to Highlight Author Comments in WordPress appeared first on ThemeLab.

]]>
http://www.themelab.com/highlight-author-comments-wordpress/feed/ 0
How to Display Code in WordPress Posts http://www.themelab.com/how-to-display-code-in-wordpress-posts-and-pages/ http://www.themelab.com/how-to-display-code-in-wordpress-posts-and-pages/#comments Tue, 13 May 2014 17:00:27 +0000 http://www.themelab.com/?p=4027 One of the most common problem that new WordPress users comes across is displaying code in posts. The problem occurs when a user tries to share a code snippet into their posts. By default WordPress filters out the code and it becomes impossible to read. In this article, I will show how to display code

The post How to Display Code in WordPress Posts appeared first on ThemeLab.

]]>
One of the most common problem that new WordPress users comes across is displaying code in posts. The problem occurs when a user tries to share a code snippet into their posts. By default WordPress filters out the code and it becomes impossible to read. In this article, I will show how to display code in WordPress posts.

Using HTML Entities to Display Code in WordPress Posts

HTML entities are special code that is parsed by browsers to display the character associated with that particular entity. For example:

  • &amp; becomes &
  • &lt; becomes <
  • &gt; becomes >

Using HTML entities you can display code inside your WordPress posts.

&lt;div class="awesome"&gt; will be displayed in browser like this:

<div class="awesome">

This method is particularly useful if you just want to display a couple of lines of code. However, this method can be difficult to apply manually for multiple lines of code.

To solve this problem you can use an online HTML Entities encoder, like this one. Simply put the code you want to convert and hit the encode button. It will convert your code into HTML entities and you can safely paste that code inside <code></code> tag.

Using Plugin To Display Code in WordPress Posts

If you frequently share code snippets in your posts, then the above mentioned methods are not going to work for you. First thing you need to do is install and activate the SyntaxHighlighter Evolved plugin. It will save you from the hassle of converting code into HTML entities. Not only that it will highlight the code to display it in a much more readable format.

It works out of the box, all you need to do is wrap your content around specific language tags. For example, if you are sharing a code that is mainly in PHP, then you would wrap your code like this:

[php]
<?php
function themelab_demo_code() {
$i = 1;
while ($i <= 10):
echo $i."<br />";
$i++;
endwhile;
}
themelab_demo_code();
?>
[/php]

It will appear on your site, like this:

<?php
function themelab_demo_code() { 
$i = 1;
while ($i <= 10):
    echo $i."<br />";
    $i++;
endwhile;
}
themelab_demo_code();
?>

For different languages there are different aliases that you can use. Some of the most commonly used aliases are:

  • To display HTML code use [html] [/html]
  • For CSS use this: [css][/css]
  • For MySQL use this: [sql][/sql]
  • For Javascript use this: [javascript][/javascript]

I hope this article helped you display code in WordPress posts and pages.

If you liked this article, then join ThemeLab on Twitter and Google+.

The post How to Display Code in WordPress Posts appeared first on ThemeLab.

]]>
http://www.themelab.com/how-to-display-code-in-wordpress-posts-and-pages/feed/ 0
How to Use WordPress Theme Customizer To Modify Themes http://www.themelab.com/how-to-use-wordpress-theme-customizer-to-modify-themes/ http://www.themelab.com/how-to-use-wordpress-theme-customizer-to-modify-themes/#comments Mon, 12 May 2014 17:00:42 +0000 http://www.themelab.com/?p=4714 All ThemeLab themes allow users to customize their WordPress sites using the built-in Theme Customizer. Theme Customizer provides developers an easier way to replace theme option panels. But more importantly, it is easier for the end user to setup themes with live preview without even activating a theme. In this article, I will show you

The post How to Use WordPress Theme Customizer To Modify Themes appeared first on ThemeLab.

]]>
All ThemeLab themes allow users to customize their WordPress sites using the built-in Theme Customizer. Theme Customizer provides developers an easier way to replace theme option panels. But more importantly, it is easier for the end user to setup themes with live preview without even activating a theme. In this article, I will show you how to use WordPress theme customizer to modify themes.

Before we get started, please keep this in mind that not all WordPress themes use theme customizer. Some WordPress themes have their own options panel. However, recently more and more theme developers are utilizing theme customizer.

For the sake of this tutorial, I am using our first free theme Slipstream. It is a fully responsive theme for blogs and personal websites.

To launch theme customizer in WordPress, you need to click on Appearance menu to view all installed themes on your site. You will notice that your currently active theme has a customize button. Clicking on the button will launch the theme customizer. You can also launch theme customizer for any of your currently installed themes. Just take mouse over to a theme, and then click on Live Preview button. However, any changes you make to an inactive theme in Live Preview can only be stored by activating the theme.

Customizing WordPress themes using Theme Customizer

Theme customizer screen is divided into two sections. On your right, you will see a live preview of your site. On the left, you will find different sections that you can customize through theme customizer.

WordPress theme customizer with live preview

Clicking on a section in theme customizer will expand it to show you the settings for that section. For example, in the screenshot below you can see Background Image section expanded in Slipstream’s Theme Customizer view.

Theme control expanded

Some of the most common theme customizer controls are

  • Site Title and Tag Line – Allows you to change site title and tagline.
  • Colors – Choose colors for different areas in site layout.
  • Header Image – Set an image in the header.
  • Background Image – Set a background image for all pages in your theme.
  • Widgets – One Widgets section for each widget ready area in your theme.

The options in available in theme customizer may differ from theme to theme.

Setting Widgets in WordPress Theme Customizer

WordPress 3.9 introduced live widget previews, which allows you to set up widgets directly from theme customizer. Setting up widgets in theme customizer is easier and a little faster than adding them from the Widgets screen.

Simply click on a Widgets area to expand it. If the widget area already contains widgets, then theme customizer will display those widgets. You rearrange widget order by simply dragging widgets. You will also see a +Add Widget button at the bottom.

Expanded widget area in theme customizer

Clicking on the Add Widget button will display a new column to the right containing all the available widgets that you can add to your sidebars/widget ready area. Just click on the widget you want to add and it will appear in your widget area.

Adding widget from available widgets in theme customizer

You can also edit widgets in theme customizer. Just click on the downward arrow next to any widget in your widget area and it will expand to show you the widget options. You can edit the widget while viewing a live preview of it. You can also remove a widget at any time by clicking on the delete link.

Editing widgets in WordPress theme customizer

As the usage of theme customizer becomes popular among developers we can hope that it will become the default theme options panel in the future. We can also hope that we will be seeing innovative usage of theme customizer in the plugins as well. This will provide users a standard location and method to customize their themes.

I hope that this article helped you learn how to use theme customizer to modify WordPress themes.

If you liked this article, then join ThemeLab on Google+ and Twitter.

The post How to Use WordPress Theme Customizer To Modify Themes appeared first on ThemeLab.

]]>
http://www.themelab.com/how-to-use-wordpress-theme-customizer-to-modify-themes/feed/ 0
How to Display Inline Ads in WordPress http://www.themelab.com/display-inline-ads-wordpress/ http://www.themelab.com/display-inline-ads-wordpress/#comments Fri, 09 May 2014 17:00:46 +0000 http://www.themelab.com/?p=4021 Many WordPress users, find inline ads to be more profitable for their sites. Advertising platforms often encourage publishers to place advertisements closer to content area for more clicks. Inline ads are a popular advertising format that is used on millions of websites. In this tutorial, I will show you how to display inline ads in

The post How to Display Inline Ads in WordPress appeared first on ThemeLab.

]]>
Many WordPress users, find inline ads to be more profitable for their sites. Advertising platforms often encourage publishers to place advertisements closer to content area for more clicks. Inline ads are a popular advertising format that is used on millions of websites. In this tutorial, I will show you how to display inline ads in WordPress using a variety of methods.

The first method is the easiest one, where you can insert ads into your posts using a WordPress plugin. The other three methods require you to edit your WordPress theme templates, therefore they touch upon a lot of similar topics. As such, I recommend that you read all methods of displaying inline ads so that you get a full understanding of how to implement the techniques on your website.

How to Display Inline Ads in WordPress – No Coding Required

Many web publishers want to display advertisement after the first few paragraphs. To do this by modifying code will be complicated for most users. But don’t worry, we got the perfect plugin for you.

Using a good ad management plugin for WordPress is the easiest and most efficient way to display inline ads in your posts. To use this method, first thing you need to do is install and activate the Insert Post Ads plugin. Once activate, you will notice a Post Adverts menu item in your WordPress admin menu.

To set up the plugin you need to go to Post Adverts » Settings. The plugin will display the post types where you can insert inline ads into posts. By default, you will see posts and pages. Click on both if you want to display ads on your posts as well as your pages. Otherwise, just check the box next to posts and save your settings.

Insert post ads settings

The next step is to create ads in post adverts. Go to Post Adverts » Add New. Provide a title for your ad. This could be anything that helps you remember what type of ad code it is, e.g. Medium Rectangle. Below that you need to paste the code provided by your advertising platform. Lastly, you need to choose when you want the ad to appear. The default value is after the first paragraph.

Adding a new ad code

That’s all, your ad will be automatically displayed after the first paragraph.

However, if you are feeling more adventurous and want to try your hands on modifying themes, then continue reading. But before you make any changes to your theme or child theme. I would urge you to create a complete backup of your site, or at least back up your WordPress theme.

How to Display Inline Ads in All Posts or Pages

Inline ads can be displayed in all of your posts or pages by editing your WordPress theme templates directly. The template that you need to edit depends on the page you want to place your ads. For this tutorial, I will assume that you want to display inline ads on blog posts and pages; however the techniques detailed below will work with any template that publishes content.

In order to place an inline ad at the top of your content area, you need to locate the function the_content(). This function pulls the content for a WordPress post or page. It is always located within the WordPress loop.

For pages, you need to edit the page.php template. In Twenty Thirteen, the code surrounding the the_content() function looks like this:

<div class="entry-content">
						<?php the_content(); ?>
						<?php wp_link_pages( array( 'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentythirteen' ) . '</span>', 'after' => '</div>', 'link_before' => '<span>', 'link_after' => '</span>' ) ); ?>
					</div><!-- .entry-content -->

Blog posts are controlled through the single.php template. Many themes place the complete WordPress loop code within the single.php template. Over the last few years, many WordPress theme developers have moved parts of the WordPress loop into dedicated templates. This is primarily to accommodate post formats in a tidier fashion.

If the the_content() function is not placed directly within the single.php template itself, you can view the code that links to it in the single.php template and determine what template to edit from that.

As an example, let us look at how the default WordPress theme Twenty Thirteen handles things. The WordPress loop code within the single.php template looks like this:

<?php /* The loop */ ?>
			<?php while ( have_posts() ) : the_post(); ?>

				<?php get_template_part( 'content', get_post_format() ); ?>
				<?php twentythirteen_post_nav(); ?>
				<?php comments_template(); ?>

			<?php endwhile; ?>

The template call for get_template_part() imports the content from the content templates. For regular blog posts, that template is content.php. Templates such as content-quote.php (quotes), content-image.php (images) and content-status.php (statuses) are used for other post formats.

In content.php, the code surrounding the the_content() function looks like this:

<div class="entry-content">
		<?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentythirteen' ) ); ?>
		<?php wp_link_pages( array( 'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentythirteen' ) . '</span>', 'after' => '</div>', 'link_before' => '<span>', 'link_after' => '</span>' ) ); ?>
	</div><!-- .entry-content -->

To place your advertisement at the top of the content area, you need to add your ad code above the the_content() function. You can then ensure your content wraps around it by using a CSS float to float your advertisement to the left or right hand side.

The code below will show your ad at the top right hand side of your articles with a five pixel padding at the left and bottom hand side of the ad.

<div style="float:right;padding:0 0 5px 5px;">
<!-- Your Ad Code Here -->
</div>

Below is an example of adding the ad code above to the the_content() function in the Twenty Thirteen page.php template:

<div class="entry-content">
<div style="float:right;padding:0 0 5px 5px;">
<!-- Your Ad Code Here -->
</div>
		                                <?php the_content(); ?>
						<?php wp_link_pages( array( 'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentythirteen' ) . '</span>', 'after' => '</div>', 'link_before' => '<span>', 'link_after' => '</span>' ) ); ?>
					</div><!-- .entry-content -->

This would produce the following:

Float Ad to the Right

Your advertisements can be floated on the left hand side of your content area by changing the CSS float from right to left. You also need to change the padding so that the spacing is shown at the right and bottom hand side of your ad rather than the left and bottom hand side.

Below is an example of adding ad code to the the_content() function in the Twenty Thirteen content.php template. The code will float ads to the left hand side in blog posts.

<div class="entry-content">
<div style="float:left;padding:0 5px 5px 0;">
<!-- Your Ad Code Here -->
</div>
		<?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentythirteen' ) ); ?>
		<?php wp_link_pages( array( 'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentythirteen' ) . '</span>', 'after' => '</div>', 'link_before' => '<span>', 'link_after' => '</span>' ) ); ?>
	</div><!-- .entry-content -->

The final result looks like this:

Float Ad to the Left

In the examples above I have styled our advertisements directly within the CSS division itself. Alternatively, you can create a CSS class and add it to your CSS stylesheet (which is the style.css template file).

For example, you could create a CSS class entitled inlineads:

.inlineads {float:right;padding:0 0 5px 5px;}

Then link to the class within the ad code itself:

<div class="inlineads">
<!-- Your Ad Code Here -->
</div>

The end result is the same, however placing styling in your stylesheet is a more practical solution as if you change the style of your ads (e.g. add a border or change the background color), you only have to change the code in the style.css template. This saves you from editing several templates.

As always, remember to back up the changes you make to your templates before you update your themes to a new version. Otherwise, all the changes you made will be lost.

 

How to Display Inline Ads In Selected Posts or Pages Using Conditional Tags

We can extend our template code further and use WordPress conditional tags to only show inline advertisements in selected posts and pages.

The conditional tag function for blog posts is is_single. A post can be passed as a parameter to the function using the post title, post slug or post ID. The post slug, as you may recall, is the permalink part of the URL. Whereas the post ID relates to the identification number of the post in your WordPress database. Conditional tags use boolean data values; therefore a value has to be either true or false.

Let us consider a news based post entitled “Latest Blog News for December”. The URL of the post is www.yourwebsite.com/news-post-seven/ and the identification number is 7. We can specify this post using the condition tag is_single in one of three ways:

  • is_single( ‘Latest Blog News for December’ )
  • is_single( ‘news-post-seven’ )
  • is_single( ’7′ )

You can also use an array that will pass a result of true if any of the conditions are met.

  • is_single(array( ‘Latest Blog News for December’ , ‘news-post-seven’ , 7 ))

Conditional tags are always used with if statements. The code below will show an inline advertisement only on the blog post “Latest Blog News for December”. It will not be showed on any other post.

<?php if ( is_single( 'news-post-seven' ) ) { ?>
<div class="inlineads">
<!-- Your Ad Code Here -->
</div>
<?php }?>

It is unlikely that you will want to show an inline advertisement in only one blog post on your website. Usually, website owners want to display advertisements on the majority of their blog posts. Conditional tags can be used to display an advertisement on all posts except those that you specifically exclude. This is done by using the NOT logical operator (!).

The following code will display an inline advertisement on all blog posts except post fifteen.

<?php if ( ! is_single( 15 ) ) { ?>
<div class="inlineads">
<!-- Your Ad Code Here -->
</div>
<?php }?>

The conditional tag for pages is is_page. It works in the exact same way as is_single. Page title, page slug and page ID can all be passed as parameters.

The NOT logical operator can be used with pages too. Let us say that you want to display inline advertisements on all of your content pages but not on informational pages such as your about page. All you have to do is specify every page that you want to exclude. We can do this using the OR logical operator (||).

The code below informs WordPress that we do not want to display our advertisement on any of the pages that are listed. On all other pages, the inline advertisement will be displayed.

<?php if ( !( is_page( 'About' ) || is_page( 'Contact' ) || is_page( 'Privacy Policy' ) ) ) { ?>
<div class="inlineads">
<!-- Your Ad Code Here -->
</div>
<?php }?>

We can also exclude pages by using an array:

<?php if ( ! is_page(array( 'About' , 'Contact' , 'Privacy Policy' )) ) { ?>
<div class="inlineads">
<!-- Your Ad Code Here -->
</div>
<?php }?>

Else and elseif statements can also be used to display certain advertisements in one part of your website and other advertisements in another. For example, the code below would display one type of advertisement in blog posts and another type of advertisement in all of your pages.

<?php if ( is_single() ) { ?>
<div class="inlineads">
<!-- Single Post Ad Code Here -->
</div>
<?php } elseif ( is_page() ) { ?>
<div class="inlineads">
<!-- Page Ad Code Here -->
</div>
<?php }?>

We have only touched the surface of what can be achieved using conditional tags in WordPress. It is possible to create complex statements using conditional tags that display different advertisements across your whole website. The concept is simple. You just have to specify where you want ads to be displayed and where you do not want them to be displayed using if statements.

 

How to Display Inline Ads In Selected Posts or Pages Using Custom Fields

Custom fields allow WordPress users to assign custom fields to posts and pages. In order to see the custom field area in your posts and page editor screens, you need to open up your screen options box at the top of your page and ensure the “Custom Fields” checkbox is enabled.

Screen Options

Custom fields have two parts: The name of the custom field and its corresponding value.

Custom Field Box

Information can be pulled from custom fields in theme templates. This allows us to add custom fields to individual posts and pages and pull specific information from the theme templates based on those custom fields.

To pull data from custom fields in WordPress, you need to use the get_post_meta function. The function has three parameters.

get_post_meta( $post_id, $key, $single )

The $post_id parameter is required whilst the other two parameters are optional.

  • $post_id – The ID of the post you want data from.
  • $key – The name of the string that is defined in the custom field box in your post or page.
  • $single – A boolean parameter that can be set as true or false. If set as true, the string that was entered as a value in the custom field box will be returned. If set as false, an array of the custom fields will be returned.

Let us look at an example of how we can display inline ads within specific posts and pages. For any post or page we want to display an advertisement, we can define the name as ad_size and then define a value such as 300×250.

Custom Field Box Example

If we called (get_post_meta($post->ID, $key, true) in the above post (through a template), the output would be “300×250″. This is useful as we can use this output to control what type of advertisement we want to display on our website.

For example, let us assume we want to display three sizes of advertisements in our blog posts. We can control what advertisement is displayed through a series of if and elseif statements.

Check out the code below to see how this can be achieved. Remember that this code should be added above the the_content() function in your theme template (e.g. page.php, single.php, content.php etc).

<?php $key="ad_size";
if (get_post_meta($post->ID, $key, true) == "300x250") { ?>
<div class="inlineads">
<!-- 300x250 Ad Code Here -->
</div>
<?php } elseif (get_post_meta($post->ID, $key, true) == "250x250") { ?>
<div class="inlineads">
<!-- 250x250 Ad Code Here -->
</div>
<?php } elseif (get_post_meta($post->ID, $key, true) == "200x200") { ?>
<div class="inlineads">
<!-- 200x200 Ad Code Here -->
</div>
<?php } ?>

The first thing we do above is define the parameter $key as “ad_size”. This ensures that one of our three advertisements will only be displayed if the custom field “ad_size” has been entered for a post or page. $post->ID is used to pull the ID of the post and $single is set to true so that a string is output. If you go to one of your posts or pages and enter “ad_size” in the name field and “200×200″ in the value field; the 200×200 advertisement will be displayed.

Using this method allows you to control what advertisements are displayed on your website. With conditional tags, we controlled what pages and posts on a website displayed advertisements directly through the theme template. With custom fields, we controlled what posts and pages display advertisements directly through the post and page editor pages. One method is not better than the other. It all comes down to how you want to set it all up.

I hope this article helped you display inline ads in your WordPress posts and pages.

If you liked this article, then join us on Twitter and Google+.

The post How to Display Inline Ads in WordPress appeared first on ThemeLab.

]]>
http://www.themelab.com/display-inline-ads-wordpress/feed/ 0
How to Preview Your WordPress Theme Before It Goes Live http://www.themelab.com/preview-wordpress-theme-live-site/ http://www.themelab.com/preview-wordpress-theme-live-site/#comments Thu, 08 May 2014 17:00:54 +0000 http://www.themelab.com/?p=3801 There are so many beautiful WordPress themes out there. With beautiful demos where you can see those themes in action. However, when you install that theme on your site it looks nothing like the demo. Wouldn’t it be better if you could see a preview of how it would look on your site? In this

The post How to Preview Your WordPress Theme Before It Goes Live appeared first on ThemeLab.

]]>
There are so many beautiful WordPress themes out there. With beautiful demos where you can see those themes in action. However, when you install that theme on your site it looks nothing like the demo. Wouldn’t it be better if you could see a preview of how it would look on your site? In this article, I am going to show you how to preview your WordPress theme before it goes live.

If you are switching theme on a live website, you need to preview your new theme to ensure that it looks correct. One way to do this is to set up a demo website that has the same content, theme, and plugins installed. Many website owners do this to avoid any downtime during the switch.

Another option is to preview your new theme directly through your WordPress admin area. Once you have installed a theme you would see a Live Preview button below the theme’s thumbnail.

Live Preview button in WordPress

Clicking on the Live preview button will open the theme in WordPress theme customizer.

Previewing your theme live in WordPress

Depending on what theme you are using, you can make changes to your theme using different controls in the left pane on the preview screen. All ThemeLab themes make it super easy for you to setup your site completely from theme customizer. This means that you can see the changes live on your website.

Make live changes to your theme using Theme Customizer

You can even close the controls pane to view the theme in its full glory by clicking on Collapse button on the bottom left corner of the controls pane.

Close customizer controls for a full preview

Theme Customizer in WordPress is a powerful tool, you can use it to set up a theme before activating it on your site. Since WordPress 3.9, you can even add and setup widgets from the Live Preview screen.

Once you are satisfied with the preview and ready to go live, simply click on Save & Activate button. This will save your changes and activate the theme on your site. However, if you are not yet ready you can simply click on the cancel button to exit theme preview.

All ThemeLab themes try to take the maximum advantage of this powerful customizer, making it extremely simple for users to set up their themes quickly without going through a crazy marathon of complex options.

I hope this article helped you learn how to preview a WordPress theme without activating it on your site.

If you liked this article, then join ThemeLab on Twitter and Google+

The post How to Preview Your WordPress Theme Before It Goes Live appeared first on ThemeLab.

]]>
http://www.themelab.com/preview-wordpress-theme-live-site/feed/ 0