Drupal 7 - Adding blocks to a page - php

This is my current set up.
I have created a new custom theme with the following regions.
regions[header] = Header
regions[content] = Content
regions[footer] = Footer
page.tpl.php
<div id="Header">
<div class="row">
<div class="span12" style="text-align:center;padding-top:20px;">
<div><img src="logo.png" width="150" height="150" alt="KT Logo"></div>
</div>
</div>
<div class="row"> </div>
</div><!-- /Header -->
<div id="Navigation">
<div class="row" style="text-align:center;">
<div class="span12" style="text-align:center;">
<?php print render($page['header']); ?>
<hr class="style-two">
</div>
</div>
</div><!-- /Navigation -->
<div id="Content">
<div class="row"> </div>
<div class="row">
<div class="span8 offset1">
<h1><?php print $title; ?></h1>
</div>
</div>
<div class="row"> </div>
<div class="row">
<div class="span10 offset1">
<?php print render($page['content']) ?>
</div>
</div>
<div class="row"> </div>
</div><!-- /Content -->
<footer>
<div class="row">
<div class="span12">
<img src="separator.png" alt="separator">
<?php print render($page['footer']); ?>
</div>
</div>
<div class="row"> </div>
</footer>
</div><!-- /container -->
This all works well and I have created several basic pages fine. The problem comes when I want to have a custom "content type" with 2 blocks on a page, one with main content on left, one with a sidebar on right. Now I'm not completely understanding how the regions work.
I am wanting something like the sidebar_second effect but I'm not sure how it would set in with my widths. Here is a screenshot of my regions. http://goo.gl/XFVnl
So I think I need to change the way my content region is displayed so that it can include the sidebar region?
Thanks for any help

Content-type specific templates are usually node.tpl.php files, and page templates are page.tpl.php files.
page.tpl.php file is already included when you are using a node.tpl.php
First, add ALL the regions to the .info file of them theme. This directly affects which regions are available in blocks administration page.
It's not necessary to have all the regions you defined (in .info file) to present in all page.tpl.php files.
As you have 3 regions in the page.tpl.php file, leave it and it will continue to work.
But to override the page.tpl.php for specific node types, you will have to set them in the theme's template.php file. You simple "ask" Drupal to use this page.tpl.php file is node type is a "page" (for example).
Add this to your template.php file. Drupal will not look in to page--node-book.tpl.php file for an alternative page.tpl.php file if the node type is (machine name) is "book".
<?php
function themename_preprocess_page(&$variables) {
if (!empty($variables['node'])) {
$variables['theme_hook_suggestions'][] = 'page__node_' . $variables['node']->type;
}
}
?>
Now you can copy the page.tpl.php file to page--node-[type].tpl.php and make your changes there. Whatever you put in this file will be used for page template for that node type.
(Note: 2 hyphens between "page" and "node", and one between "node" and "[type]")
Remember to clear caches if you can't see the changes.

I believe the first step is to declare a sidebar region in your .module file along with your other regions even if it will not be displayed on every page.
In your page template you can check (psuedo-code)
if (isset($page['sidebar'])) {
<div sidebar float left theme this how you want>
print render($page['sidebar']);
</div>
}
Now when you create a block you can specify a specific path for it to show up on or a specific content type for it to show up on. The code above will check if the page has a block in your sidebar and render it accordingly.
You will probablly be more likely to get answers if you post on drupal stack exchange.
https://drupal.stackexchange.com/

Related

Custom page template works fine on local host but doesn't show up online

I created a custom page template for a wordpress theme , as long as I had the theme installed locally page was displayed and showed within it the custom post type associated with it , but when I loaded online theme and I created the page by selecting the template to be used the page content doesn't show up.
It seems that by selecting the page template is not created the page with this template , but creates a page with the content of the index.
this is my page code with the loop that shows a custom_post_type
<?php
/*
*Template Name: Partecipanti
*Description : Pagina che raggiude tutte le associazioni partecipanti
*/
?>
<?php get_header(); ?>
<div id="partecipanti" class="content-container row">
<h2 class="titolo-pagina"><?php the_title(); ?></h2>
<?php
$wpquery = new WP_Query(array(
'post_type' => 'partecipanti',
'posts_per_page' => -1,
));
while ($wpquery->have_posts()): $wpquery->the_post();
?>
<div class="container-partecipante col-lg-3 col-md-3 col-sm-4 col-xs-12 visible-xs">
<?php the_post_thumbnail() ?>
<h2 class="nome"><?php the_title() ?></h2>
</div>
<div class="flip-container container-partecipante col-lg-3 col-md-3 col-sm-4 col-xs-12 hidden-xs" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<?php the_post_thumbnail() ?>
</div>
<div class="back">
<h2 class="nome"><?php the_title() ?></h2>
<a class="glyphicon glyphicon-plus" href="<?php the_permalink(); ?>"></a>
</div>
</div>
</div>
<?php endwhile; wp_reset_query(); ?>
Maybe you just forgot set Page Template in page's edit? Or it was bugged - try delete template, save page (to auto-remove page template), upload template, set it again and save.
Also check if page template is at all used - for example place plain HTML test before <div id="partecipanti" class="content-container row"> and check if is displayed.
Have you the same WordPress version and plugins installed? Maybe you missed changed setting?
Try with simple page template, for example default full-width - are editor content is displayed?
Or maybe you have the same bug like me with latest WP version - when page is child (have parent page), it's bugged and page template doesn't work + page is outputed as post instead page.
Check file permisions in your theme folder

