Categories
Genesis Tutorials

Create a Ribbon in WordPress Using CSS & HTML

Everyone loves ribbons but there’s not many tutorials on how to create them manually rather than install another plugin.

Add Css code to your custom style.css file in your child theme or your custom css file in your parent theme.

There’s 2 steps that need to be completed to make the ribbon display:

Step 1) Add a large block of css code to your child theme’s or parent theme’s custom style.css file

Step 2) Add a few lines of html code to your html editor

FCC Ribbon Manager Plugin

If you’re not into code, try installing a plugin.

Make sure you upload a .gif image for the ribbon as MS I.E has a problem with .PNG transparency.

Ribbon Code Builder

UIParade offer a free ribbon builder which is a better option than using plugins in my opinion. Check out there ribbon builder.

Categories
Genesis Tutorials

How To Move Your Author Box in WordPress

Author box for WordPressIf you’re using the Woo framework, you’ll know that the author box position is above the subscribe & connect options.

If you’re not using Woo, you may find this tutorial on how to add an author box helpful.

If you want to move your subscribe & connect links closer to the end of your post, you’ll need to move your author box below your subscribe & connection links by adding some custom php code in your theme’s functions.php file.

Caution: Always backup your files before editing php code.

function woo_author() {

		// Author box single post page
		if ( is_single() && get_option( 'woo_disable_post_author' ) != 'true' )
			add_action( 'woo_post_inside_after', 'woo_author_box', 12 );

		// Author box author page
		elseif ( is_author() )
			add_action( 'woo_loop_before', 'woo_author_box', 10 );

	}

file_phpIf you’re not using a Woo theme, you could edit this php code and change the filters and actions (hooks) to match your themes.

Creating a unique site by customizing a Woo theme is easy as Woo will give you some of the custom code when you need to make changes to your layout & design of a woo theme.

The Woo framework also offers a Hook Manager so you can easily paste the code in any location you wish to create a custom function in.

If you can’t afford a theme made by one of the best premium WordPress theme creators, checkout the range of free woo themes which are all built on the premium Woo framework.

Categories
Genesis Tutorials

Adding Custom Social Media Subscribe & Connect Icons to The Canvas Theme

Canvas is the most ambitious theme Woo have created so far and is by far the most popular. It offers a huge range of both theme and site options and is highly customizable. Different folks use different social media platforms to connect for different reasons.

In this post i’ll show you how easy it is to add custom social media buttons replacing one of the default buttons you don’t need to use.

I connect well on Stumbleupon and don’t use Flickr very much so i changed the Flickr code to Stumbleupon.

Here’s how i did it.

Login to FTP or cPanel and go to your parent themes includes folder. Here’s the path for beginners public_html/wp-content/themes/canvas/includes

You’ll find 2 files which need to be edited:

  1. theme-functions.php
  2. theme-options.php

Beginners Tip: Download a copy of both these files to your local pc before you begin to edit the code. This way you can replace the files if need to fix an error in WordPress.

theme-functions.php file

On line 368, you’ll find the code for Flickr. Simply change any references from Flickr to Stumbleupon or any social media platform you like.

Here’s the before and after shots of the code which is changed.

Before Editing

