EasyWebTutorials » Blogging http://www.easywebtutorials.com/blog www news, internet and computer tutorials. Fri, 12 Mar 2010 13:11:59 +0000 http://wordpress.org/?v=2.3.3 en Web2.0 WordPress - PRO Tutorials http://www.easywebtutorials.com/blog/2008/08/11/pro-license-tutorials/ http://www.easywebtutorials.com/blog/2008/08/11/pro-license-tutorials/#comments Mon, 11 Aug 2008 10:21:17 +0000 guido http://www.easywebtutorials.com/blog/2008/08/11/pro-license-tutorials/

in this category, you´ll find a growing archive of exclusive theme customization tutorials and SEO / site promotion tips for owners of a PRO license to my WordPress themes.

Some basic customizations and normal updates for the free version of my themes are covered in the category Web 2.0 WordPress themes.

If you don´t have a password and want to read the posts in this category, purchase your PRO license now and receive lifetime access to all the exclusive tutorials and additional bonus tutorials.

]]>
http://www.easywebtutorials.com/blog/2008/08/11/pro-license-tutorials/feed/
Web2.0 - Free WordPress Themes - Customization Tutorials and Updates http://www.easywebtutorials.com/blog/2008/08/11/web20-wordpress-themes/ http://www.easywebtutorials.com/blog/2008/08/11/web20-wordpress-themes/#comments Mon, 11 Aug 2008 10:19:32 +0000 guido http://www.easywebtutorials.com/blog/2008/08/11/web20-wordpress-themes/

This category is reserved for theme update announcements and some basic tutorials about theme modifications for all users of the free themes.

I´ll add tutorials during the coming days / weeks, these will be about things like changing layout / sidebar widths, adding links to header navigation, replacing the standard header with a custom header graphic, etc …

Tools

You can modify your theme files either online - using the WordPress theme editor - or offline - using an ASCII text editor like NotePad or TextPad (my preferred one).

Template Files

Each Theme consists of the following components / template files:

Stylesheet - style.css
Stylesheet(simple borders) - style-simple.css
Header - header.php
Footer - footer.php
Sidebar - sidebar.php
Main Index Template - index.php
Custom 404 error page - 404.php
Category Index - category.php
Archive Index - archive.php
Tags Index - tag.php
Author Index - author.php
Search Results - search.php
Posts - single.php
Pages - page.php
Comments - comments.php
Comments Popup - comments-popup.php

Some Widgets - functions.php
Special Theme Functions - theme_functions.php

]]>
http://www.easywebtutorials.com/blog/2008/08/11/web20-wordpress-themes/feed/
Book Review: WordPress for Business Bloggers http://www.easywebtutorials.com/blog/2008/12/22/wordpress-business-bloggers/ http://www.easywebtutorials.com/blog/2008/12/22/wordpress-business-bloggers/#comments Mon, 22 Dec 2008 14:29:11 +0000 guido http://www.easywebtutorials.com/blog/2008/12/22/wordpress-business-bloggers/ A few months ago, I received a book from Packt Publishing:

WordPress for Business Bloggers - by Paul Thewlis

It took me quite long to read since I had a lot of other things to do, but now I´m finally ready to write a review about it.

The title and especially the sub-title (”promote and grow your WordPress blog with advanced plugins, analytics, advertising, and SEO”) of the book implies that it´s an advanced guide for WP bloggers, but in the preface of the book, we can find two paragraphs that describe for whom the book is for:

This book is for anybody running or starting a business blog using WordPress. Whether you plan to use your blog for PR and marketing, or want to profit directly from blogging, this book offers you everything you need.

As we want to get into the specifics of business blogging as quickly as possible, we don´t cover the WordPress basics. So it´s best to have some experience with WordPress before you start with this book.

Even if you are very new to WordPress or just thinking about starting a blog, I also recommend this book to you, because the first chapter of the book is a great and brief introduction to the different types of blogs that exist and it helps you to find out what you want to achieve with your blog.

To continue with the book, you will then need to have some basic working experience with WordPress. In other words, you should have already installed WordPress on your site and feel at least a bit comfortable with the admin area of your WP blog.