Displaying last 3 blog posts on wordpress custom theme

I have a custom theme I am working on in wordpress, and I want to display the last 3 blog posts made onto my home page. I also want to style certain information regarding each post differently, like have the month and year be a certain font, and the day be much bolder and different font as well, along with displaying like a sentence or less of the article, followed by a "..." and "read more" type of thing.
How do I pull data from the blog? I know there are certain wordpress functions that can get me this data but I haven't been able to quite figure out how to do it, I'm not really well versed in the wordpress php functions. Right now I just have it hard coded but it's annoying to have to retype everything when I make a new post. I know you can set to show however many blog posts on the settings->reading but I want to be able to fully customize how it looks.
Let me know any suggestions on how I should go about doing this!
<div class="bottom">
<div class="wrap-2">
<h2>Blog</h2>
<div class="content-div">
<div class="bottom_box">
<div class="btm-img"><h4>April <span>25</span><br />2014</h4></div>
<div class="right_block">
<p class="highlight2">blog title 1</p>
<p class="highlight3">lksj sldkf jsl lsdkfj sdklf sd</p>
Read More >
</div>
</div>
<div class="bottom_box">
<div class="btm-img"><h4>April <span>24</span><br />2014</h4></div>
<div class="right_block">
<p class="highlight2">blog title 2</p>
<p class="highlight3">lsdkjf lsdk fjsl dkkddk lsdkfjpaskldfj;</p>
Read More >
</div>
</div>
<div class="bottom_box">
<div class="btm-img"><h4>April <span>23</span><br />2014</h4></div>
<div class="right_block">
<p class="highlight2">blog title 3</p>
<p class="highlight3">lksdjf slkdfjsldkfj;as dfklsd;j fsld;kfj</p>
Read More >
</div>
</div>
</div>
</div>
</div>
Try the snippet below. Use your custom HTML block (the one with botom_box class) instead of this used below.
<?php $posts = get_posts("numberposts=3"); ?>
<?php if($posts) : ?>
<?php foreach( $posts as $post ) : setup_postdata( $post ); ?>
<!-- your HTML block goes here --->
<div class="post">
<h3><a href="<?php echo get_permalink($post->ID); ?>" ><?php echo $post->post_title; ?></a></h3>
<?php the_excerpt(); ?>" rel="bookmark">read more</a>
</div>
<!-- end of the HTML block -->
<?php endforeach; ?>
<?php endif; ?>

Bootstrap Carousel and Google Maps and Advanced Custom Fields

I'm building a wordpress site (here: http://dev.tps.entropii.com/contact-us/) that requires a full page width google map on the contact page. The Business has two addresses so they effectively need two maps with a means to switch between them. I'm using Advanced Custom Fields plugin to give the user the functionality to update/edit their addresses.
Here's the problem. In order to give the functionality to switch back and forth between the two maps I decided to put them inside a twitter bootstrap carousel. One slide for each map. This works as expected with one problem. The map that is contained within the inactive slide (e.g. the slide that doesn't have the class 'active' on page load), doesn't seem to fully load. If I put the maps side by side on the page without the carousel they load no problem.
Because I'm using advanced custom fields, the maps are being loaded using php. Here's the HTML/php from my template file:
`
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<!-- map 1 -->
<?php $map1 = get_field('map_1'); if( !empty($map1) ): ?>
<div class="acf-map" id="map1">
<div class="marker" data-lat="<?php echo $map1['lat']; ?>" data-lng="<?php echo $map1['lng']; ?>"></div>
</div>
<?php endif; ?>
</div>
<div class="item">
<!-- map 2 -->
<?php $map2 = get_field('map_2'); if( !empty($map2) ): ?>
<div class="acf-map" id="map2">
<div class="marker" data-lat="<?php echo $map2['lat']; ?>" data-lng="<?php echo $map2['lng']; ?>"></div>
</div>
<?php endif; ?>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#map-carousel" data-slide="prev"></a>
<a class="right carousel-control" href="#map-carousel" data-slide="next"></a>
</div>`
My suspicion is that because the inactive slides of the bootstrap carousel are set to display none, that the content isn't being loaded int he first place properly. However I'm completely stabbing in the dark. Can anyone shed any light on this?
Let me know if you ned any more info. Thanks,

Wordpress 3.8.1 TinyMCE does not seem to be rendering my pages' <div> elements

