How to create a WordPress theme that use BootStrap? - css

I am pretty new in WordPress and totally new in BootStrap development (I have beginning to study BootStrap yesterday) and I have the following doubt about how create a custom WP template that use BootStrap from 0.
For example I have the source of this page made using BootStrap: http://www.html.it/guide/img/bootstrap/demo/home.html
and I want try to create a WP template starting by it.
Some time ago I have realized a standard HTML\CSS template for WP, can I use the same tecnique dividing the previous page into (header, footer, content, etcetc) and the put in these section the WP php code to show articles and other WP functions?
Is it the right way?
The other doubts is related to the upper slideshow, in this slideshow the immage are fixed and definied in a static way:
<!-- Sezione slider con Flexslider -->
<div class="row">
<div class="col-sm-12">
<div id="main-slider" class="flexslider">
<ul class="slides">
<li>
<img src="assets/img/flexslider/flex-1.jpg">
<div class="flex-caption">
<p class="flex-caption-text">
<span>Lorem ipsum</span><br>
<span>sit dolor</span><br>
<span>adipiscing elitur</span>
</p>
</div>
</li>
<li>
<img src="assets/img/flexslider/flex-2.jpg">
<div class="flex-caption">
<p class="flex-caption-text">
<span>Lorem ipsum</span><br>
<span>sit dolor</span><br>
<span>adipiscing elitur</span>
</p>
</div>
</li>
<li>
<img src="assets/img/flexslider/flex-3.jpg">
<div class="flex-caption">
<p class="flex-caption-text">
<span>Lorem ipsum</span><br>
<span>sit dolor</span><br>
<span>adipiscing elitur</span>
</p>
</div>
</li>
</ul>
</div><!-- /.flexslider -->
And what can I do if I want that the administrator can choose the immages that should be displayed from the backend (I think in the theme configuration panel)
Can you give me some ideas about how do these things?
Tnx
Andrea

I'm not 100% sure this will cover all your questions, but using Bootstrap with WP is the same as creating a regular theme with WP, you just include the additional bootstrap files and then use the relevant classes in your markup. Apparently there's also a plugin you can use: http://wordpress.org/plugins/wordpress-bootstrap-css/
The biggest difference is how to you will handle the menu-I usually use this walker to generate the it, and then I can use the default Bootstrap menu styles: https://github.com/twittem/wp-bootstrap-navwalker.
As for the carousel, try this: http://www.lanexa.net/2012/04/how-to-make-bootstrap-carousel-display-wordpress-dynamic-content/

Related

WordPress adding paragraph tag around image

First, I am new to WordPress, second I have read all of the posts, blogs, etc. related to this issue and so far nothing makes sense.
I have a simple three page site. All three pages use this basic code at the top of the page to display a banner type image:
<div class="banner-section" style="background-image: url('/wp-content/themes/company/images/home-banner.jpg');">
<div class="banner-content align-centered" style="padding-top: 12.05%;">
<div class="row">
<div class="medium-6 small-6 columns"><img src="/wp-content/themes/company/images/home-banner-k-logo.png" /></div>
<div class="medium-6 small-6 columns"><img src="/wp-content/uploads/2018/10/company-new-combined.png" /></div>
</div>
</div>
<img class="main-img" src="/wp-content/themes/company/images/home-banner.jpg" />
</div>
Two of the pages work just fine. ONLY ONE of the pages, the contact form page, WordPress is wrapping the image in a paragraph tag. Why only this page? I could hack it by wrapping it myself and set some CSS to remove the margins. But why? Why would WordPress be inconsistent here?
WordPress automatically inserts <p> and </p> tags which separate content breaks.
To disable the wpautop filter, you can use:
remove_filter('the_content', 'wpautop');
It is might be because you are using contact form plugin or something , anyway you can add your own style but please do it on the child theme.

Fill in text in HTML5

I have a simple question: I am currently creating my portfolio in html
I wish that by clicking on the image, I can write the description of my choice. For the moment it shows me this:
I give you the party of the corresponding code below.
Thank you again for your help !
<!-- item -->
<div class="project-item">
<!-- ==> Put your thumbnail as a background -->
<a href="img/portfolio/p2.jpg" class="project-thumbnail nivobox" data-lightbox-gallery="portfolio" style="background-image: url('img/portfolio/thumb-p2.jpg');">
<!-- project-description -->
<div class="project-description-wrapper">
<div class="project-description">
<!-- project name -->
<h2 class="project-title">Project Title</h2>
<!-- /project name -->
<span class="see-more">Project Tags</span>
</div>
</div>
<!-- /project-description -->
</a>
</div>
<!-- /item -->
I don't know what framework (if at all) you're using, but my go-to solution for creating websites, is MaterializeCSS.
And oh look, they got something that exactly matches what you want (as far as I can understand, let me know if it doesn't).
Here it is:
<!-- MATERIAL BOXED-->
<h1>MATERIAL BOXED</h1>
<img src="http://materializecss.com/images/sample-1.jpg" alt="" class="materialboxed" data-caption="Here is an image caption">
The only change that you must do in your code, is to import the Materialize library and jQuery necessary, all of which are in their official page.
Hope this can help you solve your problem, it might look a bit un-orthodox but it gets the job done, at looks pretty nice doing so ;)

how to fix wordpress logo multiple h1 tags

