Inline css for making a wordpress theme - php

I am creating a wordpress theme and all the css is working fine. However I implemented a bootstrap jumbotron slider where basically I have 3 divs and each div has an inline style in the index.php file with it's own background image.However, my wordpress theme does not recognize any styles that I implement straight into index.php
Any solutions or work arounds?

WordPress by default strips out any code that may be considered "code" or malicious. Yet, there are ways to add inline code to a WordPress without WordPress Plugins to overwrite the default functionality of WordPress. For example, As you didn't provided any code, so here is just an example.
<h2>Header</h2>
Here is how you can do it with inline css
<h2 style="color:red;">Header</h2>
The issue with Inline CSS is it’s really only used for one-off occasions! You would never really use this to apply a consistent feel across all your pages.
P.S This is most important, don't forget to include your bootstrap.min.css file in your wordpress function.php

Related

Correct way to create WordPress Gutenberg Blocks using third party libraries

I'm currently getting into coding gutenberg blocks for wordpress and something I came across and couldn't find an answer to yet is: How would you correctly create a gutenberg block that uses (for example) css and js from third-party libraries like Bootstrap / Material UI etc.
So if I would code a block that prints out a Bootstrap Carousel (https://getbootstrap.com/docs/5.2/components/carousel/), I would obviously need to make sure that the bootstrap css and js is loaded. Of course, I could enqueue the styles and scripts in my php code for my gutenberg block. But what if I later decide to create a second gutenberg block for a Bootstrap Card (https://getbootstrap.com/docs/5.2/components/card/) for example. I would yet again have to include the bootstrap css and js. How would I make sure it doesn't get loaded twice? Okay, sure, I'm currently in control of all that because I was the guy creating those two blocks. But what if I want to install a WordPress Plugin that provides a gutenberg block for a Bootstrap progress bar or whatever. That plugin would also in some way load bootstrap, right?
So I'm totally aware there is an answer to that and it is probably already answered inside some code of any "open source wordpress bootstrap gutenberg block plugin" (which totally exists, for example there is https://github.com/liip/bootstrap-blocks-wordpress-plugin), but reading the code I couldn't figure it out.
So any help would be appreciated.

Using PHP with Wordpress

I am currently trying to develop a website for fun just to practice. I have written some PHP code locally on my computer together with some css and html. My question is if anyone is familiar with Wordpress? And if so, am I able to import my php files and css into wordpress and use both code and the tools that wordpress has?
Thanks in advance!
Absolutely yes. The first thing you should do is create a child theme.
In it, you will have a style.css file in which you can add all your custom CSS.
Also in there will be a functions.php file. You can add custom PHP in there.
If you're looking to do something more complicated, then look into writing a plugin.
You can create templates on WordPress.
How to create a template
On this template, you can save your PHP.
To add CSS to WordPress you can do that by going to Appearance > Customize > Custom CSS.
The path to your Custom CSS section may be different depending on what theme you use.

Links in WordPress page body do not work

I am a newbie coder, so I apologize if this is an easy fix.
I am currently working on creating a website using WordPress 4.7.3. using a custom theme that a co-worker and I made ourselves. It is being currently being hosted on a desktop server.
On many of the pages, there are hyperlinks to other pages in the site and files (mostly PDFs). However, while the links have all of the appearance of being active, they are not clickable.
The links are coded in the body of the pages. Here is a sample of how they are coded:
A.Person
I have used a similar format when coding for the menu, which seems to be functioning properly.
Do you have any idea what may be the issue or where I can begin to look?
FYI: The theme only uses footer.php, header.php
index.php and a CSS stylesheet.
In Wordpress if you want to use the anchor tag, you need to call a function for the theme of Wordpress.
Normally you would have:
In WordPress you need to make a call to the theme folder first, and than you can go to your directories where images or files can be located.
a href="<?php echo get_template_directory(); ?> . '/images/myimage.png'); ?>
It's the same for stylesheets:
<img src="<?php echo get_stylesheet_directory_uri(); ?>/css/style.css"/>
For stylesheets and javascript it is the best to enqueue them in the functions.php. For more information:
https://developer.wordpress.org/reference/functions/wp_enqueue_style/
Thank you for all of your help. For some reason, there was an invisible image over the entire page. Once I was able to remove it, the website began to work again. I wish you the best!

Questions regarding wordpress

I am a developer who has never used wordPress before and just had a couple of questions about creating a custom theme
To create a specific look to a website do I create a static design then inter grate it with wordpress and add the dynamic content where it needs to be added?
If you create a custom theme how do you make it dynamic rather then being static? When I switch themes I loose the all the appearance menu options such as (menu, widget, header and background) How do i create them?
For stuff like image carousels if I want the images to be dynamic do I create a widget for it in the functions.php file?
For all the text on the page do I just spit that out thru the visual editor? seems to break links when editing
What are starter themes?
Sorry I am quite new to Wordpress but have knowledge in html, css, js and php but I just struggle to understand how to integrate a custom design and make it all dynamic
As a first step to create a basic new template I would recommend you starting with one of the default WP themes (e.g. Twenty Fifteen), leave all the core files (they contain dynamic parts e.g. functions loading header/footer/content) and just customize the css files and images. Further customization would require changing code in php files (e.g. header.php for the header, index.php for the homepage, single.php for the article page, etc.)
It is true that some options related to header, background, etc. can be theme dependant, so when you change it the configuration gets lost, but the others like menus and widgets remain like they are when switching themes.
Yes, for stuff like carousels you usually have to use custom widgets and plugins, you can find some really good ones on the web (e.g. this one), so you just upload the images and apply configuration in the backend.
Yes you use the WordPress editor (as you see it has Visual and HTML view) for all the user content within the pages and posts. Broken links might be cause of using relative paths, just make sure they are complete.
As mentioned in the first point you can always start with the default WordPress themes like Twenty Thirteen, Twenty Fourteeen, Twenty Fifteen etc.

How create a Wordpress template through a HTML/CSS page?

I would like to learn about wordpress.
Is possible to create a wordpress template through a HTML/CSS page ?
I'm taking an easy HTML page to start, so I install the XAMPP and then the lastest Wordpress.
Any help is very welcome.
Thank you very much.
ps: I'm searching something in Google though.
I'd recommend learning a bit of PHP since it really helps making your way around Wordpress files. Makes life a lot easier even if you're mainly editing HMTL/CSS.
Install Wordpress
Copy the defaut theme folder (twenty elevent) inside /wp-content/themes
Rename the folder to your theme
Open style.css inside it and change meta information in the header file
Edit away the php/style sheets as you like to modify the theme to match your style
header.php - contains the common header code, usually navigation etc (Edit everything but dont remove wp_header. You will need that tag for wordpress to work, same for wp_footer in footer.php)
index.php is the main content file, sidebar.php is the sidebar
But you can use all these files as you please, its normal php/mysql stuff.
This is very useful too - http://codex.wordpress.org/Pages#Creating_Your_Own_Page_Templates

Categories