<!--?php } if ( $woo_options['woo_connect_flickr'] != "" ) { ?-->
<a class="flickr" href="<?php echo $woo_options['woo_connect_flickr']; ?>"><img title="<?php _e('See photos on Flickr', 'woothemes'); ?>" src="<?php echo get_template_directory_uri(); ?>/images/ico-social-flickr.png" alt="" /></a>

After Editing

<!--?php } if ( $woo_options['woo_connect_stumbleupon'] != "" ) { ?-->
<a class="stumbleupon" href="<?php echo $woo_options['woo_connect_stumbleupon']; ?>"><img title="<?php _e('Connect on Stumbleupon', 'woothemes'); ?>" src="<?php echo get_template_directory_uri(); ?>/images/ico-social-stumbleupon.png" alt="" /></a>

theme-options.php

Next step is to edit the Canvas themes theme-options.php file located in the includes folder on line 1424. Here’s the path for beginners    public_html/wp-content/themes/canvas/includes

Here’s the before and after shots of the code which is changed.

Before Editing

$options[] = array( "name" => __( 'Flickr URL', 'woothemes' ),
"desc" => __( 'Enter your <a href="http://www.flickr.com/">Flickr</a> URL e.g. ', 'woothemes' ),
"id" => $shortname."_connect_flickr",
"std" => '',
"type" => "text");

After Editing

$options[] = array( "name" => __( 'Stumbleupon URL', 'woothemes' ),
"desc" => __( 'Enter your <a href="http://www.stumbleupon.com/">Stumbleupon</a> URL e.g. http://www.stumbleupon.com/stumbler/wordpresssites', 'woothemes' ),
"id" => $shortname."_connect_stumbleupon",
"std" => '',
"type" => "text");

You can edit any of the social media code you don’t want to use and replace it with a custom social media choice. You can also keep all the existing social media and add more if you wish.

Upload Custom Social Icon

The final step is to upload a 32 x 32 pixel social icon to your themes images folder. Here’s the path to the images folder where you’ll also find all the default social icons stored. public_html/wp-content/themes/canvas/images

ico-social-stumbleupon.pngName the icon ico-social-stumbleupon.png or whatever social icon you add.

Tip: Download and save the 2 files you have edited so next time you update your parent theme, Canvas, your custom coding won’t be overwritten and lost.

You could also add the edited files to your custom child theme if you know what to do.

Adding your own choice of social media connect buttons to the Canvas theme is easy.

Categories
Genesis Tutorials

Add Country Specific Address State Code to Gravity Forms Address Fields for Non U.S Types

Gravity forms Country FieldsGravity forms is the most popular premium forms plugin for WordPress and one of the best plugins all round. If you’re a non U.S developer, you may need to customize the address fields to display states, provinces or regions for a specific country.

Gravity forms, out of the box, only displays United states & Canadian states with a default International field.

In this tutorial i’ll show you how to add  country filters to create non U.S address types for Australian state’s, U.K states and Brazilian states for custom address fields.

There’s already an International address type included but it doesn’t display specific countries or non U.S states.

Add this code to your theme’s functions.php file (A child theme or custom functions.php file is suggested otherwise your custom code will be lost when you update your theme).

Requirements

If you don’t already own a Gravity forms license, you’ll need to purchase Gravity forms license.

United Kingdom Address Type Code

If you’re not from any of these countries you could easily edit the above code for your own country and create address form fields using the excellent form plugin, Gravity forms.

Australian Address Type Code

I’ve already written several other posts on how to customize gravity forms and i’ll be writing more in the future as its such a hugely popular plugin.

Here’s another address type for Brazil:

Brazilian Address Type Code

If you have any other country code address types you have used already, you are welcome to send them to me which will help other Developers using the contact form.

Categories
Genesis Tutorials

How to Easily Customize Your Themes Style Sheets Like a Pro

Styling your WordPress theme using CSS code can be achieved the easy way or the hard way. You can either learn CSS coding or you can simply edit your themes existing code.

If you need to customize your WordPress site and style it to your own unique look & feel, there’s a simple way to do it. Problem solved however your changes will be lost when you update your theme so i have a solution for this also.

In this tutorial for beginners, i’ll show you the easiest way to customize the appearance of your site and you can also view a video at the end of this post which shows you from a different perspective.

Create a Folder for Your Customization

As mentioned previously, in order to avoid losing your custom changes, you need to create a child theme.

A child theme is a separate file folder directory for all your custom coding so when you update your theme, your custom coding won’t get overwritten. If you edited the core files of your parent theme, you would lose any customization after updating your theme.

Another option you may have is to use your parent themes custom-style.css file if your theme includes one. Either way, you are creating a separate file folder to save you customization from being lost when you update your theme.

Copy Parent Themes CSS Code

Once you have setup your child theme, copy the CSS code you want to change from your parent themes style.css file to your child theme style.css file.

You don’t need to copy all your parent themes CSS code, you can simply find the block of code which you want to change and make the changes in your child theme.

Caution: Its industry best practice to download a copy of the files you will be working with as backup in case you make a mistake. This way you can easily upload the original file to the correct location and quickly restore your site to normality.

Sometimes, no matter how many design options premium themes offer, you may find you still need to change a particular part of your site that’s not covered in the design panel.

Custom Styling Example

I wanted to change the color of the RSS Subcribe links from the default color, orange to white. There is no way to do this in the themes design options so i simply copied the line of code from the parent themes style.css file to the child themes style.css file and changed the hex code from orange to white.

Copy Parent Themes CSS Code to Child Themes Style.css File


Parent Themes Style.css File

Parent Theme Style Sheet

Child Themes Style.css File

Child-Theme - Style CSS

I copied Line 208 from the parent themes style.css file to my child themes style.css file and changed the color from #c63foo to #ffffff

Line 41 in the child themes style.css file is the same as Line 208 in the parent themes style.css file except for the change i have made to the hex colour.

Your child theme will overwrite your parent themes style.css file when it loads so all your custom coding appears.

Here’s an excellent video which explains custom styling using two different methods.

Theme Customization Video

Best practises for customizing your WooTheme

Changing Parent Theme Style.css

The above method can be used on any theme you like to fully customize your parent theme using your own styling and decoration preferences.

Some themes also provide a custom.css folder created for the same reasons as a child theme. If you only want to makes changes to your CSS code, you can use the custom css file, if your parent theme includes one. The other option is to create a child theme like i have written about previously.

You can also add custom CSS code which isn’t included in your parent theme to either your parent themes custom.css file or child themes style.css file.

I’ll be writing more tutorials about the easiest and best ways to customize WordPress themes soon.

Categories
Genesis Tutorials

What is a Hook? Basic Guide For Beginners

Hooks are also known as Filters & Actions which are used by developers to make website changes without modifying the WordPress core files directly. Hooks are used in both theme & plugin files to create & add custom functions or edit & remove functions already in your themes code.

Basically, you can modify the core WordPress code and your themes core files 3 ways:

  1. Adding functions
  2. Removing functions
  3. Editing functions

Rather than make changes to the core WordPress code, hooks allow developers to change the functions of the WordPress core files using custom coding that won’t weaken the core files of WordPress or the theme you have installed.

Each time you update your WordPress installation, your changes will not be lost which would be the case if you edited the WordPress core files.

All custom coding using hooks is placed in your child themes  – functions.php file which isn’t effected when you update your plugins or WordPress core files. You will need to save this file before updating your theme.

There are 2 types of Hooks used in WordPress – Filters & Actions: Filters – You can add filters add_filter() to filter out some default functions while leaving other functions active.

  • add_filter()

Example – Here the filters remove the header, sidebar and footer which creates a sales or squeeze page from a standard page template.

function custom_remove_defaults($content) {
return false;
}
function my_landing_page() {
if (is_page('007')) {
add_filter('thesis_show_header', 'custom_remove_defaults');
add_filter('thesis_show_sidebars', 'custom_remove_defaults');
add_filter('thesis_show_footer', 'custom_remove_defaults');
}
}
add_action('template_redirect','my_landing_page');

This custom function consists of:

  1. A function we have created using a descriptive name
  2. The names of the hooks we want to filter out
  3. The name of the action we want to execute along with the name of the custom function

This code has been created using Thesis filters so you would need to modify the filter names and page I.D number to make it work with your theme. Actions – You can use Actions to add functions add_action() and also to remove functions remove_action().

Action Hooks provide the location where you can add custom coding like HTML to that specific location which the hook refers to.

  • add_action()

Writing Hooks normally happens in your child themes functions.php file located wp-content/themes/child/functions.php

WordPress Hooks

Different themes offer different names for their hooks and even have different locations for the output of the hooks, however the principal is the same.
Note: Canvas Hook/Filter Reference shows you the exact Woo theme locations of where your hooks will be used.

You can see from this Woo hooks map exactly where you can place your custom code using Hooks. Thesis also offer a plugin which creates a Hook Manager like the Woo Hook manager.

  • The Thesis Open Hook Plugin is free and an excellent solution for adding any type of content or code anywhere there’s a hook in Thesis.
  • The Woo Themes Hook Manager is also another option to add HTML to specific locations around your theme without the need to write code to your themes functions.phpfile.
  • The Simple Hooks Plugin for Genesis is a free plugin which basically gives you the same features as the Thesis open hook plugin so you can display any type of content in any location there’s a Genesis hooks.
  1. First step to using Hooks in WordPress is to add a function which will allow you to add your custom content (normally HTML)
  2. Second step is to Hook your custom content to the correct location in your theme using the correct hook for that location

Add Actions

Hooks execute the functions you apply to them. All you need to do is add the add_action()command

add_action(‘hook_name’, ‘your_custom_function’);

The Hook name will depend on which theme you are using. Remove Action Removing existing functions from WordPress or your themes functions can be achieved by using the

remove_action(‘hook_name’, ‘function_you_want_to_remove’);

To “hook on” to a function, you’ll need:

  • The label of the hook you want to hook onto (for example, `woo_post_after`).
  • A function which we’ll use to display your custom content.
  • An `add_action()` line to perform the “hooking”.

The best way to learn and master Hooks – Filters and Actions is to setup a test site and try them by referring to the:

  1. Map of hook locations for your particular theme (Canvas Hook/Filter Reference)
  2. List of functions you can create using Filters & Actions

I hope this gives you some idea of what a hook is and how you can start learning more about how to use hooks in your WordPress theme.

Categories
Genesis Tutorials

Easy Way To Add Content Using Woo Themes Hook Manager

Woo themes offer a great feature called Hook Manager which allows you to add HTML, text or even short-codes to any location there’s a hook. Normally with most other themes you would need to write some code and add it to your themes functions.php file.

Not if you’re using a Woo Theme.

Lets take a closer look at the Hook Manager and see how it works:

Hook Manager for Woo Themes

You’ll see five tabs on the left hand side which are the different sections of your website. Each section offers a range of hooks where you can add content simply by pasting it into the correct box.

  1. Header Hooks
  2. Main Hooks
  3. Post Hooks
  4. Footer Hooks
  5. WordPress Hooks

Example: If you wanted to add a banner or line or two of text/html to the end of every post, you would click the Post tab on the left and look for the hook which works in the location you want to add the content.

Hook Manager - Post Hooks

When you arrive at the Post Hooks, you’ll see a range of different boxes which represent the different locations of hooks for that particular section.

Here’s the 4 locations of the hooks for the Post section:

woo_post_before – Executed before each post.

woo_post_inside_before – Executed at the top, inside each post’s DIV tag.

woo_post_inside_after – Executed at the bottom, inside each post’s DIV tag.

woo_post_after – Executed after each post.

Hook Manager - Post Hook Locations

I’m sure by now you understand what hooks are so all you need to do is add the text or code to the correct box and the content will display in that location on all posts.

Not many themes offer a hook manager like Woo Themes so if you’re not using this theme you’ll need to add the hook and function along with other code and text to your themes functions.php file

Here’s a complete map of all Woo Hooks and the locations they execute.

Woo Themes Hook Map

woo-theme-canvas-hooks

You can use this map along with the Hook Manager to add text, html, links or even ads to any location which offers a hook by simply pasting the code into the correct box inside the Hook Manager.

This is a great way to start learning about hooks if you plan on learning php code where hooks and filters play a large part in WordPress customization.

Another great feature of the Hook Manager is you can  execute WordPress shortcodes in they hook locations as well.

Using Woo Hooks In Custom Functions

If you want to add content to any of the hooks positions in a Woo theme, you can also use a custom function. The custom functions should be placed in your child themes functions.php file.

As you can see with the Hook Manager, it doesn’t enable you to use every hook that Woo offers so you may need to use a custom function instead.

Here’s a few examples of PHP code using some popular hooks which are included in all Woo themes.You can use or modify these code snippets in order to hook in content or filter a function using any of the Woo hooks available.

All Woo Hooks

You can use all of these hooks in custom functions in your child themes functions.php file or the custom PHP section of your themes functions file:

* - woo_head()
 * - woo_top()
 * - woo_header_before()
 * - woo_header_inside()
 * - woo_header_after()
 * - woo_nav_before()
 * - woo_nav_inside()
 * - woo_nav_after()
 * - woo_content_before()
 * - woo_cotnent_after()
 * - woo_main_before()
 * - woo_main_after()
 * - woo_post_before()
 * - woo_post_after()
 * - woo_post_inside_before()
 * - woo_post_inside_after()
 * - woo_loop_before()
 * - woo_loop_after()
 * - woo_tumblog_content_before()
 * - woo_tumblog_content_after()
 * - woo_sidebar_before()
 * - woo_sidebar_inside_before()
 * - woo_sidebar_inside_after()
 * - woo_sidebar_after()
 * - woo_footer_top()
 * - woo_footer_before()
 * - woo_footer_inside()
 * - woo_footer_after()
 * - woo_foot()

On top of this, Woo also offer a huge range of hooks for the Woo Commerce plugin.

Add Widget To Any Woo Theme

Here’s an example of using using a hook to create a widget:

/** Register Before Post Widget Area.*/
function wpsites_before_post_widget() {

	 register_sidebar( array(
		'name' => 'Before Post Widget',
		'id' => 'before-post',
		'before_widget' => '<div>',
		'after_widget' => '</div>',
	) );
}
add_action( 'widgets_init', 'wpsites_before_post_widget' );

/** Hook In Widget Before Post Content .*/
function before_post_widget() {

if ( is_single() && is_active_sidebar( 'before-post' ) ) { 
            dynamic_sidebar('before-post', array(
	    'before' => '<div class="before-post">',
            'after' => '</div>',
	) );

      
    }
        
}

add_action( 'woo_post_before', 'before_post_widget' );

The above code will create a new widget which displays your content before all single posts.

Please copy ALL the PHP code above and paste it in the custom functions section of your themes functions.php file or in the functions file of your child theme.

Other Themes Hook Options

Clearly Woo themes hook manager is lacking when compared to some of the most popular theme frameworks which also provide a feature like this.

The Genesis Simple Hooks plugin and Thesis hook management plugin are far superior as they enable you to execute PHP code in any hook position which isn’t possible with Woo’s hook manager.

Categories
Genesis Tutorials

Basics of WordPress Short Codes & How To Create & Use Them

Recently i switched one of my blogs to a new theme which includes built in shortcodes.

I’ll show you in more detail all the great functions you can insert into your posts and pages later on in this article by using this list of short codes.

  • Buttons
  • Info Boxes
  • Related Posts
  • Social Media Buttons
  • Qoutes
  • Icon Links
  • Custom Links
  • Typography
  • Tab Layouts
  • Content Toggle

What Are Short codes?

Short codes are short bits of code which you add to your HTML editor.

They are used for adding custom functions to the content of your posts and pages without the need for writing a script everytime you need to do this.

Short codes are like html tags but use square brackets rather than angled brackets.

Below is an example of what a shortcode looks like when you insert it into your editor.

[shortcode]

This theme already includes a great list of built in shortcodes (Example above) which you can learn more about later on in this tutorial.

Shortcodes can be created and added manually, by installing a plugin or using a theme which already includes these features.

Benefits of Using Short Codes

Shortcodes save heaps of time because you don’t need to write a script of php code every time you want to create a function in your posts.

Inserting the shortcode in a post references the code you have added in your functions.php file and creates the function.

Once you have added the php script to your file then you simply add a shortcode into the HTML editor of your post/page and the function is added.

But what if you’re using another theme or don’t want to buy a plugin for adding short codes?

You can add the code manually to your functions.php file and insert the small short code tag when needed.

Plugin and Theme Shortcodes

Some WordPress themes and shortcode plugins will automatically display an icon in your editor’s toolbar so you simply click the icon and choose the shortcode for simple insertion into your posts and pages.

No need to create the functions or type the tag in manually.

How To Create a Shortcode

Caution: Always take backup of your files before editing .php files.

Creating a shortcode is different depending on which theme you are using.

In this tutorial i’ll explain how to create short codes for use in every theme which has a functions.php file.

Some themes like Thesis & Genesis use a custom_functions.php file editor however you can still use this code by adding it into the functions.php which every WordPress installation contains.

Creating shortcodes manually requires 2 steps:

  1. Create the primary PHP function)
  2. Create the add_shortcode which connects the primary PHP function to WordPress (Create the shortcode for the PHP function and insert it into your HTML editor)