The writing style is very easy for everybody to understand. A well-balanced combination of text and screenshots - taken from the WordPress admin area and other websites - is used throughout the book to guide you step-by-step
through all the processes.

I found all the WordPress plugins presented in the book are very useful and their use is well explained.

The book features a case-study blog to which most of the lessons and examples are applied. In addition, you can download and use the exact same WordPress theme used in the case-study blog for your own blog in order to get used to manipulating a theme, following the exact same steps like shown in the book.

Here´s a quick overview of the chapters:

Chapter 1: Showcasing a few different types of blog, helps you to find out what you want to achieve with your blog

Chapter 2: Introducing the case-study blog. business goals, planning, implementation.

Chapter 3: Blog Design, teaching some basics about designing your own theme.
Note: If you don´t already know the basics of CSS and HTML, you shouldn´t spend too much time with this and quickly skim over this chapter. Start your blog first and if you have time later, it´s always good to learn the basics of HTML and CSS and then start playing around with WordPress theme design and modification. And if you really want to dig into the subject of WP theme design, you can check out the WordPress Theme Design book, another title from Packt Puplishing.

One part I really liked much in this chapter, because I hadn´t done it before, is the part about setting up a local development environment on your computer. A local development area allows you to install, run and manipulate a WordPress blog on your computer without being connected to the internet. This is very useful when you play around with your blog´s theme design or when you want to test a new plugin or any other code - even WordPress upgrades - for compatibility before you install it on your real blog. Believe me, this can save you a lot of trouble.

Chapter 4: Images and Videos: installing and manipulating images with “The GIMP”, images in WP posts, how to create thumbnails, how to get videos on your blog.

Chapter 5: creating content, how to write articles for your blog, some basics and good posting tips, managing the content of your blog with categories and tags, creating static pages and also important: easy instruction for creating backups of your blog and its database and how to restore your database from a backup file.

Chapter 6: introduction to search engine optimization, featuring some good plugins and tools. Tips to optimize your blog pages for better search engine rankings. This chapter only covers the basics of SEO, but if you get these right, your blog should do very well.

Chapter 7: all most important basics about feeds, feedburner, blog indexes, social networks and social bookmarking.

Chapter 8: connecting with the blogosphere, the importance of comments and how to prevent your blog from spam.

Chapter 9: statistics - web traffic, visitors, rss subscribers, seo results and how to implement “Google Analytics” on your blog.

Chapter 10: monetizing your blog. a presentation of different ways to earn revenue from your blog, easy guides to use Google AdSense and the Amazon Associates network, great tips for selling banner ads.

Chapter 11: managing growth. This is a very important chapter once your blog grows in popularity. You will learn how to manage higher loads of website traffic and if necessary, how to move your blog to a new server.

The last part in chapter 11 shows that this book is really meant for business bloggers. You will learn how to use a multi-user version of WordPress (WordPress MU) to run a network of blogs, for example for all your colleagues or for all the co-workers in your company.

WordPress for Business Bloggers is available as physical book and e-book, just like all the other book titles at Packt Publishing. If you are completely new to WordPress, you may also want to consider the book WordPress Complete (by Hasin Hayder, also for sale at the Packt Publishing website), which is a great companion to this book and covers everything about installing and using WordPress.

]]>
http://www.easywebtutorials.com/blog/2008/12/22/wordpress-business-bloggers/feed/
examples for custom widgets: FeedBurner, AdSense and more. http://www.easywebtutorials.com/blog/2008/11/22/widget-examples/ http://www.easywebtutorials.com/blog/2008/11/22/widget-examples/#comments Sat, 22 Nov 2008 19:48:21 +0000 guido http://www.easywebtutorials.com/blog/2008/11/22/widget-examples/ In this post you´ll find a few examples (with HTML source code) for certain custom widgets like a FeedBurner e-mail subscription box, AdSense ads, a featured product or Youtube video, etc …

With these examples and the instructions given in the article about customizing sidebars, you should be able to add any sort of custom content to the sidebar of your Web 2.0 SEO WordPress Theme.

