WpFunc » header.php

Dynamic Meta Description

Fri, 17 Dec 2010 09:04:46 +0000

WordPress using blog description with meta description. But we want to sync. with search terms and posts. We can do that without a plugin. Let’s begin.

We can make this via functions.php. If we make a function about this we can use posts excerpt with meta tag description.

Here is the code;

Make a copy of your theme’s functions.php and add this code before ?>

function dynamic_meta_description() {
	$rawcontent = 	get_the_content();
	if(empty($rawcontent)) {
		$rawcontent = htmlentities(bloginfo('description'));
	} else {
		$rawcontent = apply_filters('the_content_rss', strip_tags($rawcontent));
		$rawcontent = preg_replace('/\[.+\]/','', $rawcontent);
		$chars = array("", "\n", "\r", "chr(13)",  "\t", "\0", "\x0B");
		$rawcontent = htmlentities(str_replace($chars, " ", $rawcontent));
	}
	if (strlen($rawcontent) < 155) {
		echo $rawcontent;
	} else {
		$desc = substr($rawcontent,0,155);
		return $desc;
	}
}

Save functions.php and place it to your theme’s folder. In this code we use get_the_contet() function for call our post.
After that you can use this code into your header.php for meta descripton.

That’s All.

New Wp Menu System on Old themes…

Fri, 09 Jul 2010 09:05:32 +0000

With this article i’ll show you how to use new wordpress menu system on old themes (before 3.0). Let’s Begin.

Open your theme’s functions.php with your favourite php editor. After that add this code into file. First code for theme menu support, second code for register a menu area for use.

// New Menu Support For theme //
add_theme_support( 'nav-menus' );

register_nav_menu('main', 'Main Navigation Area');

After that save functions.php and upload the server. After that open your header.php and replace all that code with your old menu code (wp_page_menu, wp_categories_menu).

 'main', 'sort_column' => 'menu_order', 'fallback_cb' => 'wp_page_menu' ) ); ?>

After that you can use new menu system with your old theme. And if you don’t wat to use new menu. This code add wp_page_menu for you.

That’s All.

Build a Top Sliding Login Panel

Sat, 21 Nov 2009 16:51:48 +0000

This trick comes from Blog-Oh-Blog. You can create a login panel with simple jQuery and Html. We will edit header.php and style.css. Let’s begin…

Firstly, make a backup of header.php and style.css. After that you can add this codes.

In header.php;

Before tag;

Add this javascript code to your header.php before tag.

After tag;

Add this HTML code after tag where you want.



Login



Username :     
Password : 

 Remember me



Register |
Recover password




Control Panel

Dashboard |
Write new Post |
Write new Page |
Logout



LoginLogout

Save and send your header.php to your server.

And Style…

Open your style.css and add this lines to end of file.

* {margin:0; padding:0; outline:0;}
#slide-panel{ background-color:#000;border-bottom-style:solid;border-bottom-width:2px;display:none;height:100px;margin:auto;}
.slide {width:950px; margin:auto;}
.btn-slide:link, .btn-slide:visited{color:#fff; float:right; display:block;font-size:14px; text-transform:uppercase; font-weight:bold;height:26px; padding:3px 0 3px 0;line-height:22px;text-align:center;text-decoration:none;width:100px; background-color:#000; font-family:Arial;}
.loginform {width:950px; margin:auto; color:#999; font-family:Arial, Helvetica, sans-serif;}
.formdetails {color:#FFF; font-size:12px;padding:5px;}
.formdetails input{border:none; padding:2px 5px 2px 5px; background-color:#EFEFEF;}
.loginregister {color:#999; padding:5px;}
.loginregister a:link, .loginregister a:visited {color:#FFF; font-size:11px; text-decoration:underline;}
.loginform h2 {padding:10px 10px 10px 0; font-size:18px; font-weight:normal; text-transform:uppercase;}
.loginform ul li {display:inline;}
.loginform ul li a:link, .loginform ul li a:visited {color:#FFF; font-size:12px; text-decoration:underline;}

That’s All. Look at DEMO! and the original post!

Have a nice day!

Disable Caching!

Tue, 20 Oct 2009 16:30:39 +0000

Search engines are cahce our/your site for search results. If you want to disable this function sor search engines (ex. Google, Yahoo) just place a meta tag to your header. Lets’ begin…

Here is the code;

Just place this code to your header.php. With this code your site and posts will not cache by search engines.

Include jQuery to your theme

Thu, 08 Oct 2009 17:34:14 +0000

Hi again. The jQuery is the most easy javascript framework. You can integrate most of useful javascript commands and code to your site with this framework. Also you can addjQuery to your WordPress theme easily…

Here is the code;

Add this code to your header.php. Paste this code between and tags.

That’s All! Have a nice day.

Use Tabs in Your Blog!

Wed, 30 Sep 2009 18:34:09 +0000

Some Premium WordPress themes have jQuery tabs in the original. But if you have a non-premium theme you can easily apply this tabs in your theme. You integrate 1 js file and 1 css file in your theme and some code :) Let’s Begin…

Here is the code and files;

Firstly Download this file for the begining. There are 2 css files in this zip archive. Upload these files in yout theme directory and just add these code in your themes header.php above the tag;

After that we will make our tabs. Just copey this code and paste it into your sidebar;



Tab 1
Tab 2
Tab 3



Insert contents of the first tab here,
e.g. The code for a plugin.



Insert contents of the second tab here.



Insert contents of the third tab here.

You can make changes for your interests. That’s All. Thanks to Blog-oh-Blog for this code.

How to make a magazin style wordpress dropdown menu?

Fri, 25 Sep 2009 09:02:49 +0000

This think and coding coming from Jean-Baptiste Jung. When i read his Ubuntu Theme Colletction article for choose my new Ubuntu theme i saw an article title Magazin Style Dropdown menu and i clicked that link. I think you can make this easily. Smells good!

1st. Step: Changing Header.php;

Just add this code to your theme’s header.php. You can show your categories/sub-categories or pages/sub-pages.


Home
 	cat_ID) != "") {
 		echo "";
wp_list_categories('orderby=id&show_count=0&title_li=&use_desc_for_title=1&child_of='.$this_category->cat_ID);
 		echo "";
 	}
?>

2nd. Step: The CSS;

You will change your theme’s style.css file for this menu’s style. Just copy this codes below.

#nav2{
        background-color: #202020;
        display: block;
        font-size:1.1em;
        height:50px;
        width:100%;
}

#nav2, #nav2 ul {
line-height: 1;
list-style: none;
}

#nav2 a ,#nav2 a:hover{
border:none;
display: block;
text-decoration: none;
}

#nav2 li {
float: left;
list-style:none;
}