Once you insert the [shortcode] into your editor, WordPress will connect to your themes functions.php file and dynamically replace it with the function you created.

If you have created many different functions then all you need to do is insert the unique shortcode associated with that function everytime you want to use it in your editor. No need to create the function again in your functions.php file.

Step 1 – Open your Theme Functions (functions.php) at this location: /wp-content/themes/yourtheme/functions.php

function ThankYouShortcode() {
	return '<p>Thank You For Reading My Blog Post!</p>';
}
add_shortcode('thankyou', 'ThankYouShortcode');

Step 2 – Next step is to place the shortcode tag into the WordPress editor [thankyou]

The result will look like this is the page you have added the shortcode to

Thank You For Reading My Blog Post!

That’s it!

You have now created your first shortcode manually.

WordPress shortcodes and what some of them look like using this theme.

If you like the features these shortcodes create but don’t want to write the code then i suggest you take a look at this styles with shortcodes plugin or Demo a Woo Theme for 14 days free.

Note: Not all shortcodes will look the same depending on which theme or plugin you are using.

Categories
Genesis Tutorials

How To Highlight Content In a Feature Box For WordPress Posts Using CSS Code

Searching for the best way to highlight part of your posts content in a feature box? There’s an easy way to display a line or paragraph of text in a colored box using HTML Code tags for Alert & Note Boxes.

