I have created a custom page-template with child theme of Official WordPress twenty-seventeen theme.
However i have problem on mobile devices, the pages are not mobile friendly and i get the popup from chrome to make the page mobile friendly and indeed the content is not readable at all on mobile devices.
I am trying make it friendly using W3.css framework, how can i do the content mobile friendly with w3.css or just some css or any other library? Below is the code of the template. Here it is the template-page i use and is not mobile friendly.
<?php
/**
* Template Name: More info template
*
* Description: A custom template for displaying a fullwidth layout with no sidebar.
*
* #package Twenty Seventeen Child
*/
?>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div style="padding:5px;" class="wrap">
<div id="primary" class="content-area">
<main id="main info-template" class="site-main w3-padding" role="main">
<?php
while ( have_posts() ) : the_post();
get_template_part( 'template-parts/page/content', 'page' );
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
endwhile; // End of the loop.
?>
</main><!-- #main -->
</div><!-- #primary -->
</div><!-- .wrap -->
Either create another header and footer specifically for this template so header-new.php and call with:
get_header('new');
or else copy the content of the header.php and footer.php into the top and bottom of your template and remove the html elements that you don't need.
The following tags should NOT be ignored in a template:
<head> <html> wp_head(); and wp_footer();
Related
i want to make a page that is NOT the homepage a bit different from the others. I want that in the "middle" of the page there is no simple text or images, but rather a "complex" structure made of an array of divs with hidden sections that can be shown or not, so not the average wordpress content. I kinda made it in a simple local HTML page using bootstrap as framework, now i have to incorporate this into the wordpress page, but i don't know if wordpress CAN do it, using a closed source theme.
What i should do to achieve this?
At first, need to enqueue the bootstrap file into your theme. Then create a page template where you implement design it. Goto your WordPress Theme Directory edit functions.php and enqueue CSS & JavaScript.
/**
* Proper way to enqueue scripts and styles
*/
function bootstrap_assets() {
wp_enqueue_style( 'bootstrap', 'https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css' );
wp_enqueue_script('jquery');
wp_enqueue_script( 'bootstrap', 'https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js', array('jquery'), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'bootstrap_assets' );
After enqueue assets then need to create a page template into your theme folder. you can set it's your preferred name. I use this time name of file test.php.
<?php
/**
* Template Name: Test
*
* #package WordPress
* #subpackage Twenty_Fourteen
* #since Twenty Fourteen 1.0
*/
get_header();
?>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Your Custom Title here</h1>
<p>Your custom description here</p>
</div>
</div>
</div>
<?php
get_footer();
Successfully create page template after need to create a page then select your template & publish it.
If you want to push content via WordPress editor then use the below template.
<?php
/**
* Template Name: Test
*
* #package WordPress
* #subpackage Twenty_Fourteen
* #since Twenty Fourteen 1.0
*/
get_header();
?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
// Start the loop.
while (have_posts()) : the_post();
the_content();
// End of the loop.
endwhile;
?>
</main><!-- .site-main -->
<?php get_sidebar('content-bottom'); ?>
</div><!-- .content-area -->
<?php
get_footer();
In WordPress page, the <main> tags are wrapped by <p>s, but <div>s are not.
WordPress 4.7.12
Example 1: Using main tag
<main>
<div>this is main</div>
</main>
results
<p><main></p>
<div>this is main</div>
<p></main></p>
Example 2: Using div#main
<div id="main">
<div>this is main</div>
</div>
results
<div id="main">
<div>this is main</div>
</div>
Question
What is the trigger to wrap with <p>?
Remarks
My page.php is below.
<?php
/**
* #package WordPress
* #subpackage Default_Theme
*/
get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php remove_filter('the_content', 'wpautop'); ?>
<?php the_content('<p class="serif">' . __('Read the rest of this page »', 'kubrick') . '</p>'); ?>
<?php add_filter('the_content', 'wpautop'); ?>
<?php endwhile; endif; ?>
<?php get_footer(); ?>
<div> element is used to design to describe a container of data.
<p> element is designed to describe a paragraph of content.
<main> element represents the dominant content of the <body> of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.
Note: As we know <div> tag represents container and <p> tag represents paragraph of content so the can not lie in tag.
More details
It's defined in wp-includes/formatting.php#wpautop as disribed in this post.
I edited my formatting.php using the code in the post and the <p> is eliminated.
Open wp-includes/formatting.php
Find function wpautop in it.
Copy the function.
Open [your theme folder]/functions.php.
Paste 3 and rename wpautop to wpautop_fork.
Find the line defining $allblocks = '(?:table|thead|tfoot|caption|col|....
Add main (see the code below.)
Register wpautop_folk instead of wpautop.
My function.php becomes following code.
function wpautop_forked( $pee, $br = true ) {
//...
// Add 'main' at the tail.
$allblocks = '(?:table|thead|tfoot|caption|col|colgroup|tbody|tr|td|th|div|dl|dd|dt|ul|ol|li|pre|form|map|area|blockquote|address|math|style|p|h[1-6]|hr|fieldset|legend|section|article|aside|hgroup|header|footer|nav|figure|figcaption|details|menu|summary|main)'
//...
}
remove_filter('the_content', 'wpautop');
add_filter('the_content', 'wpautop_forked');
This Q&A is also helpful:
Stop Wordpress Wrapping Images In A “P” Tag
I had created a Wordpress news website. There are many sharing options implemented! I added WhatsApp and send the URL to WhatsApp and share to WhatsApp! The issue is, initially the post image is shown when I share the link in WhatsApp. But now the image is not showing while I share the link in WhatsApp! There are no issues while sharing on facebook! When I inspect the page source WordPress automatically gives og:image as the post feature image! But it does not show up in WhatsApp. But when I copy paste the same og:image to header.php I WordPress it works perfectly! Initially, I thought of the size problem while later I found out that size is as per the og:image meta tag standard.
Here i post the single.php code:
<?php
/**
* NewsGamer Theme
*
* Theme by: MipThemes
* http://themes.mipdesign.com
*
* Our portfolio: http://themeforest.net/user/mip/portfolio
* Thanks for using our theme!
*
*/
// load header
get_header();
// Get Page properties
$mip_current_page = new MipThemeFramework_Page();
// Update Post View
MipThemeFramework_Post_Views::update_post_views($post->ID);
// Load Custom post headers
get_template_part( 'elements/parts/post-header-'. $mip_current_page->page_template .'' );
?>
<!-- start:post-info-bar -->
<?php if ($mip_current_page->enable_post_info_bar) get_template_part( 'elements/post-info-bar' ); ?>
<!-- end:post-info-bar -->
<!-- start:page content -->
<div id="page-content" class="<?php echo esc_attr($mip_current_page->page_template_class); ?> clearfix">
<?php
//get sidebar
if ( ($mip_current_page->page_sidebar_template == 'left-sidebar')&&(!wp_is_mobile()) ) get_sidebar();
?>
<!-- start:main -->
<div id="main" class="main article">
<!-- start:article post -->
<article id="post-<?php echo esc_attr($post->ID); ?>" <?php post_class('article-post clearfix'); ?> <?php echo MipThemeFramework_Util::get_item_scope( $mip_current_page->review_post ); ?>>
<?php
if (have_posts()) :
// Get Template
get_template_part( 'elements/'. $mip_current_page->page_template .'' );
else :
// No Posts
esc_html_e('No posts.', 'newsgamer');
endif;
?>
</article>
<!-- end:article post -->
</div>
<!-- end:main -->
<?php
//get sidebar
if ( ($mip_current_page->page_sidebar_template == 'right-sidebar')||( ($mip_current_page->page_sidebar_template == 'left-sidebar')&&(wp_is_mobile()) ) ) get_sidebar();
?>
</div>
<!-- end:page content -->
<?php
// load footer
get_footer();
?>
I have had the same problem, everything worked fine in any opengraph testing tool and in the social sites themself's: facebook, twitter, ok, vk but in whatsapp & telegram not.
So after a lot of research, the problem was in our virtual site firewall that protects from site crawling by many logics, a couple of them is IP and User-Agent. The whatsapp & telegram are pinging sites to fetch og data are not throw their servers like social sites, but through your mobile operator's dynamic IP, but the user-agent is of the messenger itself, and it was in our automatically generated blacklist.
Check if you don't ban access to your site by theirs user-agents string that contains: WhatsApp/2.17.395 A or TelegramBot (like TwitterBot)
Wish it helped.
I created a new WordPress Template named "Footer page". When a new page is created in WordPress and the user selects the template "Footer page" the new page should not appear in the navigation bar.
I did some research and found something called "Exclude Pages from List" that says "Use the exclude parameter to hide certain Pages from the list to be generated by wp_list_pages." but have no idea where I should put it my template file? Or if this is the best way to exclude a template page from the navigation bar?
My code for footer-page.php is as follows:
<?php
/**
* Template Name: Footer page
*
* A custom page template that does not appear in the navigation bar.
*
* The "Template Name:" bit above allows this to be selectable
* from a dropdown menu on the edit page screen.
*
* #package WordPress
* #subpackage Twenty_Ten
* #since Twenty Ten 1.0
*/
get_header(); ?>
<div id="container" class="one-column">
<div id="content" role="main">
<?php
/* Run the loop to output the page.
* If you want to overload this in a child theme then include a file
* called loop-page.php and that will be used instead.
*/
get_template_part( 'loop', 'page' );
?>
</div><!-- #content -->
</div><!-- #container -->
<?php get_footer(); ?>
You can Try Like this:
if (is_page('1') || is_page('5')) {
// include template "sidebar.php".
get_template_part( 'loop', 'page' );
}
read this
i m working on wordpress with bootstrap theme.i m using a Main left-sidebar on my site.as i put the code into WIDGETS> MainSidebar but now i have a problem that on clicking a link i want to open another page having same as my home page but different sidebar.how can i achieve it??
Here is my Template for bootstrap:Page Template (page.php)
<?php
/** page.php
*
* The template for displaying all pages.
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages
* and that other 'pages' on your WordPress site will use a
* different template.
*
* #author Konstantin Obenland
* #package The Bootstrap
* #since 1.0.0 - 07.02.2012
*/
get_header(); ?>
<div id="primary" class="span9">
<?php tha_content_before(); ?>
<div id="content" role="main">
<?php tha_content_top();
the_post();
get_template_part( '/partials/content', 'page' );
comments_template();
tha_content_bottom(); ?>
</div><!-- #content -->
<?php tha_content_after(); ?>
</div><!-- #primary -->
<?php
get_sidebar();
get_footer();
/* End of file page.php */
/* Location: ./wp-content/themes/the-bootstrap/page.php */
You must have two different sidebars.
Put sidebar code in a custom template name them you like.
see how to Create custom template link
and use wordpress conditional tags like.
if(is_page( 2 )){ // 2 is page id
get_template_part( 'custom', 'sidebar' ); // (custom-sidebar.php)
}
else{
get_sidebar();
}
conditionnal tags
By this way you can have 2 sidebars on different pages.