Adding Social Icons to a header in PHP
Question
So I'm pretty familiar with HTML and CSS. I'm trying to add social icons to the top right of my header.php but it's written entirely in PHP. Any idea of where I could easily add the div? I've tried a few different methods but with no success.
<!DOCTYPE html>
<?php
$lol_responsive_check = ( get_option( 'lol_check_responsive' ) == 'true' ) ? 'yes-responsive' : 'no-responsive' ;
$lol_sticky_check = ( get_option( 'lol_check_sticky' ) == 'true' ) ? 'lol-sticky-header-yes' : 'lol-sticky-header-no';
$lol_blog_layout = ( get_option( 'lol_check_blog_style' ) ) ? 'blog-' . get_option( 'lol_check_blog_style' ) : 'blog-classic';
global $lol_is_transparent;
$lol_is_transparent = '';
$lol_has_not_title = '';
$lol_page_margin_top = '';
$lol_slider = '';
if ( lollum_check_is_woocommerce() && is_shop() ) :
$lol_shop_page_id = wc_get_page_id( 'shop' );
$lol_slider = get_post_meta( $lol_shop_page_id, 'lolfmkbox_slider_rev_alias', true );
$lol_is_transparent = ( get_post_meta( $lol_shop_page_id, 'lolfmkbox_transparent_header_check', true ) == 'yes' ) ? 'header-transparent' : 'header-no-transparent';
$lol_has_not_title = ( get_post_meta( $lol_shop_page_id, 'lolfmkbox_headline_check', true ) == 'yes' ) ? 'has-not-title' : '';
elseif ( lollum_check_is_woocommerce() && is_account_page() && ! is_user_logged_in() ) :
global $post;
$lol_is_transparent = ( get_post_meta( $post->ID, 'lolfmkbox_transparent_header_check', true ) == 'yes' ) ? 'header-transparent' : 'header-no-transparent';
$lol_has_not_title = ( get_option( 'lol_bg_my_account' ) != '' ) ? 'has-not-title has-bg' : 'has-not-bg';
elseif ( is_home() ) :
global $wp_query;
$lol_page_id = $wp_query->get_queried_object_id();
$lol_slider = get_post_meta( $lol_page_id, 'lolfmkbox_slider_rev_alias', true );
$lol_is_transparent = ( get_post_meta( $lol_page_id, 'lolfmkbox_transparent_header_check', true ) == 'yes' ) ? 'header-transparent' : 'header-no-transparent';
$lol_has_not_title = ( get_post_meta( $lol_page_id, 'lolfmkbox_headline_check', true ) == 'yes' ) ? 'has-not-title' : '';
$lol_page_margin_top = ( get_post_meta( $lol_page_id, 'lolfmkbox_page_margin_check_top', true ) == 'yes' ) ? 'no-margin-top' : '';
elseif ( is_page() ) :
global $post;
$lol_slider = get_post_meta( $post->ID, 'lolfmkbox_slider_rev_alias', true );
$lol_is_transparent = ( get_post_meta( $post->ID, 'lolfmkbox_transparent_header_check', true ) == 'yes' ) ? 'header-transparent' : 'header-no-transparent';
$lol_has_not_title = ( get_post_meta( $post->ID, 'lolfmkbox_headline_check', true ) == 'yes' ) ? 'has-not-title' : '';
$lol_page_margin_top = ( get_post_meta( $post->ID, 'lolfmkbox_page_margin_check_top', true ) == 'yes' ) ? 'no-margin-top' : '';
elseif ( is_single() ) :
global $post;
$lol_is_transparent = ( get_post_meta( $post->ID, 'lolfmkbox_transparent_header_check_post', true ) == 'yes' ) ? 'header-transparent' : 'header-no-transparent';
endif;
if ( $lol_slider != '' ) :
$lol_has_not_title = '';
endif;
?>
<!--[if IE 8]> <html class="no-js lt-ie9 <?php echo esc_attr( $lol_responsive_check . ' ' . $lol_sticky_check . ' ' . $lol_is_transparent . ' ' . $lol_has_not_title . ' ' . $lol_blog_layout . ' ' . $lol_page_margin_top ); ?>" <?php language_attributes();?>> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js <?php echo esc_attr( $lol_responsive_check . ' ' . $lol_sticky_check . ' ' . $lol_is_transparent . ' ' . $lol_has_not_title . ' ' . $lol_blog_layout . ' ' . $lol_page_margin_top ); ?>" <?php language_attributes();?>> <!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<?php if ( get_option( 'lol_check_responsive' ) == 'true' ) { ?>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<?php } ?>
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php // if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>
<link rel="alternate" title="<?php printf( __( '%s RSS Feed', 'lollum' ), get_bloginfo( 'name' ) ); ?>" href="<?php bloginfo( 'rss2_url' ); ?>">
<link rel="alternate" title="<?php printf( __( '%s Atom Feed', 'lollum' ), get_bloginfo( 'name' ) ); ?>" href="<?php bloginfo( 'atom_url' ); ?>">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php if ( get_option( 'lol_custom_favicon' ) ) { ?>
<link rel="shortcut icon" href="<?php echo esc_url( get_option( 'lol_custom_favicon' ) ); ?>">
<?php } ?>
<script>document.documentElement.className += " js";</script>
<!-- BEGIN WP -->
<?php wp_head(); ?>
<!-- END WP -->
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/ie8.js?ver=1.0" type="text/javascript"></script>
<![endif]-->
</head>
<body <?php body_class();?>>
<?php
/**
* llm_mobile_menu hook
*
* @hooked llm_mobile_menu - 10
*/
do_action( 'llm_mobile_menu' );
?>
<?php
/**
* llm_sidebar_cart hook
*
* @hooked llm_sidebar_cart - 10
*/
do_action( 'llm_sidebar_cart' );
?>
<?php
/**
* llm_output_content_wrapper hook
*
* @hooked llm_output_content_wrapper - 10
*/
do_action( 'llm_output_content_wrapper' );
?>
<?php
/**
* llm_header hook
*
* @hooked llm_branding - 10
* @hooked llm_submenu - 20
*/
do_action( 'llm_header' );
?>
Update
While I was able to add the div, it is hidden behind the header, and although I've attempted to change the position css, it won't move to the top right of the header, any suggestions?
3 answers
solution1
1 2015-02-02 22:07:25
In your theme folder look for you header.php file.
In there you should be able to make modifications to the header. All themes are different and it depends on the theme author but most do use the header.php file. Start there.
solution2
0 2015-02-02 22:09:43
First, you want to add the icons to the "header" instead of the "header.php". Header.php is the file, that contains the header section too.
If you want to display something on your website, the code should be between body tags ( <body> CODE HERE </body> ). So your div have to be after that line: <body <?php body_class();?>>
solution3
0 ACCPTED 2015-02-02 22:16:14
try this. I changed the html markup below as well.
and add to your css.
.container { position:relative; width:100%; }
.social-wrap { position:absolute; z-index:999; top:20px; right:20px; }
you don't have to use these exact class names, it's just for the example...
<body <?php body_class();?>>
<!--add your code here-->
<div class="container">
<div class="social-wrap">
<ul class="social-icons>
<li><a href="#">facebook</a></li>
<li><a href="#">Twitter</a></li>
</ul>
</div>
</div>
<!--//end-->
<?php
/**
* llm_mobile_menu hook
*
* @hooked llm_mobile_menu - 10
*/
do_action( 'llm_mobile_menu' );
?>
<?php
/**
* llm_sidebar_cart hook
*
* @hooked llm_sidebar_cart - 10
*/
do_action( 'llm_sidebar_cart' );
?>
<?php
/**
* llm_output_content_wrapper hook
*
* @hooked llm_output_content_wrapper - 10
*/
do_action( 'llm_output_content_wrapper' );
?>
<?php
/**
* llm_header hook
*
* @hooked llm_branding - 10
* @hooked llm_submenu - 20
*/
do_action( 'llm_header' );
?>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Adding another social media icon to wordpress header
how to display social icons on cv instead of url in php?
PHP Adding stylesheets to header
Adding javascript to php header
display social icons in a line
PHP : wp_nav_menu adding icons
WordPress links to social icons not linking
Wordpress custom widget with social icons
Adding a SOAP header with PHP and wsdl2php
Adding meta tags in header in Lithium PHP
Related Tags