I would like to change the php functions of a certain page of a child theme, in regards to it’s view, as per code below, to give the option to users to switch from list view to grid view. Currently the page is loaded as default template that came along with the Theme in list view. Appreciate the support.
Code would like to add in:
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
<style>
* {
box-sizing: border-box;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 10px;
}
/* Clear floats after the columns */
.row:after {
content: “”;
display: table;
clear: both;
}
/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 12px 16px;
background-color: #f1f1f1;
cursor: pointer;
}
.btn:hover {
background-color: #ddd;
}
.btn.active {
background-color: #666;
color: white;
}
</style>
</head>
<body>
<h2>List View or Grid View</h2>
<p>Click on a button to choose list view or grid view.</p>
<div id=”btnContainer”>
<button class=”btn” onclick=”listView()”><i class=”fa fa-bars”></i> List</button>
<button class=”btn active” onclick=”gridView()”><i class=”fa fa-th-large”></i> Grid</button>
</div>
<br>
<div class=”row”>
<div class=”column” style=”background-color:#aaa;”>
<h2>Column 1</h2>
<p>Some text..</p>
</div>
<div class=”column” style=”background-color:#bbb;”>
<h2>Column 2</h2>
<p>Some text..</p>
</div>
</div>
<div class=”row”>
<div class=”column” style=”background-color:#ccc;”>
<h2>Column 3</h2>
<p>Some text..</p>
</div>
<div class=”column” style=”background-color:#ddd;”>
<h2>Column 4</h2>
<p>Some text..</p>
</div>
</div>
<script>
// Get the elements with class=”column”
var elements = document.getElementsByClassName(“column”);
// Declare a loop variable
var i;
// List View
function listView() {
for (i = 0; i < elements.length; i++) {
elements[i].style.width = “100%”;
}
}
// Grid View
function gridView() {
for (i = 0; i < elements.length; i++) {
elements[i].style.width = “50%”;
}
}
/* Optional: Add active class to the current button (highlight it) */
var container = document.getElementById(“btnContainer”);
var btns = container.getElementsByClassName(“btn”);
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener(“click”, function() {
var current = document.getElementsByClassName(“active”);
current[0].className = current[0].className.replace(” active”, “”);
this.className += ” active”;
});
}
</script>
</body>
</html>
Please advise.
]]>Just got a child theme sorted which has the following functions.php file:
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>I want to add the following function to this file (it works out how many units of a product are still available);
**/Product Stock Quantity Check For Course Calendar Page/**
add_shortcode('product_stock', 'product_stock');
function product_stock( $atts ) {
if ( ! $atts['id'] ) {
return '';
}
$product = get_product($atts['id']);
return (int) $product->stock;
}How do I add this to the functions.php file??
I’ve tried this (below) and it just breaks the site.
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
**/Product Stock Quantity Check For Course Calendar Page/**
add_shortcode('product_stock', 'product_stock');
function product_stock( $atts ) {
if ( ! $atts['id'] ) {
return '';
}
$product = get_product($atts['id']);
return (int) $product->stock;
}
?>Anyone know what I should be doing here?
Thanks!!
]]>I have a some very basic mods I need to perform in the functions.php file. I now want to move these modifications out into my child theme’s functions.php file.
This is the function in question which works fine in parent theme’s functions.php file.
public function get_branding() {
$site_title = get_settings( 'blogname' );
$site_url = esc_url( get_site_url() );
$branding_lower = '<h2 class="branding-lower"><a href="/">xxxxxx</a></h2><h2 class="branding-department"><a href="'.$site_url.'">yyyyyy</a></h2>';
$branding = '<section class="branding"><h1 class="branding-upper"><a href="/">zzzzzz</a></h1><span class="branding-sep"> | </span>'.$branding_lower.'</section>';
return $branding;
}And when I place it in my child theme’s functions.php file I modify the function name and call it like this:
public function get_branding_child_ThemeName() {
...blah, blah, blah...And I have created a copy of the theme file that calls this function and modified it to use the child theme name:
echo ThemeName::get()->get_branding_child_ThemeName();The error I receive is not very helpful:
Parse error: syntax error, unexpected ‘public’ (T_PUBLIC) in C:\Users\me\Documents\Websites\test.dev\wp-content\themes\ThemeName-child\functions.php on line 27
And line 27 is this line in my childtheme’s functions.php file:
public function get_branding_child_ThemeName() {
Any help would be greatly appreciated!
[Moderator note: code fixed. Please wrap code in the backtick character or use the code button.]
]]>I want to call in the js file respond.src.js to handle media queries in IE8, but this must be called after the style sheet is loaded. The code in the parent theme is:
// Enqueues scripts and styles for front-end
function curling55_scripts() {
if (!is_admin()) {
wp_enqueue_style( ‘style’, get_stylesheet_uri() );
wp_enqueue_script( ‘nav’, get_template_directory_uri() . ‘/js/nav.js’, array( ‘jquery’ ) );
}
if ( is_singular() && comments_open() && get_option( ‘thread_comments’ ) )
wp_enqueue_script( ‘comment-reply’ );
}
add_action( ‘wp_enqueue_scripts’, ‘curling55_scripts’ );
If I code up functions.php in the child theme like this:
<?php
/***
* Add call to respond.src.js so IE8 can process media queries
* (must follow call to style.css)
*
*/
// Enqueue scripts and styles
function curling55child_scripts() {
wp_enqueue_script( ‘respond’, get_stylesheet_directory_uri() . ‘/js/respond.src.js’, array( ‘jquery’ ) );
}
add_action( ‘wp_enqueue_scripts’, ‘curling55child_scripts’, 20 );
?>
I get this error:
Warning: Cannot modify header information – headers already sent by (output started at /home/content/s/u/n/sunflowerbaker/html/wp/wp-content/themes/curling55-child/functions.php:12) in /home/content/s/u/n/sunflowerbaker/html/wp/wp-includes/pluggable.php on line 896
How do I code the functions.php in the child theme to do this and not give me an error?
Al
]]>I created a how-to video on YouTube: find it here best viewed full screen after changing the YouTube quality 480p or HD.
It shows the basic anatomy of a WordPress (twenty eleven) child theme, showing how we can use a functions.php file to add or replace functions.
This is meant as a learning aid to help new developers.
HTH
David
]]>