Front-end Web Developer | Tampa, FL

{CODE type:php;}
<form method=”get” id=”searchform” action=”<?php bloginfo(‘home’); ?>/”>
<div class=”searchBox”><input class=”serchText” type=”text” value=”Search” name=”s” id=”s” />
<input type=”submit” id=”searchsubmit” value=”Search” class=”serchBtn” />
</div>
</form>
{/CODE}

3. Now add this code to your template:

{CODE type:php;}
<?php include (TEMPLATEPATH . ‘/searchform.php’); ?>
{/CODE}

Thats it. Now You know how to add search bar in WP blog.

HTML Code:

{CODE type:php;}
<div class=”gallery-wrapper”>

<a href=”/” class=”background”></a>
<a href=”/” class=”one”><span>Image One</span></a>
<a href=”/” class=”two”><span>Image Two</span></a>
<a href=”/” class=”three”><span>Image Three</span></a>
<a href=”/” class=”four”><span>Image Four</span></a>

</div>
{/CODE}

CSS Code:

{CODE type:php;}
<style>
.gallery-wrapper {
width: 300px; /* Width of our Images */
margin: 30px auto;
position: relative; /* This is necessary, for our Image position */
}

.gallery-wrapper a {
display: block;
width: 300px; /* Width of our images */
height: 300px; /* Height of our image */
position: absolute; /* This is necessary, for our Image position */
top: 0;
left: 0;
font-family: Verdana;
font-size: 14px;
color: #888;
text-decoration: none;
cursor: pointer;
}

.one {
background: url(‘images/image1.jpg’) no-repeat 0 0; /* Our First image */
}
.two {
background: url(‘images/image2.jpg’) no-repeat 0 0; /* Our Second image */
}
.three {
background: url(‘images/image3.jpg’) no-repeat 0 0; /* Our Third image */
}
.four {
background: url(‘images/image4.jpg’) no-repeat 0 0; /* Our Fourth image */
}
.background {
background: url(‘images/image5.gif’) no-repeat 0 0; /* Our Background image */
z-index: 1;
}

.gallery-wrapper a span {
position: absolute; /* This is necessary, for our Links position */
width: 150px; /* This width is half of our Image width */
background: #333;
}

.one span { /* First link position */
left: 0;
bottom: -30px;
}
.two span { /* Second link position */
left: 150px;
bottom: -30px;
}
.three span { /* Third link position */
left: 0;
bottom: -60px;
}
.four span { /* Fourth link position */
left: 150px;
bottom: -60px;
}

.gallery-wrapper a:hover { /* This is necessary, for image roll-over */
z-index: 2;
}
.gallery-wrapper a:hover span {
background: #eee;
}
</style>
{/CODE}

And here is video tutorial how to create small image gallery CSS only:

{m4v}image_gallery{/m4v}

Big thx for video: css-tricks.com

Opacity for all browsers exept IE’s

{CODE type:php;}
.opacity {
opacity: .8;
}
{/CODE}

Opacity for IE 5/6/7

{CODE type:php;}
.opacity {
filter: alpha(opacity=80);
}
{/CODE}

Opacity for IE 8

{CODE type:php;}
.opacity {
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=80)”;
}
{/CODE}

So, for all browsers CSS will be:

{CODE type:php;}
.opacity {
opacity: .8;
filter: alpha(opacity=80);
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=80)”;
}
{/CODE}

Ok, let’s start:

I have already created PNG image with two backgrounds. width 600px height 100px. (Save image to the same folder as your html)

Create TABLE with tableRowHover class and with TR class trHover.

{CODE type:php;}
<table border=”0″ cellpadding=”0″ cellspacing=”0″ class=”tableRowHover”>
<tr>
<th>Time</th>
<th>Date</th>
<th>City</th>
<th>Price</th>
</tr>
<tr class=”trHover”>
<td>06:00</td>
<td>14 May 2010</td>
<td>New York</td>
<td>$700</td>
</tr>
</table>
{/CODE}

Add CSS:

{CODE type:php;}
<style>
table.tableRowHover {
width: 600px;
}
table.tableRowHover tr.trHover {
background: url(row-bg.png) no-repeat 0 0;
position: relative;
}
table.tableRowHover tr:hover {
background-position: 0 -50px;
}
table.tableRowHover td {
height: 50px;
background-image: none;
}
</style>
{/CODE}

Explanation:

For TR we added position: relative and for TD background-image: none – This is background fix for IE!

We create TABLE with fixed width 600px, same width has our background image.

For TD we added fixed height 50px (half of our double image), so, for hover in TR:HOVER we added negative Y background position -50px;

Note: in top of HTML page have to be:

{CODE type:php;}<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>{/CODE}

otherwise in IE rollover will not work

Now, You have to get this. (will open in new browser window)

It works in all browsers except Mac Safari. So if you don’t need this browser this is it.

Safari ROW background rollover fix, its time for rain dance. We will use background-position method.

In our Html code we have to add classes to our TH’s: header1, header2, header3, header4 and for TD’s: cell1, cell2, cell3, cell4.

{CODE type:php;}
<table border=”0″ cellpadding=”0″ cellspacing=”0″ class=”tableRowHover”>
<tr>
<tr>
<th class=”header1″>Time</th>
<th class=”header2″>Date</th>
<th class=”header3″>City</th>
<th class=”header4″>Price</th>
</tr>
</tr>
<tr class=”trHover”>
<td class=”cell1″>06:00</td>
<td class=”cell2″>14 May 2010</td>
<td class=”cell3″>New York</td>
<td class=”cell4″>$700</td>
</tr>
{/CODE}

In CSS we have to add this code:

{CODE type:php;}
<style>
table.tableRowHover .header1 {
width: 100px;
}
table.tableRowHover .header2 {
width: 200px;
}
table.tableRowHover .header3 {
width: 200px;
}
table.tableRowHover .header4 {
width: 100px;
 border-right: none;
}
</style>

<![if !IE]>
<style>
table.tableRowHover tr.trHover td.cell1 {
background: url(row-bg.png) no-repeat 0 0;
}
table.tableRowHover tr.trHover:hover td.cell1 {
background-position: 0 -50px;
}

table.tableRowHover tr.trHover td.cell2 {
background: url(row-bg.png) no-repeat -100px 0;
}
table.tableRowHover tr.trHover:hover td.cell2 {
background-position: -100px -50px;
}

table.tableRowHover tr.trHover td.cell3 {
background: url(row-bg.png) no-repeat -300px 0;
}
table.tableRowHover tr.trHover:hover td.cell3 {
background-position: -300px -50px;
}

table.tableRowHover tr.trHover td.cell4 {
background: url(row-bg.png) no-repeat 100% 0;
}
table.tableRowHover tr.trHover:hover td.cell4 {
background-position: 100% -50px;
}
</style>
<![endif]>
{/CODE}

Explanation:

Our table has fixed width 600px each TD’s also have fixed width: 100+200+200+100=600. So, for each td we use X negative image position:

For first TD background-position: 0 0

For second TD  background-position: -100px 0

For third TD background-position: -300px 0

For fourth TD background-position: -500px 0 or background-position: 100% 0

This code between this tag < ! [ if ! IE ] >   < ! [ endif ] > only for FF and Safary – not for IE.

Now it works in Safari 🙂

Ok, now all HTML Code:

{CODE type:php;}
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head>

<![if !IE]>
<style>
table.tableRowHover tr.trHover td.cell1 {
background: url(row-bg.png) no-repeat 0 0;
}
table.tableRowHover tr.trHover:hover td.cell1 {
background-position: 0 -50px;
}

table.tableRowHover tr.trHover td.cell2 {
background: url(row-bg.png) no-repeat -100px 0;
}
table.tableRowHover tr.trHover:hover td.cell2 {
background-position: -100px -50px;
}

table.tableRowHover tr.trHover td.cell3 {
background: url(row-bg.png) no-repeat -300px 0;
}
table.tableRowHover tr.trHover:hover td.cell3 {
background-position: -300px -50px;
}

table.tableRowHover tr.trHover td.cell4 {
background: url(row-bg.png) no-repeat 100% 0;
}
table.tableRowHover tr.trHover:hover td.cell4 {
background-position: 100% -50px;
}
</style>
<![endif]>