But they won’t work for multiple paragraphs with line breaks or content which includes an email form or javascript.

I’ve already shown you how to Add a Feature Box to Thesis using PHP code but the placement options are limited so lets take a look at another method using CSS that’s more flexible and doesn’t require any PHP editing.

Solution – In this simple CSS tutorial i’ll show you how to manually create a feature box for any location in your posts or pages.

There’s 2 ways to add CSS code to your site.

  1. Inline – Unique to one page/post
  2. External – Site wide (Globally)

External CSS File – Using Thesis Custom CSS File Editor

Adding CSS code to the Custom CSS file editor in Thesis or your Style.css file if you’re not using the Thesis theme, is the best way because once added, you can simply add the tags to other posts/pages and achieve the same result.

Inline CSS

If you add the CSS inline, within a single post, then you need to add the full code every time you want to create a feature box to highlight sections of your content in future posts.

Thesis Inline CSS Class Field

Thesis Inline CSS Class Field
The class name highlight_box_yellow should be entered in the field if you want to add inline CSS rather than site wide CSS code to your editor. This field is located under the meta boxes when using the edit post screen. The code will be different as you’ll need to add it in the HTML editor.

Custom CSS File Backup

The advantage of using the Thesis custom.css editor is that you don’t need to backup this custom file every time you upgrade WordPress. If you upgrade Thesis then you can simply backup the file using the Thesis > Manage Options > Download Options > Design Options. Otherwise your custom code will be overwritten and lost when you update.