1. FeedBurner e-mail subscriptions
2. Google AdSense
3. Image ads (buttons and banners)
4. Featured YouTube video


1. FeedBurner e-mail subscription box

Step 1: Load the sidebar template (sidebar.php) into the editor and add a new widget to your theme´s sidebar. Simply use the HTML code below:

<li><h4>Email Subscriptions</h4>
<ul>
<li>

FEEDBURNER CODE

</li>
</ul>
</li>

Step 2: Log into your FeedBurner account, go to “MyFeeds” and select the feed for which you want to create an e-mail subscription box. Click on the “Publicize” tab and under “Services” on the link “Email Subscriptions“. Copy the HTML code for the subscription form and return to your theme editor and replace “FEEDBURNER CODE” with the HTML code that you just copied from FeedBurner. Your sidebar widget should now look something like this:

<li><h4>Email Subscriptions</h4>
<ul>
<li>

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://www.feedburner.com/fb/a/emailverify" method="post" target="popupwindow" onsubmit="window.open('http://www.feedburner.com/fb/a/emailverifySubmit?feedId=1234567', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><
input type="hidden" value="http://feeds.feedburner.com/~e?ffid=1234567" name="url"/>
<input type="hidden" value="FEEDTITLE" name="title"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value="Subscribe" />
<p>Delivered by <a href="http://www.feedburner.com" target="_blank">FeedBurner</a></p></form>

</li>
</ul>
</li>

If you are comfortable with HTML and CSS, you may want to modify the appearance of the FeedBurner form and also the copy above the form. And if you like, you can also add the “FeedCount” chicklet below the form. You´ll find the code for the “FeedCount” under “Publicize> Services > FeedCount” in your FB account.


2. Google AdSense advertisements

There are different dimensions of AdSense ad-blocks that fit well into your theme´s sidebar. You may want to display the ads inside a box with borders or without the borders. Below you find the code for both options.

Step 1: Load the sidebar template (sidebar.php) into the editor and choose a place between existing widgets for your Google AdSense block. Copy either of the codes below and paste it into your sidebar template.

A: Inside a widget box (i.e. with borders)

<li><h4>Sponsor Ads</h4>
<ul>
<li>

ADSENSE CODE

</li>
</ul>
</li>

B: Without borders

<li style="background: none"><h4 style="background: none">Sponsor Ads</h4>
<ul style="background: none">
<li>

ADSENSE CODE

</li>
</ul>
</li>

Step 2: Replace “ADSENSE CODE” with the Google AdSense javascript code for your chosen ad block.


3. Images (ad banners, e-book covers, …)

To insert images into your sidebar, you can create a custom widget with or without borders like shown above for Google AdSense ads and instead of the AdSense code, you simply insert the HTML source code of your images. Just make sure you know the dimensions of your images so that they fit into the sidebar.

Example: vertical banner ad, widget without borders, no heading

<li style="background: none">
<ul style="background: none">
<li>

<img src="IMAGE_URL" width="160" height="600" alt="cool gadgets" />

</li>
</ul>
</li>


4. Featured YouTube video

To embed a video into your blog´s sidebar, the sidebar should have a reasonable width, I´d say at least 200 pixels. YouTube videos have a default width of 425 pixels and a height of 344 pixels, but you can resize them to make them fit into your sidebar. You just need to make sure that the width/height relation stays the same. Here´s how to calculate it:

Assuming your sidebar is 210 pixels wide and you want to reduce the video to 200 pixels width (I´d leave 5px space on each side), you can calculate the new height as follows:
344 / 425 x "new width" = "new height"
344 / 425 x 200 = 162

Now that we know width and height for the video, let´s put it into the sidebar.

Step 1: Load the sidebar template (sidebar.php) into the editor and choose a place for the video between or above existing widgets. In this case, it´s better not to use borders around the widget, so let´s use this code for the widget:

<li style="background: none"><h4 style="background: none">Featured Video</h4>
<ul style="background: none">
<li>

YOUTUBE CODE

</li>
</ul>
</li>

Of course, you can change the “Featured Video” heading or remove it completely if you prefer.