<style>
table.tableRowHover {
width: 600px;
font-family: Verdana;
text-align: left;
font-size: 18px;
text-indent: 28px;
}
table.tableRowHover th {
background: #ffcc00;
border-right: 2px solid #fff;
color: #3b3939;
font-size: 12px;
height: 20px;
vertical-align: middle;
}

table.tableRowHover .header1 {
width: 100px;
}

table.tableRowHover .header2 {
width: 200px;
}

table.tableRowHover .header3 {
width: 200px;
}

table.tableRowHover .header4 {
width: 100px;
 border-right: none;
}

table.tableRowHover tr {
background: url(row-bg.png) no-repeat 0 0;
position: relative;
}
table.tableRowHover tr:hover {
background-position: 0 -50px;
}

table.tableRowHover td {
height: 50px;
background-image: none;
}
</style>

</head>
<body>

<table border=”0″ cellpadding=”0″ cellspacing=”0″ class=”tableRowHover”>
<tr>
<th class=”header1″>Time</th>
<th class=”header2″>Date</th>
<th class=”header3″>City</th>
<th class=”header4″>Price</th>
</tr>
<tr class=”trHover”>
<td class=”cell1″>06:00</td>
<td class=”cell2″>14 May 2010</td>
<td class=”cell3″>New York</td>
<td class=”cell4″>$700</td>
</tr>
<tr class=”trHover”>
<td class=”cell1″>08:00</td>
<td class=”cell2″>17 Feb 2010</td>
<td class=”cell3″>Los Angeles</td>
<td class=”cell4″>$750</td>
</tr>
<tr class=”trHover”>
<td class=”cell1″>06:50</td>
<td class=”cell2″>14 May 2010</td>
<td class=”cell3″>Tampa</td>
<td class=”cell4″>$710</td>
</tr>
<tr class=”trHover”>
<td class=”cell1″>11:20</td>
<td class=”cell2″>14 Jun 2010</td>
<td class=”cell3″>Miami</td>
<td class=”cell4″>$730</td>
</tr>
</table>

</body>
</html>
{/CODE}

Now you should have this. (will open in new browser window)

I hope it will help 🙂 if you have any questions, fill free to drop me a comment…

The code to add to the header.php file to include only pages 43 and page 44 will look like the examples below. You can add as many page numbers as you want in a comma separated list, or just one.

{CODE type:php;}
<?php wp_list_pages(‘title_li=&depth=2&sort_column=menu_order&include=43,44’); ?>
{/CODE}

Look closely at the difference between the first example and the added code in the second. The code added was this &exclude=43,44 with no extra spaces and keeping the ‘ at the end.

To exclude certain pages from appearing in the navigation bar simply use exclude instead in include in the code. The example below will not show pages 43 and 44:

{CODE type:php;}
<?php wp_list_pages(‘title_li=&depth=2&sort_column=menu_order&exclude=43,44’); ?>
{/CODE}

Now what about sorting the order the pages are shown? Well there are options that you can use and these are found on the WordPress codex. But if none of those options work for you you could use the includes code multiple times to set the order on your own. For example this would show page number 43 first then page 1 second:

{CODE type:php;}
<?php wp_list_pages(‘title_li=&depth=2&sort_column=menu_order&include=43’); ?>
<?php wp_list_pages(‘title_li=&depth=2&sort_column=menu_order&include=1’); ?>
{/CODE}

Did you notice the code for the Home link in the first code example? I bet you are thinking now right? Yes that is the code we can learn from to hard-code external links. This part is very simple just place the code for the external link anywhere within the navigation bar you want the link to appear. In the sample below the Home link is first, page number 43 second, an external hard-coded link and last is page number 1.

{CODE type:php;}
<ul id=”nav”>
<li><a href=”<?php echo get_settings(‘home’); ?>”>Home</a></li>
<?php wp_list_pages(‘title_li=&depth=2&sort_column=menu_order&include=43’); ?>
<li><a href=”http://www.sopov.com/” title=”Sopov.com”>PSD to HTML</a></li>
<?php wp_list_pages(‘title_li=&depth=2&sort_column=menu_order&include=1’); ?>
</ul>
{/CODE}