Alert: Always create a backup of the file you are editing before you start making changes to it. If you make a mistake simply delete the file and upload the backup to start again.

Feature Box CSS Code

/* FEATURE BOX - YELLOW */
.format_text .highlight_box_yellow {
	padding: 0 1em 0 1em;
	margin: 0 0 0 0;
	background: #FEFD80;
	border: 1px solid #B28F00;
}

Paste this code at the end of your Custom CSS file editor or style.css file

You can edit the colors to match your own styling & Decoration choice as well as change the margins, spacing and border dimensions.

In Post CSS Tags

To get the CSS code to work in your post or page simply add the opening (start) class tag and the closing (end) Div tag to the content you want in the feature box.

<div class="highlight _box_yellow">Your content Here</div>

Next time you want to use the feature box to highlight content, you simply wrap your content in these blue tags so there’s no need to add the code again to your CSS file editor.

Colored Box Plugins

The WordPress plugins directory also offers plugins that will do this trick for you if you’re a non coding type or short on time. There’s also a premium plugin which uses tags to create colored boxes amongst many other styling features for non coders

Finished Feature Box Highlighted in Post

You could use a hook after content with some php as an alternative method or the add after post code from the Thesis users guide.

Update: The easiest way to do this would be to use the Thesis Hook plugin or the Woo frameworks Hook Manager.

I’m also using mailchimp with Wooforms however you could use the mailchimp form code or aweber form code on its own. Better still, the outstanding gravity forms plugin which integrates perfectly with mailchimp and aweber is another excellent option.

Categories
Genesis Tutorials

List of Popular WordPress HTML Tags


HTML tags are useful when you have a problem with your editor and need to fix it quickly. Other reasons you may add HTML tags manually to your HTML editor is for navigation (anchor/scroll points) and decoration purposes like when using an alert or note box.

Four of the most commonly used  HTML Document tags in WordPress are:

  1. Paragraph Tag
  2. Horizontal Line Tag
  3. Mailto Tag
  4. Non Breaking Space Tag

Paragraph Tag

<p> This tag is the most commonly used HTML tag: The <p> requires a </p> tag at the end of the paragraph and is used at the beginning <p> and end of a paragraph in the HTML editor</p>.

You can add the paragraph tags to the start and end of your paragraphs manually using the HTML editor if needed.


 Horizontal Line Tag

<hr> This tag is used to display a line across your page. You can choose the thickness of the line as well as how far you want it to extend. Above i have chosen 100% and the full HTML code i have inserted into the HTML editor is <hr size=4 width=100%>

You can use this code and simply change the size=4 to any size you choose as well as the width=100% to another percentage


 Mailto Tag

The “Mailto” Tag is used to link to an email address.

<A HREF=”mailto: brad@wpsites.net“>Brad Dalton</A>

Brad Dalton

Simply change the email address and name you want linked in orange to your own and place the full line of code in your HTML editor


 Non Breaking Space Tag

&nbsp; This tag is called a non-breaking space tag. Browsers remove spacers in text and only leave one space. If you want more than one space you’ll need to add this tag.

You can also insert this tag to create a space between paragraphs and lines of text


More HTML Resources

  1. What is HTML- WordPress HTML Code Tutorial in Plain English
  2. 3 Ways Fancy HTML Can Add Style To Your WordPress Blog Posts
  3. How To Create Anchor Points
  4. How To Add HTML 5 Code Support to The Thesis Theme for WordPress

Return to Top of Page

Categories
Genesis Tutorials

What is Php Code?

WordPress PHPWordPress uses php code to display web pages dynamically and enable different functions to work on your blog. PHP stands for  Hypertext Preprocessor.

Php code is a bit like html with php tags making it possible for your web pages to function in different ways.

If you understand the basics of html tags then you’ll be able to learn the basics of php coding even though its a different language.

Php is abit like html in a way with special opening (start) and closing (end) tags. Your php files on your server will end in a .php extension therefore your server will treat them as php rather than html or css as your server comes installed with a php module that processes .php file extensions.