#nav2 a,#nav2 a:visited {
color:#109dd0;
display:block;
font-weight:bold;
padding:6px 12px;
}

#nav2 a:hover, #nav2 a:active {
color:#fff;
text-decoration:none
}

#nav2 li ul {
border-bottom: 1px solid #a9a9a9;
height: auto;
left: -999em;
position: absolute;
width: 900px;
z-index:999;
}

#nav2 li li {
width: auto;
}

#nav2 li li a,#nav2 li li a:visited {
        color:#109dd0;
font-weight:normal;
font-size:0.9em;
}

#nav2 li li a:hover,#nav2 li li a:active {
color:#fff;
}

#nav2 li:hover ul, #nav2 li li:hover ul, #nav2 li li li:hover ul, #nav2 li.sfhover ul, #nav2 li li.sfhover ul, #nav2 li li li.sfhover ul {
left: 30px;
}

If you ensure about IE6 add this java code below;

That’s All. The Original post is WordPress: “Magazine style” Horizontal dropdown menu.

Highlight the Searched Text!

Tue, 22 Sep 2009 19:59:47 +0000

Some themes have a highlighted search page, some themes don’t have this page too. But i will give some code to you. With this code you can highlight the searched text on your theme. This function may help your users when they search any important things. Lets Begin..

We will change our theme’s function.php and header.php. If you don’t know about WordPress coding or PHP please don’t touch this files. If you wanna help send me e-mail about this function.

Here is the code;

First make a backup functions.php and header.php (These files under the your themes path [wp-content/theme/your-theme]). After backup, you can change this files and you can send them to your server.

Insert this code into theme’s Functions.php:

function hls_set_query() {
  $query  = attribute_escape(get_search_query());

  if(strlen($query) > 0){
    echo '
      
    ';
  }
}

function hls_init_jquery() {
  wp_enqueue_script('jquery');
}

add_action('init', 'hls_init_jquery');
add_action('wp_print_scripts', 'hls_set_query');

And after that, Open your theme’s header.php and paste this code before tag.

After that you can send files to your server. When you search you can see searched texts are highlighted!

Make Your RSS Feed Link Auto Discoverable!

Tue, 22 Sep 2009 00:27:47 +0000

Some Web Browsers ( for ex. IE,Firefox,Opera) can auto discover RSS Links which are optimized. So you can use this option for your website. And users can submit your RSS feeds easily. You have to change your theme’s header.php and paste this two codes to into the file.

Firstly you should make a backup of header.php It is in your theme’s folder. After backup, you can change this file.

Here is the code;

You can paste this two code to header.php. If your theme have first code you can just use second code. After that save your header.php and send it to your server.

If you use IE8 you can see RSS image turn to orange and if you use Firefox you can see adding a RSS button to your address bar. When you click to this button you can see there are 2 RSS feed link into it.

That’s All. Have a nice day.