Starting with some basic Wordpress Bootstrap Themes I'd like to modify the width for Posts and Post links. This is more get-to-know-WP than heavy duty theme creation - I am mostly interested in how to apply minor customizations like this across different themes. I know each theme can kinda pick which PHP files it wants to provide, so I know what works in Theme A won't necessarily work in Theme B.
I've already done this once for one theme, but now the other theme doesn't have the same PHP file names.
For example, I know that to make the widget area narrower for posts, I want to override sidebar.php:
<!-- <div id="secondary" class="widget-area col-md-4" role="complementary"> -->
<div id="secondary" class="widget-area col-lg-2" role="complementary">
And modifying index.php makes the left-side wider:
<!-- <section id="primary" class="content-area col-md-8"> -->
<section id="primary" class="content-area col-lg-10">
<div class="tmarker">index.php</div> <!-- I added this! -->
This works fine when I am at the root of my site, as index.php is getting used.
However, when I navigate to a Post, I am back to:
<div id="primary" class="content-area col-md-8">
and my post area hasn't expanded. This makes sense - index.php isn't used here.
How do I know which PHP file is getting composed into that post detail view so that I can override it?
I've tried looking for 'index.php' in the page source, but I only saw the one I added myself on my child override.
I guess I could just look at all the PHPs in the editor and find all the class="content-area col-md-8" and trial and error them till I hit the right one. Not much fun. Are there better ways?
Could I at least dump all of those PHPs to files and grep for col-md-8? I'd need a text export for themes.
P.S. I know Wordpress child customizations are best done in style.css and functions.php, but unless I missed something, with Bootstrap, I think I really need to hit those class assignments for Bootstrap to do the work instead.
The question here addresses something similar.
You can store the template name into a global variable and echo it into the footer. This should tell you what template file is being loaded (index.php, page.php, etc).
The code below should be added to functions.php.
add_filter( 'template_include', 'var_template_include', 1000 );
function var_template_include( $t ){
$GLOBALS['current_theme_template'] = basename($t);
return $t;
}
add_action( 'wp_footer', 'get_current_template' );
function get_current_template() {
if( !isset( $GLOBALS['current_theme_template'] ) )
return false;
echo $GLOBALS['current_theme_template'];
}
There's lots of tips and strategies, but one that is a "A quick-and-dirty way":
Most decent themes add a class to the body element that reflects which theme template is being used. If you inspect the body element, you should be able to see which template is being used (for example page-template-default, etc).
If your theme breaks down further than simple template levels, then you'll have to start examining the code in the given template(s) to figure out which code is running, etc.
Related
I'm absolutely new to WordPress theming but I decided to learn on the job and I really want the site to go live within the next week or so. I've stuck to a simple index.php (no templates or template-parts). I'm able to receive the contents in the proper format which they were published (with inline images, line breaks, etc.) but the css styling is absent. What could I be doing wrong?
<article <?php post_class(); ?> id="post-<?php the_ID(); ?>">
<div class="entry-content">
<?php
$content = wpautop(get_the_content());
echo $content;
?>
</div>
</article>
I realize there is a difference between the singular view and the list view (the loop). The list view doesn't actually style the content by default. Could that be where my problem lies, and if so, what's the best way to get around this problem?
EDIT
Essentially, I want the singular view (singular.php) within the index.php. When you visit the site you're greeted by an entire article, not previews and listings. So I don't actually need the loop for now. I simply retrieve the post and display the contents on the index page.
That is literally the only thing keeping my site from going online right now. I just need that article to be styled as it's supposed to be. There are only two files in my theme: index.php and style.css. I've already tried the_content(), I've also tried apply_filters('the_content', get_the_content()), to no avail. wpautop(get_the_content()) was the closest thing to styled I could get. I am retrieving the post using the_post() for now, could that be the issue, and if so, which is the best way to retrieve a post?
I have tried retrieving the post in various ways and it's still unstyled, so I decided to inspect the elements in the browser and found that WordPress is indeed attaching a class to the elements but just where on earth is that class? I read somewhere about a css reset being the possible cause -- how does one bypass any css reset issues?
It turns out it was just a header issue. Solved by adding:
<head>
<?php do_action('wp_head'); ?>
</head>
This is with respect to a buddypress addon (plugin) whose theming I am unable to do. I searched many sites but unable to get a concrete solution. In the plugins page, Header is getting disturbed if its a buddypress theme but is working fine in default wordprress themes.
I am using this code at present at the top of the template page
<?php get_header('buddypress'); ?>
<div id="buddypress">
<div id="profile">
<div class="row">
Than the following stuff like
<?php do_action( 'bp_before_member_home_content' ); ?>
<div id="item-header" role="complementary">
<?php bp_get_template_part ( 'members/single/member-header' ) ?>
</div><!--#item-header-->
I feel this is not the right way to do. I want to know if the plugin has to copy the buddypress template header without disturbing footer or sidebar how it can be done. i.e my plugin should show only the plugin content and should not disturb any part of the buddypress template.
you have to edit your buddy press header with your html structure.
and keep buddy-press functionality as it is.
I have been building my first theme on WordPress and have run into problem while adding content into different sections.
My HTML is somewhat like this,
<div id="maintext">
<-- Text -->
</div>
<div id="products">
<-- Text and Images -->
</div>
<div id="about_company">
<-- Text boxes -->
</div>
How do I make sure the content added via the WordPress editor falls under the respective divs ? For the "maintext" div I'll load the content from the page itself but how do I add content to the other 2 divs dynamically ?
I searched on a couple of forums and many suggested to add content using widgets, is there any way it can be done without using widgets ?
Any help will be gladly appreciated.
Unfortunately adding multiple editable fields in a single page is not particularly easy using WordPress by itself.
Many WP devs I know (myself included) rely on the Advanced Custom Fields Plugin for additional content fields.
The steps to make this happen:
1) Install the ACF the plug.
2) In the settings area for ACF create some new fields.
3) Assign the new fields to appear for a specific page or set of pages.
4) Update your page-template for the given page(s) so that the new fields are displayed.
For instance you might create a set of standard wysiwyg fields and then assign them to the 'overview' page. Let's call these fields: main_text, products_info and about_company. Once the fields have been created and assigned to a page, when you edit that page the additional fields will be available to edit.
For these new fields to be seen by visitors, they must be added to the page-template you use for your overview page. The code could be something like this:
<div id="maintext">
<!-- Text -->
<?php if(get_field('main_text')){ //if the field is not empty
echo '<p>' . get_field('main_text') . '</p>'; //display it
} ?>
</div>
<div id="products">
<!-- Text and Images -->
<?php if(get_field('products_info')){ //if the field is not empty
echo '<p>' . get_field('products_info') . '</p>'; //display it
} ?>
</div>
<div id="about_company">
<!-- Text boxes -->
<?php if(get_field('about_company')){ //if the field is not empty
echo '<p>' . get_field('about_company') . '</p>'; //display it
} ?>
</div>
There are lots of good examples here. If you are feeling really ambitious, rather than install the plugin you could even include ACF directly in your theme.
You've got three options I believe:
Create a widget area where you can then display the content in a text widget: http://codex.wordpress.org/Function_Reference/register_sidebar
Create a template where you then get the content of a different page: http://codex.wordpress.org/Page_Templates#File_Folders
Create a new meta box for all your pages: http://codex.wordpress.org/Function_Reference/add_meta_box
I believe that the thing you are looking for is option 2. The others are more full-site oriented, if you want the extra content to show up on every single page.
If you are writing the theme, maybe you would like to consider using a WordPress Framework so you don't have to start from scratch.
If that is not the case, think of the end user. How will they add sections to pages and posts? Will they have to move across places within the WordPress UI, or would they rather user short codes?
My recommendation is to build a plugin that render the section within the document content. Or widget content if that is the case.
I wrote a little piece of code to illustrate how you can accomplish such a thing, and also because I kind of need it right now :D. You can find it on github here https://github.com/lionpage/Front-Office-Document-Sections
Hope this helps
<div id="maintext">
<?php the_content(); ?>
</div>
<div id="products">
<?php // echo wp function to get product data; ?>
</div>
<div id="about_company">
<?php // echo wp function to get about companydata; ?>
</div>
I've run into this issue several times now, and while the question is 3 years old, I think it's still rather current. I've succesfully used the Multiple Content Blocks plugin sometimes now:
https://ltz.wordpress.org/plugins/multiple-content-blocks/
After installing the plugin, you can just include the_block in your template:
<div id="maintext">
<?php the_content(); ?>
</div>
<div id="products">
<?php the_block('products') ?>
</div>
<div id="about_company">
<?php the_block('company') ?>
</div>
hi im currently developing a theme with that set up.
there are two ways to achieve this:
widgetized and fixed admin panel (customizer options)
i am using the two in my themes
if widgets
create a .php file that includes the widgets sections
create a widget for that section
if fixed in admin panel
you have to include the .php section in your functions.php
edit * advantage of widgetized is you can arrange them just like in a regular sidebar
Was struggling with this, and did not want to use a plugin. The only WordPress native option I found was to use Custom Fields. This works, but only for text, and is rather cumbersome.
The other non-plugin option is to simply use HTML in the WordPress editor, but this is of course far from ideal either.
Finally I gave up, and opted for the Advanced Custom Fields plugin as well.
I have a file called page--advertsindex.tpl.php.. Now what i want to do is display that page inside the content region of page.tpl.php..
page--advertsindex.tpl.php contains the HTML which need's to be rendered in the content region of page.tpl but what it does currently when i navigate to my_drupal_site/advertsindex it only show's the html of page--advertsindex, not the page.tpl.php file and the page--advertsindex in the content region..
How can i do this? or is there a different way to achieve my goal?
Any page--<identifier>.tpl.php will be used instead of page.tpl.php for the url /identifier. That is by design and the entire purpose of this system. This can be extended for deeper paths too: page--foo-bar-baz.tpl.php for /foo/bar/baz.
If you want certain content to appear on /identifier, you have two options: Conditionally include the content or copy the content. What to choose depends on your situation.
Conditionally include: inside page.tpl.php:
<div class="footer">
<?php if (arg(0) == "advertsindex"): ?>
<?php print theme("advertsindex_disclaimer"); ?>
<?php endif; ?>
</div>
Overrides: introduce a page--advertsindex.tpl.php:
<div id="content">
<?php print $content ?>
</div>
When to choose what:
Only use conditional includes or conditional rendering when:
The content to be included or excluded is small and shared. Patterns like `[large 20+ line of frontpage HTML][normal HTML] are very bad.
The content to be included needs all sorts of fancy new variables pulled in. Patterns like are really bad. Drupals theme system is push (theme gets variables from modules) and never pull (theme requests parameters at modules).
In all other cases you'd use the overrides. And yes, that will include a lot of duplication, but that is by design and accepted as the default practice in Drupal. To avoid having to modify some HTML in 20+ files, "split" or "copy" them as late as possible.
A rule of thumb is that a conditional should be a few lines only and never require variables that are not available in the parent.
If advertsindex is would be one of your content type then you have to create node--advertsindex.tpl.php file instead of page--advertsindex.tpl.php. Or If you wont to display some content in the page.tpl.php page, then it is better to copy all code of page.tpl.php into YOUR-Custom_page.tpl.php and put your code inside the content section of YOUR-Custom_page.tpl.php.
I think it helps.
I am trying to create a Wordpress site. The design is Here
I have created most of the outline of the site, barring the 3 regions "Follow Us", "Self Employment" & "Into Work Consortium".
The client has told me he would like to make those 3 regions editable.
My template contains an Index file, Header & Footer File as well as the obvious CSS files.
I am using the "Multi Edit Plugin" Multi Edit Plugin but that guide, does it so that you create a CustomPage. I guess I could do that but what I want is my index.php file to be added to the admin side of the site and then point the template there or similar.
As it's getting a little frustrating working with multiple WP plugins that just don't seem to do the job correctly.
There are many ways to go about this: one being what was mentioned by Pekka and the other using Custom Page templates.
The above mentioned methods are, in theory, quite similar with subtle differences in terms of execution and inclusion.
Perhaps to better answer your question, I will provide a very brief sample outline below on Custom Post Templates. You may probably need to do a little more digging at Wordpress' Codex if you choose to further enhance anything else:
Custom Post Template Method
Referring to the wireframe provided in your image link, I propose that you use category filters to filter the associated posts to the right columns. So first up, you will need to create 4 categories for the method that I'm suggesting, namely: WELCOME, FOLLOW, SELF-EMPLOYMENT and CONSORTIUM.
After doing so, your index.php should look something like this:
INDEX.PHP
<?php get_header();?>
<!--container-->
<div id="container">
<?php query_posts('category_name=welcome&showposts=1'); ?>
<?php while (have_posts()) : the_post(); ?>
<!--top-content-->
<div class="top-content">
<h2><?php the_title();?></h2>
<p><?php the_content();?></p>
</div>
<!--top-content-->
<?php endwhile;?>
<!--bottom-content-->
<div class="bottom-content">
<!--follow-->
<div class="follow">
<?php include(TEMPLATEPATH . '/follow.php');?>
</div>
<!--follow-->
<!--self-employment-->
<div class="self-employment">
<?php include(TEMPLATEPATH . '/self-employment.php');?>
</div>
<!--self-employment-->
<!--consortium-->
<div class="consortium">
<?php include(TEMPLATEPATH . '/consortium.php');?>
</div>
<!--consortium-->
</div>
<!--bottom-content-->
</div>
<!--container-->
<?php get_footer();?>
What is happening here is that I'm doing a post query for posts tagged to the category "WELCOME" and filter the posts into the top-content DIV. Note that my loop starts right before of the top-content DIV and ends immediately after it. This will means that the loop will only affect that particular DIV. I have also set the post limit to "1", thereby restricting the display of posts to just the latest post.
Following on from there, you will notice that in the bottom-content DIV, I have included 3 different files for each column. These 3 files will be your custom post templates that you will need to create and have a post query to filter in the right post. An example of the custom post template will look something like this below:
FOLLOW.PHP
<?php query_posts('category_name=follow&showposts=1'); ?>
<?php while (have_posts()) : the_post(); ?>
<h2><?php the_title();?></h2>
<?php the_post_thumbnail('bottom-content-thumb');?> <!--you will have to enable featured image thumbs in your functions.php file before you can do this-->
<span class="read-more">Continue Reading</span> <!--there are other ways to do the read more link, but I'm just giving an example now so yeah-->
<?php endwhile;?>
The rest of the custom post templates for the bottom 3 columns should look something like the above. If there is any variation of style and all, you will probably have to shift things around and play around with the CSS.
I want to stress that this is not the one and only way to do what you hope to achieve, but rather, that it is one of the many. What I've suggested is only an example that hopes to provide some insights on how you can utilize Custom Post templates for developing Wordpress based sites.
My advice at the end of the day is to delve deeper into Codex and find out more about Custom Post/Page templates because eventually, they will come in very handy if you choose to make custom Wordpress templates.
Hope my post had made things a little clearer for you =)