I have a problem: Every time I make changes to the SEO fields, the ACF fields, and Multiple content blocks on pages and try to click update, they won't save (Basically, fields that are added through customisations).
DETAILS:
I am just starting on making a theme, based on the starkers theme Blank slate (https://github.com/viewportindustries/starkers) and haven't gone that far yet.
I am running on Localhost via easyPHP
This problem is mostly Prevalent to Pages not posts (Posts save SEO details, thankfully).
Changes to the Body content for pages still save.
I am suspecting it's something bad I did or something I haven't included yet on my functions.php file--- if there are any PHP experts here that could take a look, please, I'm begging your help. The functions.php code is just below:
Workaround: For ACF (Custom Fields) Entering Custom fields details on the generic WP custom field works (which isolates the problem on customisations on the theme). BUT this does not help the problem with WP SEO.
Workaround: For WP SEO, I had to change to another theme (premium theme, Batakoo) edit the SEO, and the SEO saves just fine. Switching back to the theme I was building, the SEO fields become read-only again.
I can't live on workarounds forever, I need fixes, so if anyone can help, please do.
THINGS THAT I'VE TRIED
Just to make sure we're on the same page and no one has to comment solutions that I've tried, here are the things I've already tried (but did not work) based on searching WP.Org for solutions to "Fields don't save on WordPress Pages":
I've had the database tables repaired via PhpMyAdmin
Removed extra spaces and additional comments in functions.php
disabled all plugins except the ones I'm testing (SEO)
<?php
require_once( 'external/starkers-utilities.php' );
/* Theme settings */
define('WT_DIR', get_template_directory_uri());
define('WT_TEMPLATE_DIR', get_template_directory());
add_theme_support('post-thumbnails');
register_nav_menus(array('wt-prime-menu' => 'Main Menu'));
function wt_nav() {
wp_nav_menu( array('theme_location'=> 'wt-prime-menu','container'=> false,'menu_class'=> 'nav navbar-nav navbar-right' ));
}
/* Actions and Filters */
add_action( 'wp_enqueue_scripts', 'starkers_script_enqueuer' );
add_filter( 'body_class', array( 'Starkers_Utilities', 'add_slug_to_body_class' ) );
/* Custom Post Types */
require_once( 'parts/cpt/cpt.php' );
/* Enqueue Scripts */
function starkers_script_enqueuer() {
wp_register_script( 'site', WT_DIR.'/js/site.js', array( 'jquery' ) );
wp_enqueue_script( 'site' );
wp_register_style( 'screen', get_stylesheet_directory_uri().'/style.css', '', '', 'screen' );
wp_enqueue_style( 'screen' );
}
function wt_scripts_and_styles() {
wp_enqueue_style( 'bootstrap', WT_DIR . '/css/bootstrap.min.css' );
wp_enqueue_style( 'whitetower', WT_DIR . '/css/wts.css' );
wp_enqueue_style( 'googlefonts', 'http://fonts.googleapis.com/css?family=Roboto:500,400|Raleway:600,900|Montserrat:400,700' );
wp_enqueue_script( 'bootstrap', WT_DIR . '/js/bootstrap.min.js', array(), '3.2.0', true );
wp_enqueue_script( 'wtnav', WT_DIR . '/js/snav.js', array(), '1.0.0', true );
wp_enqueue_script( 'flexslider', WT_DIR . '/js/flexslider.js', array(), '2.2.2', true );
wp_enqueue_script( 'modernizr', WT_DIR . '/js/modernizr.js', array(), '2.7.1', true );
wp_enqueue_script( 'googlefonts', WT_DIR . '/js/wt-webfonts.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wt_scripts_and_styles' );
/* Comments */
function starkers_comment( $comment, $args, $depth ) {
$GLOBALS['comment'] = $comment;
?>
<?php if ( $comment->comment_approved == '1' ): ?>
<li>
<article id="comment-<?php comment_ID() ?>">
<?php echo get_avatar( $comment ); ?>
<h4><?php comment_author_link() ?></h4>
<time><a href="#comment-<?php comment_ID() ?>" pubdate><?php comment_date() ?> at <?php comment_time() ?></a></time>
<?php comment_text() ?>
</article>
<?php
endif;
}
Nevermind... found it all out when I tested regular pages other than the front page. It seems to be having a problem with the way WordPress checks static page for a front page by using a "home.php".
Related
I'm successfully using the bootstrap modal package on our website (using wordpress), but the JS is loading on every page, and I only use it on 3 specific pages. I'm looking for the best way to load the JS only on the 3 specific pages in question. The site in question is: https://www.bakashana.org.
The three pages where the Modals operate are: https://www.bakashana.org/sponsor-a-young-woman, https://www.bakashana.org/grantees-with-sponsors, and https://www.bakashana.org/graduates
The Bootstrap package has two files: bootstrap.css and bootstrap.min.js. These files are placed in the css and js folders respectively in my child theme (/wp-content/themes/astra-child/css and /wp-content/themes/astra-child/js).
The Bootstrap is registered and enqueued in my functions.php file as follows:
function themeprefix_bootstrap_modals() {
wp_register_script ( 'modaljs' , get_stylesheet_directory_uri() . '/js/bootstrap.min.js', array( 'jquery' ), '1', true );
wp_register_style ( 'modalcss' , get_stylesheet_directory_uri() . '/css/bootstrap.css', '' , '', 'all' );
wp_enqueue_script( 'modaljs' );
wp_enqueue_style( 'modalcss' );
}
add_action( 'wp_enqueue_scripts', 'themeprefix_bootstrap_modals');
I'm a novice at JS and don't know where/how to add code to the functions.php file in order to call only for specific pages to load.
Thanks in advance!
So after some research I figured it out myself, mostly thanks to this link:
https://www.youtube.com/watch?v=Fw6VDOZYqrM
The code uses the if( is_page) as follows:
function themeprefix_bootstrap_modals() {
if( is_page( array (1071, 3725, 3814) ) ) {
wp_register_script ( 'modaljs' , get_stylesheet_directory_uri() . '/js/bootstrap.min.js', array( 'jquery' ), '', true );
wp_register_style ( 'modalcss' , get_stylesheet_directory_uri() . '/css/bootstrap.css', '' , '', 'all' );
wp_enqueue_script( 'modaljs' );
wp_enqueue_style( 'modalcss' );
}
}
I am making my first custom wordpress theme and am running into problems with functions.php
I am using bootstrap too so i want to include bootstrap stylesheets to wp i currently do it this way-:
style.css
#import url('css/bootstrap.css');
#import url('css/font-awesome.css');
I understand that i can use functions.php to do the same, so i wrote a custom function and tried to do it like this-:
functions.php
<?php
/* Theme setup */
require_once('wp_bootstrap_navwalker.php');
/* Add bootstrap support to the Wordpress theme*/
function theme_add_bootstrap() {
wp_enqueue_style( 'bootstrap-css', get_template_directory_uri().'/css/bootstrap.css' );
wp_enqueue_style( 'style-css', get_template_directory_uri().'/css/font-awesome.css' );
wp_enqueue_script( 'bootstrap-js', get_template_directory_uri().'/js/bootstrap.js', array(), '3.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_add_bootstrap' );
?>
This does not seem to work. Neither does functions.php load the wp jquery or the bootstrap.js
Can anyone shed some light onto this matter for me? I would be ever grateful. This is not a child theme its a custom theme.
Try registering your scripts before you enqueue them. For example:
function my_enqueue_scripts() {
// Register Bootstrap JS.
wp_register_script( 'bootstrap-js', get_template_directory_uri() . '/js/bootstrap.min.js', array( 'jquery' ), NULL, true );
// Enqueue Bootstrap JS.
wp_enqueue_script( 'bootstrap-js' );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );
I have a responsive Wordpress theme from "Elegant Themes" that works well, but there's a page that I wish to be non-responsive. I created a style sheet that successfully renders the site non-responsive, but I only want to it to use the said style sheet when a particular page template is used.
I've determined that the logic is probably executed it the functions.php file, and that I'll likely need to use "wp_enqueue_style", but I can't seem to crack it. Here's what I have right now (my addition is below Loads the main style sheet comment:
function et_nexus_load_scripts_styles(){
global $wp_styles;
$template_dir = get_template_directory_uri();
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) )
wp_enqueue_script( 'comment-reply' );
wp_enqueue_script( 'superfish', $template_dir . '/js/superfish.js', array( 'jquery' ), '1.0', true );
wp_enqueue_script( 'nexus-custom-script', $template_dir . '/js/custom.js', array( 'jquery' ), '1.0', true );
wp_localize_script( 'nexus-custom-script', 'et_custom', array(
'mobile_nav_text' => esc_html__( 'Navigation Menu', 'Nexus' ),
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'et_hb_nonce' => wp_create_nonce( 'et_hb_nonce' ),
) );
$et_gf_enqueue_fonts = array();
$et_gf_heading_font = sanitize_text_field( et_get_option( 'heading_font', 'none' ) );
$et_gf_body_font = sanitize_text_field( et_get_option( 'body_font', 'none' ) );
if ( 'none' != $et_gf_heading_font ) $et_gf_enqueue_fonts[] = $et_gf_heading_font;
if ( 'none' != $et_gf_body_font ) $et_gf_enqueue_fonts[] = $et_gf_body_font;
if ( ! empty( $et_gf_enqueue_fonts ) ) et_gf_enqueue_fonts( $et_gf_enqueue_fonts );
/*
* Loads the main stylesheet.
*/
if ( is_page_template('custom-pagetemplate.php') ) {
wp_register_style( ‘custom-style’, get_stylesheet_directory_uri() . ‘/customstyles.css’ );
wp_enqueue_style( ‘custom-style’ );
} else {
wp_enqueue_style( 'nexus-style', get_stylesheet_uri() );
}
}
add_action( 'wp_enqueue_scripts', 'et_nexus_load_scripts_styles' );
From what I can tell, I have my condition set up correctly using is_page_template, but it definitely isn't using the right style sheet to load the page.
Note: I posted this question to Elegant Themes' customization support board, and the moderator said that what I'm trying to do is possible, but it would necessitate a level of customization that would require me to hire a third party developer.
Having said that, if I'm missing something huge here and need to pick up a PHP book (I know very little about PHP), or shell out some cash to hire someone to get this done, please don't hesitate to set me straight. Otherwise, any input is much appreciated.
Thanks!
Sorry to jump the gun and answer my own question to quickly, but I got it working using the following code:
if ( is_page_template('custom-pagetemplate.php') ) {
wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/customstyle.css' );
} else {
wp_enqueue_style( 'nexus-style', get_stylesheet_uri() );
}
}
add_action( 'wp_enqueue_scripts', 'et_nexus_load_scripts_styles' );
My primary issue was that I was using get_stylesheet_directory_uri() instead of get_template_directory_uri.
This article helped me out a lot: How to enqueue a custom stylesheet via functions.php in WordPress
Thanks!
You can do something similar to this:
if(is_page($page)) {
// Load non responsive css
}
else {
// load normal css
}
http://codex.wordpress.org/Function_Reference/is_page
My current PHP code is working and styling my "Theme Options" page (located under the WP API Appearance menu) the way I want it to look, however...
The CSS stylesheet is also being applied to every other menu in the WP dashboard (such as affecting the "Settings > General-Options") page too. How am I able to go about applying the stylesheet just to my "Theme Options" page only and not tamper with anything else?
My stylesheet is named 'theme-options.css", located within a folder called "include" > include/theme-options.css. The code below is placed within a "theme-options.php" page.
<?php
// Add our CSS Styling
add_action( 'admin_menu', 'admin_enqueue_scripts' );
function admin_enqueue_scripts() {
wp_enqueue_style( 'theme-options', get_template_directory_uri() . '/include/theme-options.css' );
wp_enqueue_script( 'theme-options', get_template_directory_uri() . '/include/theme-options.js' );
}
I was placing the CSS & JS files separately from the building blocks of my page (just above that function). The code is now inside my page build function and I am now getting the results I was after.
Previously:
...
// Add our CSS Styling
function theme_admin_enqueue_scripts( $hook_suffix ) {
wp_enqueue_style( 'theme-options', get_template_directory_uri() . '/include/theme-options.css', false, '1.0' );
wp_enqueue_script( 'theme-options', get_template_directory_uri() . '/include/theme-options.js', array( 'jquery' ), '1.0' );
// Build our Page
function build_options_page() {
ob_start(); ?>
<div class="wrap">
<?php screen_icon();?>
<h2>Theme Options</h2>
<form method="post" action="options.php" enctype="multipart/form-data">
...
...
Solution:
// Build our Page
function build_options_page() {
// Add our CSS Styling
wp_enqueue_style( 'theme-options', get_template_directory_uri() . '/include/theme-options.css' );
wp_enqueue_script( 'theme-options', get_template_directory_uri() . '/include/theme-options.js' );
ob_start(); ?>
<div class="wrap">
<?php screen_icon();?>
<h2>Theme Options</h2>
<form method="post" action="options.php" enctype="multipart/form-data">
...
...
You could only add the css file if the current page is your special page by checking the page before, e.g.:
if (is_page('Theme Options')) { // check post_title, post_name or ID here
add_action( 'admin_menu', 'admin_enqueue_scripts' );
}
=== UPDATE ===
Maybe it is better to check in the function:
<?php
// Add our CSS Styling
add_action( 'admin_menu', 'admin_enqueue_scripts' );
function admin_enqueue_scripts() {
if (is_page('Theme Options')) { // check post_title, post_name or ID here
wp_enqueue_style( 'theme-options', get_template_directory_uri() . '/include/theme-options.css' );
}
wp_enqueue_script( 'theme-options', get_template_directory_uri() . '/include/theme-options.js' );
}
OK, so this is in my functions.php file: (the following is the edited version to utilize cool's answer below. I'm leaving the original afterward:
function mdg_setup_scripts() {
wp_register_script( 'hoverIntent', get_bloginfo('template_url').'/js-custom/hoverIntent.js', array( 'jquery' ));
wp_enqueue_script( 'hoverIntent' );
wp_register_script( 'mdMenuAnimation', get_bloginfo('template_url').'/js-custom/mdMenuAnimation.js', array( 'jquery' ));
wp_enqueue_script( 'mdMenuAnimation' );
}
add_action( 'wp_enqueue_scripts', 'mdg_setup_scripts' );
Here's what I originally had:
function mdg_setup_scripts() {
wp_register_script( 'hoverIntent',
get_bloginfo( 'template_url' ) . '/js/hoverIntent.js',
array( 'jquery' ),
false,
true );
wp_register_script( 'mdMenuAnimation',
get_bloginfo('template_url') . '/js/mdMenuAnimation.js',
array( 'jquery', 'hoverIntent' ),
false,
false );
if (!is_admin()) {
wp_enqueue_script( 'mdMenuAnimation' );
}
}
add_action( 'init', 'mdg_setup_scripts' );
The js files are present in the indicated folder.
But no JavaScript at all is loading on the front end.
I'm doing something wrong, but what?
Do I need to register jquery (I thought WP had jquery in it, though)?
Do I need to separate the enqueue call? Do I need to add something to my header.php?
You dont need to add jquery. If it is not added, and if your custom script depends on it (like you wrote in code) it will be added by wordpress.
This code will work (i just tested it) but..
Instead of this:
if (!is_admin()) {
wp_enqueue_script( 'mdMenuAnimation' );
}
wordpress recomed that you use hooks:
Wordpress-codex: Use the wp_enqueue_scripts action to call this function, or admin_enqueue_scripts to call it on the admin side.
So it should be something like this:
function my_scripts_method() {
wp_register_script( 'somehover', get_bloginfo('template_url').'/js-custom/hoverIntent.js', array( 'jquery' ));
wp_enqueue_script( 'somehover' );
}
add_action('wp_enqueue_scripts', 'my_scripts_method');
Wordpress-codex: by using the wp_enqueue_scripts hook (instead of the init hook which many articles reference), we avoid registering the alternate jQuery on admin pages, which will cause post editing (amongst other things) to break after upgrades often.