Special thanks wordpressmax.com for this article. I hope it will be useful.

I took this article from this blog.

Next create new Category with name Blog:

{CODE type:php;}<?php if (have_posts()) : ?>{/CODE}

and add this code:

{CODE type:php;}query_posts(‘cat=3’);{/CODE}

So we got this:

{CODE type:php;}<?php query_posts(‘cat=3’); if (have_posts()) : ?>{/CODE}

Where ‘cat=3’ is ID of Your category. To find out what is your Blog ID. In admin panel click on Posts -> Categories -> Blog and view URL:

Open folder: wp-content/themes/YourThemeName/header.php and add this code to the bottom:

{CODE type:php;}
<?php if(is_page(‘Services’)) :?>
<img src=”<?php bloginfo(‘template_url’); ?>/images/services.png” alt=”Services”/>
<?php endif;?>

<?php if(is_page(‘Portfolio’)) :?>
<img src=”<?php bloginfo(‘template_url’); ?>/images/portfolio.png” alt=”Portfolio”/>
<?php endif;?>

<?php if(is_page(‘Contact’)) :?>
<img src=”<?php bloginfo(‘template_url’); ?>/images/contact.png” alt=”Contact”/>
<?php endif;?>

<?php if(is_page(‘Blog’)) :?>
<img src=”<?php bloginfo(‘template_url’); ?>/images/blog.png” alt=”Blog”/>
<?php endif;?>
{/CODE}

What we have in this code: is_page(‘Services’) where Service is the name of Service page, you can use ID’s of your pages: is_page(’43’).

bloginfo(‘template_url’) this is path to Your theme, WordPress adding this automatically.

Thanks, Vlad.

Next from the left navbar click on Appearance – Widgets:

Move Pages from Available Widgets to your Sidebar:

Now we have to create rollover image menu. In Photoshop i created images for our menu:
I have two images with height 36px each:

Now we have to unite this two images in one with height 72px:

As You can see this image is combination of two images with height:  36px + 36px.

Next we have to add some styles to our CSS file. Connect to the ftp and open file style.css from folder: /wp-content/themes/YourTheme/

Every menu in WP has an unique class: page-item-14, page-item-41, so we will add this code:

{CODE type:php;}
#sidebar .page-item-41 {
height: 36px;
width: 174px;
display: block;
}
#sidebar .page-item-41 a {
background: url(images/services-btn.png) 0 0 no-repeat;
width: 174px;
height: 36px;
display: block;
text-indent: -9999px
}
#sidebar .page-item-41 a:hover {
background-position: 0 -36px
}
{/CODE}

What in this code:

#sidebar .page-item-41 a
height: 36px – this is half of our image height (important)
background: url(images/services-btn.png) 0 0 no-repeat  – our image background with background position left: 0 top:0

#sidebar .page-item-41 a:hover
background-position: 0 -36px – we added negative position of image background top: -36px

Here what we got:

• Services

Or You can see a live WP site with this menu: http://webvine.com.au/

OK, if You have any questions leav me a comment

——-

How to add active menu style for WP menu

When you click on site menu, the active menu adding new class:

{CODE type:php;}
<li class=”current_page_item”><a href=”#”>Active Menu</a></li>
{/CODE}

So to adding CSS style effect to Active menu you should add at the bottom of your CSS file this code:

{CODE type:php;}
#sidebar .current_page_item a {background-position: 0 -36px}
{/CODE}

Thx, Vlad

Magento category page title – page.phtml

/app/design/frontend/default/default/template/catalog/category/

Magento breadcrumbs.phtml

/app/design/frontend/default/default/template/page/html/

Magento FOOTER – footer.phtml

/app/design/frontend/default/default/template/page/html/

Magento head.phtml

/app/design/frontend/default/default/template/page/html/

Magento HEADER – header.phtml

/app/design/frontend/default/default/template/page/html/

Magento notices.phtml

/app/design/frontend/default/default/template/page/html/

Magento page navigation pager.phtml

/app/design/frontend/default/default/template/page/html/

Magento top.links.phtml

/app/design/frontend/default/default/template/page/html/

Magento wrapper.phtml

/app/design/frontend/default/default/template/page/html/