Wordpress Entegre- Css Sıkıntısı

Merhaba css hazırladığım temayı wp e dökmeye çalışıyorum.
Navbar da <?php wp_list_pages('title_li='); ?> bu kodla sayfaları listeletmek istiyorum ancak istediğim görüntüde değil. Ayrıca kodu nasıl düzenleyeceğim onu da bilmiyorum.

benim istediğim anasayfa gibi benim panelden seçtiğim bir ikon çıksın. Ayrıca span olarak tooltip kullandım bunu da gösteremiyorum.

Kodlar:

  <div class="navbar">
                <ul>
                    <a href="<?php echo home_url( '/' ); ?>"><li class="tooltips"><div id="nav"><i class="fa fa-home"></i></br>Home<span>Something else...</span></li></a>
			
         
                </ul>

Css Kodları:

.navbar {
    float: right;
    margin-top: 23px;
}
.navbar ul li {
    float: left;
    margin-left: 15px;
    width: 75px;
    height: 55px;
    text-align: center;
    background-color: rgb(236, 240, 241);
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    color: #22313F;
    font-size: 15px;
    line-height: 20px;
    text-decoration: none;
}
.navbar ul li:hover {
    background-color: #336E7B;
    color: white;
    transition: background-color .5s linear;
}
.navbar ul li a {
    text-decoration: none;

}

.navbar ul li a:visited {
    text-decoration: none;
    color: #22313F;
}
li.tooltips span {
    position: absolute;
    width:140px;
    color: #22313F;
    background: #FFFFFF;
    height: 30px;
    line-height: 30px;
    text-align: center;
    visibility: hidden;
    border-radius: 6px;
}
li.tooltips span:after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -8px;
    width: 0; height: 0;
    border-bottom: 8px solid #FFFFFF;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}
li:hover.tooltips span {
    visibility: visible;
    opacity: 0.8;
    top: 65px;
    left: 55%;
    margin-left: -76px;
    z-index: 999;
}

Güncel.

Tam Anlamıyla Ne İstediğinizi Anlamamkla Beraber Sayfalamadaki Kodları Düzeltmek İstiyorsunuz Sanırım Size Verdiğim Kodla Kendinize Göre Düzenleme Yapıp Sayfaları Listeleyebilirsiniz.

<?php
$args = array(
  'orderby' => 'name',
  'parent' => 0
  );
$pages = get_pages ( $args );
foreach ( $pages as $page ) {
	echo '<a href="' . get_page_link( $page->ID ) . '">' . $page->post_title . '</a>';
}
?>

Bu kodu tam olarak nereye ekleyeceğim ? Bu arada yardımın için teşekkürler.

wordpress, opencart ve diğer cms yazılımlarınız la ilgili kurulum , tema entegresi ve tema editlemesi tüm yazılımsal ve css sorunlarını ücret karşılığında yapıyorum.
Düşünürseniz skype ve hotmail adresim : cilasun_555@hotmail.com

Sizin Verdiğiniz Kodları Eklediğiniz Yere Ekleyebilirsiniz.Size Verdiğim Koduda Kendinize Göre Düzenleyebilirsin Mesela <span><li> vs İstedğin Tagı Ekleyebilirsin.

++

Temaya Menü Entegresi Yapıp Class ları Admin Paneli Üzerinden Kendinize Göre Düzenleyipte Yapabilirsiniz.

Benim istediğim, home dan ayrıca her sayfa için aynı şekilde bir li oluşturması. Ancak ben <?php wp_list_pages('title_li='); ?> kodunu <ul> etiketinden sonra kullandığımda bana http://www.fastandhd.com deki gibi bir sonuç çıkarıyor benim istediğim home gibi üzerine gelince tooltip çalışsın ve home un üstünde istediğim kod olsun.

Şimdi anlatabilmişimdir heralde. Sizi yoruyorum ama kusura bakmayın.

Her menü için ayrı bir class mı kullanıyorsun eğer evet ise menü özelliğini kullanıp her menüye panelden class eklemek olacak.birazdan size uygun kodu hazırlayıp mesaj atacağım telefondan giriyorum.

İlginiz için çok sağolun cevapladım öm'nizi