Adding Social Icons to a header in PHP in WordPress

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?

Post Views: 4

3 comments

Anonymous says:

April 5, 2023 at 4:21 pm

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.

Theme Development.. Header.php

Desigining Headers in WordPress

Log in to Reply

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' );
    ?>

Anonymous says:

April 5, 2023 at 4:21 pm

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();?>>

Log in to Reply

Adding Social Icons to a header in PHP

Leave a Reply Cancel reply

3 comments

Social Network

Related posts

Leave a Reply Cancel reply

3 comments

Social Network