When you host a file with the .php extension on your server, the php processor installed on your Linux server will parse the file which results in an output depending on the function the php code has been written to do.

Example:

<html>
 <head>
  <title>PHP Test</title>
 </head>
 <body>
 <?php echo '<p>wordpress php</p>'; ?>
 </body>
</html>

The special opening and closing php tags are <? and ?>

Unlike CSS & HTML, PHP needs to be hosted externally in a .php file on a server which should  be Linux rather than a Windows server which hosts ASP.net (Microsoft’s competitor to PHP-Open Source) to work so you cannot write or paste php code inline (in your Visual or HTML editor).

The latest version of WordPress now uses the latest version of PHP 5 so your web host will also need to provide support for this.

Caution: If you make a mistake in your code while modifying a PHP file, saving the file may result in your site becoming temporarily unusable. Prior to editing such files, be sure to have access to the file via FTP or other File Manager so that you can fix the error. Best practice dictates its always best to complete a full backup of your files before editing PHP code.

Here’s a list of ALL php function categories and one example of each

  • Array functions – array()
  • Calendar functions – JDDayOfWeek() Returns the day of a week
  • Date functions – date_default_timezone_set() Sets the default time zone (The behavior of the date/time functions is affected by settings in php.ini.)
  • Directory functions – chdir() Changes the current directory
  • Error functions – error_get_last() Gets the last error occurred
  • Filesystem functions – filesize() Returns the file size (The behavior of the filesystem functions is affected by settings in php.ini.)
  • Filter functions – FILTER_VALIDATE_EMAIL Validate value as e-mail
  • FTP functions – ftp_connect() Opens an FTP connection
  • HTTP functions – setcookie() Sends an HTTP cookie to a client
  • LibXML functions – libxml_get_last_error() Retrieve last error from libxml
  • Mail functions – mail()Allows you to send emails directly from a script (For the mail functions to be available, PHP requires an installed and working email system. The program to be used is defined by the configuration settings in the php.ini file.)
  • Math functions – max() Returns the number with the highest value of two specified numbers
  • Misc functions – connection_aborted() Checks whether the client has disconnected (The behavior of the misc functions is affected by settings in the php.ini file.)
  • MySQL functions – mysql_get_host_info() Returns MySQL host info (The behavior of the MySQL functions is affected by settings in the php.ini file.)
  • SimpleXML functions – simplexml_load_file() Gets a SimpleXMLElement object from an XML document
  • String functions – ucfirst() Converts the first character of a string to uppercase
  • XML Parser functions – xml_parse() Parses an XML document
  • Zip functions – zip_open()Opens a ZIP file (Installation on Linux Systems: PHP 5+: Zip functions and the Zip library is not enabled by default and must be downloaded from the links above.)

You can learn more about how to write php for free at W3 Schools. Or you can use custom made php code for free if you own a premium theme.

One of the benefits of owning a premium WordPress theme like Thesis is the custom file editor which makes it easy to add php code too and make custom changes to your blog.

Thesis also offer a great list of free php code already written so its a simple copy and paste job into your Thesis php editor and your done.

Coding doesn’t get any easier or hassle free than this. Also, if you ever get stuck or need technical support, Thesis are the only Theme creator who actually pay full time experts to provide round the clock support to Thesis owners. Check out Thesis here.

More PHP Code Resources

  1. WordPress Memory-How To Increase PHP Allowed Memory Limits
  2. Php Scripts – A List Of The Best Php Scripts as an Alternative To Plugins
  3. How To Add HTML 5 Code Support to The Thesis Theme for WordPress
  4. How To Create Previous & Next Page Links
  5. How To Add a Second WordPress Navigation Menu In Thesis Using Custom PHP Script

Categories
Genesis Tutorials

What is CSS Code?

CSS stands for custom style sheets. CSS code or markup as some people call it enables you to style different elements of the HTML in your website once rendered by a browser.

CSS is generally included in your themes style.css file rather than inline (on each specific page). Including CSS in an external file named a style.css file enables you to change the styling (Appearance) of your entire website ‘site wide’, simply by editing the code in your style sheet.

You can also add CSS inline on a per page/posts basis however it is best practice to use external files or a Custom CSS file editor which is included in WordPress.

Better still, custom CSS should be added to a separate child theme so your custom coding won’t be overwritten when you update you parent theme.

CSS can be used to style different elements of your HTML.

If you understand the basics of HTML then you’ll be able to learn CSS fairly easily.

CSS contains at least 2 parts:

  1. A Selector
  2. At least 1 Declaration

What Is CSSNormally the selector is the HTML element you wish to style. In this case its the title as indicated by #title selector with blue text and using the Oswald font family.

There are 2 types of selectors

I.D – An I.D selector starts with a hash like #footer
Class – A class selector starts with a dot like .footer

Some themes run XHTML markup which uses I.D selectors and some of the newer themes run HTML 5 which uses class selectors.

Each declaration contains a Property & Value. Example: Color is the Property and Blue is the Value.

A Declaration must always end in a semicolon and the group of Declarations must be enclosed in Curly brackets like this:

Example of Class Selector

.site-title {
    font-family: Georgia;
    font-size:45px;
    color: #000
}

In this case, .site-title is the class selector so this CSS relates to styling the website title.