I have problem in my wordpress logo, when check in bing webmaster diagnostic tool, tell me i have multiple h1 tags, anyone know how to fix?
my site is https://xn--hxanfhlafbfwvgsh0akf7l.com and my wordpresss theme is colormag free version,
code is
<h1 class="logo">
<a href="https://xn--hxanfhlafbfwvgsh0akf7l.com/" title="Ηλεκτρονικό τσιγάρο νέα, κριτικές, συμβουλές στο άτμισμα" rel="home">
<img src="https://xn--hxanfhlafbfwvgsh0akf7l.com/wp-content/uploads/2016/12/Ηλεκτρονικό-τσιγάρο-νέα-κριτικές-συμβουλές-στο-άτμισμα-.png" alt="Ηλεκτρονικό τσιγάρο νέα, κριτικές, συμβουλές στο άτμισμα">
</a>
</h1>
Looks like it is in your template twice
<div
id="header-text" class="screen-reader-text"><h1 id="site-title">
</h1></div></div><div
id="header-right-section"><div
id="header-right-sidebar" class="clearfix">
<aside
id="text-2" class="widget widget_text clearfix"><div
class="textwidget"><h1 class="H1">
<img
src="http://www.xn--hxanfhlafbfwvgsh0akf7l.com/wp-content/uploads/2016/12/Ηλεκτρονικό-τσιγάρο-νέα-κριτικές-συμβουλές-στο-άτμισμα-.png" alt="Ηλεκτρονικό τσιγάρο νέα, κριτικές, συμβουλές στο άτμισμα"></h1></div>
So what you need to do, is locate where in your template it is putting it in twice, create a child theme, and remove one of those from the template
So you could do a search inside the them, for either site-title or class="H1" and you should then be able to find the template.
Hope that helps.

Customise Drupal View Output

Quite new to Drupal theming and need some help editing the markup a view outputs.
I know I have page templates, node templates, block templates; but what about views?! I choose the fields that are displayed in the results using views UI but that doesn't let me customise the outputted markup I want.
So for example, instead of this:
<div class="band propertysearch-results">
<section class="layout">
<ul>
<li>
<div><img src="" alt=""></div>
<div>
<h3>Location Name</h3>
<small>123 Leather Lane, London, NW1 123</small>
<p>oremque ad laborum et reiciendis eos quasi odit!</p>
</div>
<div class="results-info">
3 <span>Rooms</span>
View
Save
</div>
</li>
</ul>
Drupal is giving me:
<div class="view viewproerties">
<div class="view-content">
<ul data-thmr="thmr_46">
<li class="">
<div class="views-field views-field-field-photo" data-thmr="thmr_43">
<div class="field-content">
<img typeof="foaf:Image" src="http://findabode.d7/sites/default/files/mvenue1.jpg" alt="" data-thmr="thmr_16 thmr_17 thmr_18">
</div>
</div>
<div class="views-field views-field-title" data-thmr="thmr_43">
<span class="field-content">Leather Lane</span>
</div>
<div class="views-field views-field-body" data-thmr="thmr_43">
<div class="field-content"></div>
</div>
<div class="views-field views-field-field-rooms-1" data-thmr="thmr_43">
<span class="views-label views-label-field-rooms-1">Rooms: </span> <div class="field-content"><span data-thmr="thmr_22" class="devel-themer-wrapper">2</span></div>
</div>
<div class="views-field views-field-view-node" data-thmr="thmr_43">
<span class="field-content">view</span>
</div>
</li>
</ul>
</div>
</div>
So my question is how to I customise the outputted markup and how do I figure out what the variables for each field is called?
Do I make these changes in a tpl file or somewhere else?
Theming the output of views in Drupal is somewhat tricky, depending on the types of fields you have used and the kind of output style you have chosen to create the view.
You will need to learn about Views Templating in order to override the specific templates that your particular view is utilizing to render the output.
In order to customize the output , you need to implement custom template for views , that would override the default rendering of views
If you are creating a view, then views let any theme to overwrite at different levels
Display Output
Style Output
Row style output
Field Content
Here is the quick tutorial on how to theme views
Overriding drupal views
You can also use the Views interface to adapt the markup to what you need:
With the Style Settings you can alter the field markup including its container and label:
Or you can use the Rewrite Results to customize your markup and using tokens for the fields values.

HTML5 semantic vs styling issue

I'm trying to build a Wordpress theme, using media queries for responsive layout. I have some issues around getting the correct layout whilst maintaining some semantic mark up.
Basically, for the post date in pages less than, say, 764 pixels wide, I want to have the date, bullet, and post category displaying inline; if the page is above this size, then the post date should display as a column (entry-date), alongside the main post column (main-column).
I think I've managed to get there, but just wondered if this html code was valid, as I've tried to keep header and footer sections within the post to make it make sense semantically.
Does anyone have any feedback?
Thanks,
John
<article class="post">
<div class="entry-date">
<span><span>30<sup>th</sup></span> Sep 2013</span>
</div>
<div class="main-column">
<span class="bullet">●</span>
<header class="entry-header">
<span class="entry-category"><a href="#">Cars</span>
<h1 class="entry-title">A new car from Ferrari</h1>
<span class="entry-authors vcard">by John Smith </span>
<div class="featured-img"><img src="img/ferrari.jpg" class="" alt=""></div>
</header><!-- .entry-header -->
<div class="entry-content">
<p>Ferrari have released a great new car, which is very fast.</p>
<span class="continue-reading">Continue reading</span>
</div><!-- .entry-content -->
<footer class="entry-meta">
<span class="entry-tags"><a href='#'>Sports cars</a></span>
</footer><!-- .entry-meta -->
</div>
</article><!-- #post-1234 -->
The comment's are completely off, validation has nothing to do with semantics, that's a totaly different subject. Semantic is about giving meaning to your code.
Currently you have this
<div class="entry-date">
<span><span>30<sup>th</sup></span> Sep 2013</span>
</div>
This would be more semantic, avoid using unnecessary tags(don't add tags only for styling, look for css solutions).
<div class="entry-date">
30<sup>th</sup>Sep 2013
</div>

Resources