Step 2: Go to YouTube.com and copy the HTML code from the “embed” field beside the video. Then go back to the theme editor and replace “YOUTUBE CODE” with the video embed code.

<li style="background: none"><h4 style="background: none">Featured Video</h4>
<ul style="background: none">
<li>

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/CdUjFYd8J78&hl=de&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/CdUjFYd8J78&hl=de&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

</li>
</ul>
</li>

Step 3: Update width and height properties for the “object” and the “embed” elements to resize the video. In our example, we would change width=”425″ to width=”200″ and height=”344″ to height=”162″

]]>
http://www.easywebtutorials.com/blog/2008/11/22/widget-examples/feed/
sidebar customization: editing, adding and removing widgets http://www.easywebtutorials.com/blog/2008/11/22/customize-sidebars/ http://www.easywebtutorials.com/blog/2008/11/22/customize-sidebars/#comments Sat, 22 Nov 2008 13:42:54 +0000 guido http://www.easywebtutorials.com/blog/2008/11/22/customize-sidebars/ Although the sidebars in my themes are enabled for the use of WordPress widgets, some of you may want to manually edit the sidebar(s), which is pretty easy. Depending on the layout, your theme has either a left sidebar, a right sidebar or both sidebars. All the HTML code for the sidebar(s) is located in the sidebar template (sidebar.php) of your theme.

I have included HTML comments and space between single widgets in the source code so you can easily see where the left or right sidebar starts and ends and where the single widgets start and end.

The basic HTML markup of a sidebar column

In the example code below you can see that each sidebar is a HTML DIV and the single widgets are list items of an unordered list, with H4 headings as widget titles and nested unordered lists for the widget content.

<!- - Start Left Sidebar - ->
<div id="leftmenu">
<div class="nav">
<ul>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>


<!- - Widget Name - ->
<li><h4>Widget Title</h4>
<ul>
<li>
Widget Content Goes Here
</li>
</ul>
</li>


<!- - Latest Posts - ->
<li id="mostrecent"><h4>Latest Posts</h4>
<ul><?php wp_get_archives('type=postbypost&limit=15'); ?></ul>
</li>


<!- - Monthly Archives - ->
<li id="archives"><h4>Archives</h4>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>


<?php endif; ?>
</ul>
</div><!- - end nav - ->
</div><!- - end left sidebar - ->

If you want to move a widget to a different location in the sidebar, or from the one to another sidebar, simply cut out the entire block of HTML code of the widget including the HTML comment that describes the widget and paste it somewhere else into the space between other widgets. To remove the widget, simply delete it.

If you want to add a custom widget, use the following HTML markup:

<!- - Widget Name - ->
<li><h4>Widget Title</h4>
<ul>
<li>
Widget Content Goes Here
</li>
</ul>
</li>

The above code will display a widget with rounded borders and the h4 heading with background color.

If you want to add a widget without any borders at all (f.ex to display AdSense ads or image ads), you can use either of the following HTML markups instead:

<!- - Widget Name - ->
<li style="background: none">
Widget Content, Text, Images, AdSense code, vertical banners, image ads, etc …
</li>
<!- - Widget Name - ->
<li style="background: none"><h4 style="background: none">Widget Title</h4>
<ul style="background: none">
<li>
Widget Content, Text, Images, AdSense code, vertical banners, image ads, etc …
</li>
</ul>
</li>

Examples available in a few hours … please come back later.

]]>
http://www.easywebtutorials.com/blog/2008/11/22/customize-sidebars/feed/
header customization with images http://www.easywebtutorials.com/blog/2008/11/19/header-customization-with-images/ http://www.easywebtutorials.com/blog/2008/11/19/header-customization-with-images/#comments Wed, 19 Nov 2008 19:09:19 +0000 guido http://www.easywebtutorials.com/blog/2008/11/19/header-customization-with-images/ There are two simple ways to customize the header of your theme with a custom graphic (logo or header banner):
1. adding a small logo image before your blog´s title and slogan
2. replacing the default header with a custom header banner

This tutorial shows you how to implement both options:

1. adding a small logo to the header

Step 1: Open the header template (header.php) and find this code:

<div id="sitelogo">
<span class="blogname"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></span><br />
<span class="blogslogan"><?php bloginfo('description'); ?></span>
</div>

Step 2: Right below the opening tag of the “sitologo” DIV element ( <div id="sitelogo"> ), add your image and make it float to the left side, using the CSS style “float: left” like shown below.
Replace “IMAGE_URL” with the URL to your logo image
Replace “ALT_TEXT” with an alternative text for the image
Add height and width values for the image

<div id="sitelogo">
<img style="float: left" src="IMAGE_URL" width="" height="" alt="ALT_TEXT"/>
</div>

<span class="blogname"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></span><br />
<span class="blogslogan"><?php bloginfo('description'); ?></span>
</div>


2. replace default header with custom header graphic

For some niche blogs, you might have a custom designed header graphic that you want to use instead of the default header. Here is how to replace the default header with your custom header banner and optionally activate the top navigation bar. Before you add your custom header image, you should know its dimensions (i.e. width and height in pixels). Your image should have the same width as your blog´s layout. The defaults are 780 pixels in 2 column themes and 920 pixels in 3 column themes. If your image has a different width, you can either resize your image or change the width of your blog´s layout (more complex) before you proceed with the steps below. The height doesn´t matter.

Step 1: Open the header template (header.php) and find this code:

<!- - HEADER - -><div id="header">

<div id="headerleft"></div>
<div id="headercenter">




</div>
<div id="headerright"></div>

</div><!- - END HEADER - ->

Step 2: Delete everything between the opening header DIV tag
<!- - HEADER - -><div id="header">
and the closing header DIV tag
</div><!- - END HEADER - ->

Step 3: Paste the HTML code for your custom header graphic between the opening and closing header DIV tags, so it now should look something like this:

<!- - HEADER - -><div id="header">

<img style="float: left" src="IMAGE_URL" width="" height="" alt=""/>
</div><!- - END HEADER - ->

Step 4 (optional): Now that you have replaced the entire header with your custom image, you might want to use the top navigation bar to display some important links, a search box and the RSS button. To activate it, simply remove the PHP comment ( // ) from the following line, quite at the bottom of the header template:

// include (TEMPLATEPATH . "/topmenu.php");

Step 5: After saving the updated header template, you still need to make a little update to the stylesheet(s), changing the height of the header DIV from 100 pixels to whatever your image has in height. Depending on which color scheme and border style you are using in your theme, you need to make these changes to one of the following stylesheets:

style.css (default stylesheet)
style-blue.css
style-blue-simple.css
style-green.css
style-green-simple.css
style-grey.css
style-grey-simple.css
style-red.css
style-red-simple.css

If you are not sure, simply update all of the above. Load the stylesheet(s) into the editor and find the CSS ID for the header in line 32 ( #header ). Change the value of the “height” property to the actual height of your header image.

#header {
width: 780px;
height: 100px;
background-color: #FFFFFF;
padding: 0;
margin: 0 0 5px 0;
position: relative;
}


]]>
http://www.easywebtutorials.com/blog/2008/11/19/header-customization-with-images/feed/
pages and categories as dropdown menus in header and top navigation http://www.easywebtutorials.com/blog/2008/11/18/pages-categories-dropdown/ http://www.easywebtutorials.com/blog/2008/11/18/pages-categories-dropdown/#comments Tue, 18 Nov 2008 12:44:23 +0000 guido http://www.easywebtutorials.com/blog/2008/11/18/pages-categories-dropdown/ In this post, I showed you how to manually add more links to the top / header navigation.

From version 1.6, my themes include styles for 2 levels deep CSS dropdown menus, which you can either create manually, adding links in nested unordered lists or automatically by including your WP pages or categories. The sub-pages (or sub-categories) and sub-sub-pages (or sub-sub-categories) open in the dropdown menu.

1. activate dropdown menu inside header

Step 1: open the header template (header.php) in the editor and you will find this code:

<div id="headernav">
<ul>
<li><a href="<?php bloginfo('url'); ?>">Home</a></li>
<!- - <li><a href="URL">Link2</a></li> - ->
<!- - <li><a href="URL">Link3</a></li> - ->
<?php
// wp_list_pages(’title_li=&depth=3&sort_column=menu_order’);
// wp_list_categories(’title_li=&depth=3′);
?>
</ul>
</div>

Step 2: To display WP pages and sub-pages, simply remove the PHP comment ( // ) from the line:
// wp_list_pages(’title_li=&depth=3&sort_column=menu_order’);

To display the categories and sub-categories, remove the PHP comment from this line:
// wp_list_categories(’title_li=&depth=3′);

Important Caveat: DO NOT activate both (pages and categories) because you will probably get too many links. The main pages or categories should fit into one line! When the main links are broken into two lines, the dropdown links in the first line won´t work.

TIP: If your links don´t fit all into one line inside the header, activate the additional top menu and include the remaining links there.

2. activate dropdown menu inside top navigation

Open the top navigation template (topmenu.php) and proceed in the same way as shown above. Same “caveat” applies here.

]]>
http://www.easywebtutorials.com/blog/2008/11/18/pages-categories-dropdown/feed/
Switch between styles (color schemes and border styles) http://www.easywebtutorials.com/blog/2008/10/06/simple-borders/ http://www.easywebtutorials.com/blog/2008/10/06/simple-borders/#comments Mon, 06 Oct 2008 12:35:36 +0000 guido http://www.easywebtutorials.com/blog/2008/10/06/switch-between-styles-simple-borders-rounded-borders/ Update: Since version 1.6, all 4 color schemes and the 2 different border styles (rounded and simple) are combined in one theme. To switch between the different styles, simply go to the “Theme Options” page in your WP admin panel and select your preferred style from the available options.


If you are still using version 1.5, there are two stylesheets for each theme. The default one displays rounded borders and the other one simple straight 1px wide borders. If you want to use simple borders instead of the rounded borders, you can simply rename the stylesheet files within your theme´s folder in this order:

1. rename “style.css” to “style-default.css”
2. rename “style-simple.css” to “style.css”

And if you want to switch back from simple borders to rounded borders:

1. rename “style.css” to “style-simple.css”
2. rename “style-default.css” to “style.css”

]]>
http://www.easywebtutorials.com/blog/2008/10/06/simple-borders/feed/
Theme Updates http://www.easywebtutorials.com/blog/2008/09/29/theme-updates/ http://www.easywebtutorials.com/blog/2008/09/29/theme-updates/#comments Tue, 30 Sep 2008 05:42:36 +0000 guido http://www.easywebtutorials.com/blog/2008/09/29/theme-updates/
Download

Current Version:

1.6 - 10 Nov. 2008

- added CSS drop-down menus inside header and top navigation bar. Now you can have pages, categories and other links
in 2 level deep search engine friendly drop-down menus.
- combined all 4 color schemes in 1 theme.
- added a theme options page where you can easily switch between the different color schemes and border styles.


Update History:

1.5 - 29 Aug. 2008

- added new style sheet for simple square border instead of rounded borders
- added version numbers
- added missing sidebar styles for 3 column themes

first release - 12 Aug. 2008

This version does not have a number. Version numbers appear beside the theme title (f.ex. Web2.0 3CR Blue 1.5), so if your theme doesn´t have this number, you should update it.


]]>
http://www.easywebtutorials.com/blog/2008/09/29/theme-updates/feed/
Removing Backlink From Footer http://www.easywebtutorials.com/blog/2008/09/29/removing-backlink-from-footer/ http://www.easywebtutorials.com/blog/2008/09/29/removing-backlink-from-footer/#comments Mon, 29 Sep 2008 18:04:46 +0000 guido http://www.easywebtutorials.com/blog/2008/09/29/removing-backlink-from-footer/ The first thing a PRO licensee probably wants to know is how to remove the backlinks from the footer. This tutorial shows you how.

Want to read the rest of this post? Simply get a PRO license for my WordPress Themes and you will receive a password to access this and other exclusive tutorials.

PRO Licensees: enter password below to continue reading.


]]>
http://www.easywebtutorials.com/blog/2008/09/29/removing-backlink-from-footer/feed/