There are 3 declarations which tell the browser to display the title text using the font Georgia which is 45px in size and the color is black (using hex code #000)

CSS Box Model

Margin – Clears an area around the border. The margin does not have a background color, it is completely transparent
Border – A border that goes around the padding and content. The border is affected by the background color of the box
Padding – Clears an area around the content. The padding is affected by the background color of the box
Content – The content of the box, where text and images appear

CSS Box Model

Example:

.site-header {
    width:220px;
    padding:10px;
    border:5px solid gray;
    margin:0px;
}

Changing Your Websites Styling

One of the best ways to change the appearance of your website is is to use a web development tool named Firebug.

Firebug is one of the most popular tool web designers use to customize a website.

One of the easiest ways to change the look and feel of a website is to use Firebug to copy the existing CSS code into a child theme. From there you can customize the different HTML elements by changing the property values of each selector.

Learning CSS

One of the best places to learn the basics of CSS and other code languages is W 3 Schools.

Categories
Genesis Tutorials

How To Increase Your WordPress Media Upload Size

Need to increase your max file upload size in WordPress? Making changes to the limits in your php.ini file can increase limits for max file size upload and post max file size.

If you have large video files, this is one way to make sure you can upload them to your WordPress Media Library rather than directly to your server.

To perform any of these actions, you’ll need to add a php.ini file and edit this file if you don’t already have one installed.

Upload-File-Size-10mg

Once you install and increase the upload limits in your php.ini file you’ll also need to increase the post max file size which needs to be greater than the limit of your file upload size.

Upload-Max-File-Size

Here’s a menu of the different sections of this post:

  1. How To Install a php.ini file – Copy PHP.INI Master File
  2. How To Increase Upload Limit
  3. How To Increase Post Max file Size
Caution: If you make a mistake in your code while modifying a PHP file, saving the php file may result in your site becoming temporarily unusable. Prior to editing php files, be sure to have access to the file via FTP or File Manager so that you can correct the error and always take full backup of your WordPress files and databases before editing.

How To Install a php.ini file

  1. Login to cPanel and scroll down to the Software/Services section
  2. Click on the PHP.Config icon
  3. Scroll down to the Install Default php.ini section and check mark the “IonCube” and the “SourceGuardian” boxes.
  4. Click the “INSTALL PHP.INI MASTER FILE” button.
  5. Rename the “php.ini.default” file to  ”php.ini” and your done.
  6. There’s more info including screenshots on how to INSTALL PHP.INI MASTER FILE

How To Increase Upload Limit

  1. Open your php.ini file using File Manager in cPanel. You can also use FTP and a text editor like Notepad ++
  2. Navigate to Line 573 (May be a different line number depending on your web hosts setup)
  3. Edit the limit to any size up to a max of 100M and save the changes. (You will also need to increase the post max file size)

Increase-File-Uploads- Size

How To Increase Post Max file Size

  1. Open your php.ini file using File Manager in cPanel.
  2. Navigate to Line 468
  3. Edit the limit to a max of 100M and save the changes

Increase-Post-Max-File-Size Increasing your upload limits in WordPress will enable you to upload large files to your media library including videos. If you are NOT familiar with editing php files then i suggest you contact your web host who should complete this for you.

Categories
Genesis Tutorials

WordPress HTML Code Tutorial in Plain English

HTMLIf you’ve already started blogging then i assume you’ve written a blog post and already discovered your HTML editor next to the Visual editor tab. Here’s what i’m talking about. This is the Visual View you get when you write or edit a blog post in WordPress.

Note: I have bolded the HTML and Visual text words as an example.

WordPress Visual Editor

Here’s a look at the HTML editor view

WordPress HTML Editor

In order for the WordPress editor to bold text (markup text), it needs to add tags. In this case, the (HTML) tags are:

<strong>  Opening tag or start tag

and

</strong> Closing tag or end tag

HTML (Hyper Text Markup Language) is used for a range of different presentational markup including typeface, style, and size as well as markup for text such as headings, paragraphs, lists, links, quotes and other items.

Your editor offers a range of HTML tags which are added automatically when you use the Visual editor and included in the HTML view.

You can also add other HTML tags not included in the WordPress Visual editor to markup the presentation of your text. Here’s a few fancy html tags which add styling to your content which you can use to see what i mean. Simply add any of this code to your HTML editor and save or Update your page to see the results.

Another type of markup language used in WordPress is XML which is used in your RSS feed.

The purpose of a web browser is to read your HTML code and show the HTML embedded in your blog post or website page in a visual form. Your browser reads the HTML code of your posts and pages which contain the html tags and displays the visual result.

WordPress users the WYSIWYG (What you see is what you get) so you don’t need knowledge of HTML as the editor converts your typed text into HTML automatically.

WordPress has recently upgraded to the new HTML 5 markup so if you’re a Thesis user, you may want to add support for HTML 5 to your Custom File Editor.

If you made it this far i hope you learn’t something and try out some of the explicitly presentational HTML tags like the Note box in white below.

World Wide Web Consortium (W3C)
Note: The World Wide Web Consortium (W3C) encourages the use of CSS rather than ‘explicitly presentational HTML markup’.                                           Hope you didn’t fall asleep!

More HTML Resources

        1. 3 Ways Fancy HTML Can Add Style To Your WordPress Blog Posts
        2. How To Create Anchor Points
        3. How To Add HTML 5 Code Support to The Thesis Theme for WordPress
        4. Google’s New Microdata Format for HTML 5 Tags Speaks Googles Language-Schema
Categories
Genesis Tutorials

The Best Live Chat For WordPress Works With GTalk

Ever considered installing live chat software on your Website or Blog? Why would you need to?

If you’re running an eCommerce store then you wouldn’t want someone walking into your store and not having a customer support staff to offer service.

Using live chat for WordPress helps turn your site visitors into customers.

I’ve tried using live chat before which require a fair bit of technical knowledge to get working correctly. Not only is work needed on the server side but the software needed to run live chat on a WordPress site will also slow down your site.

However, i have found a very good solution.

Snap Engage integrates with Google GTalk so you don’t need to install software on your server. It also lets your site visitors send an email and include  a screen shot in the email.

If you use Zendesk, Saleforce or Facebook, it integrates perfectly with these as well as a list of others to enable a customer service system that’s world class and attractive.

Install Snap Engage in Thesis

Installing Live Chat for WordPress

Installing the Snap Engage live chat Java script is simple as all you need to do is copy and paste the code into your site and you’re done.

If your using a premium theme framework, then its a walk in the park.

Copy and paste the code into the Javascript box located on your design options or theme settings page and that’s it.

Genesis Installation Instructions

Simply paste the script into the Genesis > Theme Settings > Footer Scripts custom field.

genesis footer scripts

If your not using a theme which offers a custom field for scripts then you’ll need to follow these instructions for WordPress users.

Manual Installation Guide

To install SnapEngage live chat in a default theme:

1. Go to Appearance > Theme Editor.

2. Edit the footer.php template file in your WordPress Theme.

3. Scroll to the bottom of the file and paste the SnapEngage JavaScript code from the SnapEngage ConfiguratorGet The Code section before the closing </body> HTML tag.

4. Save the file.

If the closing BODY tag is not in the footer.php files, it could be in the index.php template file. Edit it there.

Snap Engage Plugin for WordPress

Another way to install snap engage without touching any code is to install the SnapEngage plugin for WordPress.

Online Customer Support

Adding a customer support system to your site increases engagement and ultimately sales. Lets face it, its not just about having a great  product, customer service is also a huge part of the package and in many cases the most successful businesses provide the best customer support.

Snap Engage offer both a free service and several premium plans to choose from.

Click here to take Snap Engage for a test drive.

Categories
Genesis Tutorials

How To Add a New Footer Menu To The Thesis Theme for WordPress

Adding another menu to your footer is a great way to increase page views and help your site visitors navigate to more content on your site. You can also add a footer including 3-4 widgets which adds even more navigation options for your site visitors as opens up older posts.

Note: If you make a mistake in your code while modifying a PHP file, saving your custom_functions.php page may  result in your site becoming temporarily unusable. Prior to editing such files, be sure to have access to the file via FTP or file manager which is located inside cPanel so that you can correct the error if needed.

First step is to Login to Thesis and add a block of PHP code to your Custom File Editor. Navigate to your custom_functions.php file and copy and paste this code then click save. Code:DIY Themes

[php]register_nav_menu(‘footer’,’Footer Menu’);

function custom_footer_menu() {
wp_nav_menu(array(
‘container’ => ”,
‘menu_id’ => ‘footer_nav’,
‘fallback_cb’ => ‘thesis_nav_menu’,
‘theme_location’ => ‘footer’,
));
}
add_action(‘thesis_hook_footer’,’custom_footer_menu’);[/php]

Add Custom PHP Menu Code To Your Custom Functions

Thesis-Custom-File-Editor-Add-WordPress-Footer-Menu
If you simply need to copy an existing menu then paste this code into your custom_functions.php instead.

[php]add_action(‘thesis_hook_footer’, ‘thesis_nav_menu’);[/php]

Next step is to create a new menu using the WordPress menu system

Navigate to Appearance > Menus and click + to add a new menu. You can name the menu anything you like. I have named mine Footer Menu

Footer Menu

Make sure you select the name of your Footer Menu (in red) and click save. You can then easily build your custom menu (in green)by adding existing pages, posts or custom links to anywhere on your site or an external site if you wish.

You can also change the order of your menu tabs by click, drag and drop to another location in your menu order. The WordPress menu system is a faultless system that’s easy to create, add and change easily anytime you wish.

Change WordPress Menu

Moving your menu tabs to the right will create a drop down where you can add more pages, posts and custom links to your menu’s rather than just the top level menu tabs. To clarify what i mean by this, go to my footer menu and click on any of the menu tabs to see the drop down menu created when using the above method.

Categories
Genesis Tutorials

How To Add HTML 5 Code Support to The Thesis Theme for WordPress

Thesis HTML5

HTML 5 is all the rage at the moment and The Thesis theme for WordPress supports html 5 code which you may want to try out on your thesis powered WordPress site.

Login to your WordPress Dashboard and Go to Thesis >> Custom File Editor>> custom_functions.php

Simply add this code to your custom functions php file editor and save.

Caution: Always create full backup of your site before editing php code.

Note: If you make a mistake in your code while modifying a PHP file, saving this code in your custom_php.file  may result in your site becoming temporarily unusable. Prior to editing such files, be sure to have access to the file via FTP or other means so that you can correct the error.

Paste the following code into your custom_functions.php file

[php]

function html5_doctype($content) {
return ‘<!DOCTYPE html>’;
}
add_filter(‘thesis_doctype’, ‘html5_doctype’);

/* Remove PROFILE attribute from HEAD tag */
function html5_profile_removal($content) {
return ”;
}
add_filter(‘thesis_head_profile’, ‘html5_profile_removal’);
[/php]

More Custom Php Coding Resources

    1. How To Create Previous & Next Page Links
    2. How To Add a Second WordPress Navigation Menu In Thesis Using Custom PHP Script
    3. Review of the Thesis Theme for WordPress
    4. Php Scripts – A List Of The Best Php Scripts as an Alternative To Plugins