I've created several pages in wp-admin and inserted the needed HTML. Each page contains multiple nested div elements. An example of one of my pages is the following Contact page:
<div id="content">
<div id="inner-content" class="row clearfix">
<div id="main" class="large-12 medium-12 columns clearfix" role="main">
<strong>Artist Name</strong>
<div class="clearfix"></div>
<a class="email" href="mailto:example#gmail.com">Email Artist</a>
<h3 class="team-title">Artist's Team</h3>
<ul class="team-list">
<li>
<strong>Sarah</strong><p class="team-role"> : Fine Art Agent</p>
<p class="company">Some Agency, NYC</p>
<a class="email" href="mailto:example#gmail.com">Email Sarah</a>
</li>
<li>
<strong>Justin</strong><p class="team-role"> : Manager</p>
<div class="clearfix"></div>
<a class="email" href="mailto:example#gmail.com">Email Justin</a>
</li>
<li>
<strong>Jesse</strong><p class="team-role"> : Publicist</p>
<p class="company">Another Art Agency</p>
<a class="email" href="mailto:example#gmail.com">Email Jesse</a>
</li>
</ul>
</div> <!-- end #main -->
</div> <!-- end #inner-content -->
For this Contact page I have chosen the Contact (contact.php) template for it in the Page Attributes > Template dropdown menu like so:
And the contents of the contact.php are:
<?php /* Template Name: Contact */ ?>
<?php get_header(); ?>
<?php get_footer(); ?>
For some reason when I go to view the Contact page, all I see is the header and footer. All of the HTML code get's ignored by Wordpress. Why is this happening? And how to fix it?
well your contact.php is missing the post output, the minimal code should be something like that
<?php the_post(); the_content(); ?>
e.g. set the first post as current (skipping the loop) then output its content. though as you added plain html to the page content (often seen as a no-no) it maybe better to directly echo content like that:
<?php the_post(); global $post; echo $post->post_content; ?>
that way you skip wordpress filters that add paragraphs etc. to the content.

Full Width colour sections but not full width page content

I am using Bootstrap but under the roots.io wordpress template using a 'wrapperless theme'
i am trying to achieve this http://roots.io/ - where there are sections of colour but the page content itself isn't full width.
the answer I have been given is to make the container class 100% - but this just makes all the content full width.
Im really stuck and ive been trying to figure this out for hours. - I know that sounds noobish and it is, but I can't get past this point.
all the page templates take their its style from base.php, code here
<?php get_template_part('templates/head'); ?>
<body <?php body_class(); ?>>
<!--[if lt IE 8]><div class="alert alert-warning"><?php _e('You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.', 'roots'); ?></div><![endif]-->
<?php
do_action('get_header');
// Use Bootstrap's navbar if enabled in config.php
if (current_theme_supports('bootstrap-top-navbar')) {
get_template_part('templates/header-top-navbar');
} else {
get_template_part('templates/header');
}
?>
<div class="wrap container" role="document">
<div class="content row">
<div class="main <?php echo roots_main_class(); ?>" role="main">
<?php include roots_template_path(); ?>
</div><!-- /.main -->
<?php if (roots_display_sidebar()) : ?>
<aside class="sidebar <?php echo roots_sidebar_class(); ?>" role="complementary">
<?php include roots_sidebar_path(); ?>
</aside><!-- /.sidebar -->
<?php endif; ?>
</div><!-- /.content -->
</div><!-- /.wrap -->
<?php get_template_part('templates/footer'); ?>
</body>
</html>
so Im just not sure how to get past it in any of the page templates
About the first part of your question: "100% width colored parts".
Cause Bootstrap use the box-sizing: border-box model every html-element gets 100% width of its parent by default. So wrap your .container div's in other element (div, header, etc). This wrapper is a direct child of the body and gets 100% width. See: http://bootply.com/87196
<header role="banner" class="banner">
<div class="container" style="background-color:red;">
Header example
</div>
</header>
<div style="background-color:blue;">Elements get 100% width by default</div>
The second part about your page templates. The code you show use the get_template_part(). This function is a core function of WordPress. See http://codex.wordpress.org/Function_Reference/get_template_part#Using_loop.php_in_child_themes. You will find where your templates should be located.
But i think read http://roots.io/roots-101/#theme-templates first.
Thank you, I had a few solutions offered to me yesterday also, in case anyone else looks at this.
my own was simply to remove the .container class from the base.php file. - this just stopped the content of every page being constrained in a container by default. - this way I was able to add sections to the page at full browser width, and add .container inside them to constrain the actual content.
lines 16 and 17 of original base.php
<div class="wrap <?php if ( ! is_front_page() ): ?>container<?php endif; ?>" role="document">
<div class="content <?php if ( ! is_front_page() ): ?>row<?php endif; ?>">
In app.less
.home .main {
padding: 0;
}
Then add your sections like so:
<section class="semantic-section-class">
<div class="container">
<!-- your content -->
</div>
</section>

Categories