Editing Head in Child Theme

Support
#1

Hey Apex Team,

I’ve a child theme and I would add some additional code in the area. For this I’ve copied the file base.php from “framwork/views/header/” to my child-theme “framwork/views/header/” and extend the base.php with further informations.

Now my informations are loading, but the header is removed from the theme. Have you a quick hint for me?

Thank you!

Code in my base.php:

<?php

// =============================================================================
// VIEWS/HEADER/BASE.PHP
// -----------------------------------------------------------------------------
// Declares the DOCTYPE for the site, includes the <head>, opens the <body>
// element as well as the .x-root <div> and .x-site <div>.
// =============================================================================

$x_root_atts = x_atts( apply_filters( 'x_root_atts', array( 'id' => 'x-root', 'class' => 'x-root' ) ) );
$x_site_atts = x_atts( apply_filters( 'x_site_atts', array( 'id' => 'x-site', 'class' => 'x-site site' ) ) );

?>

<!DOCTYPE html>

<html class="no-js" <?php language_attributes(); ?>>

<head>
	<div>
	<link rel="apple-touch-icon" sizes="57x57" href="/favicon/apple-icon-57x57.png">
	<link rel="apple-touch-icon" sizes="60x60" href="/favicon/apple-icon-60x60.png">
	<link rel="apple-touch-icon" sizes="72x72" href="/favicon/apple-icon-72x72.png">
	<link rel="apple-touch-icon" sizes="76x76" href="/favicon/apple-icon-76x76.png">
	<link rel="apple-touch-icon" sizes="114x114" href="/favicon/apple-icon-114x114.png">
	<link rel="apple-touch-icon" sizes="120x120" href="/favicon/apple-icon-120x120.png">
	<link rel="apple-touch-icon" sizes="144x144" href="/favicon/apple-icon-144x144.png">
	<link rel="apple-touch-icon" sizes="152x152" href="/favicon/apple-icon-152x152.png">
	<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-icon-180x180.png">
	<link rel="icon" type="image/png" sizes="192x192"  href="/favicon/android-icon-192x192.png">
	<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
	<link rel="icon" type="image/png" sizes="96x96" href="/favicon/favicon-96x96.png">
	<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
	<link rel="manifest" href="/favicon/manifest.json">
	<meta name="msapplication-TileColor" content="#ffffff">
	<meta name="msapplication-TileImage" content="/favicon/ms-icon-144x144.png">
	<meta name="theme-color" content="#ffffff">
	</div>
  	<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

  <div <?php echo $x_root_atts; ?>>

    <?php do_action( 'x_before_site_begin' ); ?>

    <div <?php echo $x_site_atts; ?>>

    <?php do_action( 'x_after_site_begin' ); ?>
#2

Hello There,

Thanks for a very detailed post. I have inspected your code and it is not necessary to warp it with <div> tag because this will only work within the body. Please have it updated and use this:

<?php

// =============================================================================
// VIEWS/HEADER/BASE.PHP
// -----------------------------------------------------------------------------
// Declares the DOCTYPE for the site, includes the <head>, opens the <body>
// element as well as the .x-root <div> and .x-site <div>.
// =============================================================================

$x_root_atts = x_atts( apply_filters( 'x_root_atts', array( 'id' => 'x-root', 'class' => 'x-root' ) ) );
$x_site_atts = x_atts( apply_filters( 'x_site_atts', array( 'id' => 'x-site', 'class' => 'x-site site' ) ) );

?>

<!DOCTYPE html>

<html class="no-js" <?php language_attributes(); ?>>

<head>

	<link rel="apple-touch-icon" sizes="57x57" href="/favicon/apple-icon-57x57.png">
	<link rel="apple-touch-icon" sizes="60x60" href="/favicon/apple-icon-60x60.png">
	<link rel="apple-touch-icon" sizes="72x72" href="/favicon/apple-icon-72x72.png">
	<link rel="apple-touch-icon" sizes="76x76" href="/favicon/apple-icon-76x76.png">
	<link rel="apple-touch-icon" sizes="114x114" href="/favicon/apple-icon-114x114.png">
	<link rel="apple-touch-icon" sizes="120x120" href="/favicon/apple-icon-120x120.png">
	<link rel="apple-touch-icon" sizes="144x144" href="/favicon/apple-icon-144x144.png">
	<link rel="apple-touch-icon" sizes="152x152" href="/favicon/apple-icon-152x152.png">
	<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-icon-180x180.png">
	<link rel="icon" type="image/png" sizes="192x192"  href="/favicon/android-icon-192x192.png">
	<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
	<link rel="icon" type="image/png" sizes="96x96" href="/favicon/favicon-96x96.png">
	<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
	<link rel="manifest" href="/favicon/manifest.json">
	<meta name="msapplication-TileColor" content="#ffffff">
	<meta name="msapplication-TileImage" content="/favicon/ms-icon-144x144.png">
	<meta name="theme-color" content="#ffffff">

  	<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

  <div <?php echo $x_root_atts; ?>>

    <?php do_action( 'x_before_site_begin' ); ?>

    <div <?php echo $x_site_atts; ?>>

    <?php do_action( 'x_after_site_begin' ); ?>

I can see that you added site icons. This is not necessary because we already have an option built in the theme. All you have to do is to insert the url of the icon, set the colors of the icons. You can check this out in X > Launch > Options > Site Icons.

Hope this helps.

#3

Thank you for your answer. But it doesn’t solve the problem. The favicons are loading, but the <?php wp_head(); ?> has no function. Okay, I could place the favicons within the launch section, but If I would extend my header in future…

Do I have to copy some other files from the framework folder to my child theme? I have only copied the base.php insight the folder “header” because right now, it’s the only file I would make some changes within.

Thank you very much for your help!

#4

Hello There,

<?php wp_head(); ?> has so many functions. Your site will not display correctly if it is not preset in the code. If you want to extend your header, you will have to make changes to wp-header.php instead. You can find this in `wp-content/themes/x/framework/legacy/cranium/headers/views/{your stack}/wp-header.php or other template files if needed. Just let us know which one so that we can guide you accordingly.

Hope this helps.

#5

Hope I’m not hijacking this thread, but I’ve got the same issue with base.php removing my theme’s header.

I am trying to add the Facebook Javascript code into my base.php file. I’m entering that just below the body tag. Saving to themes/pro-child/framework/integrity/header directory.

When I upload this file into the applicable directory into my child theme, the header disappears from the site. No logo, navigation, etc.

NOTE that this happens even if I upload an default/unchanged copy of base.php into this directory.

#6

Hi there,

Please move the base.php file should be in pro-child/framework/views/header/.

Hope this helps.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.