I am new with wordpress so please feel free to point out any fundamental misunderstandings I have in the following question.
Problem: I have created the beginnings of a website using Html/css, but realized that I wanted to give my client more control over it so I wanted to convert it to wordpress so I can add customizable images/text and take advantage of wp plugins.
Solution: So I changed the name of my index.html to functions.php, and uploaded my index and stylesheet to wordpress. The only change I made was to change the address of my css file.
To correctly link my css file I have changed
<link rel="stylesheet" type="text/css" href="style.css">
to
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>"/>
Error: However, now my html is just showing up plain without change from css. What am I doing wrong here? (Also if you are experienced with wordpress I would love to message for 5 minutes to clear some misununderstandings I know I have)
Welcome to WordPress.
WordPress uses themes to show HTML and CSS structure. These are located in wp-content/themes.
I'm not sure where you're placing these files, but functions.php should not have any HTML structure in it at all. Think of functions.php as a list of instructions you're going to give WordPress on how to load components of your theme. My advice would be to undo what you've done so far.
A good place to start learning theme development is taking a look at the default themes that come with WordPress, like Twenty Seventeen and Twenty Twelve. Add your css to the stylesheets in those themes. Play with the structure of the header.
There are plenty of links around on how to build your own theme from scratch. I would link to them here, but they get cranky about links in answers.
The proper way to add styles to a WordPress theme is to enqueue them.
To enqueue "style.css" use this:
wp_enqueue_style( 'style', get_stylesheet_uri() );
If you wish to use a different CSS file, change the file name of 'style' and do not include the file extension.
Reference: https://developer.wordpress.org/themes/basics/including-css-javascript/#stylesheets
This answer to a similar question should help: https://stackoverflow.com/a/37391567/3130549
Related
I tried doing it by creating a css file style.css in the same folder, copied the source code of the bulma link provided and then linked it to my html doc. But then, it shows no css features at all.
Unfortunately you cannot edit resources that are hosted on our CDN. Many, many sites rely on these resources remaining intact and the same forever!
You can however modify the styling on your site whilst using this resource by first including it in your website's HTML (within in the head tag):
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" integrity="sha256-vK3UTo/8wHbaUn+dTQD0X6dzidqc5l7gczvH+Bnowwk=" crossorigin="anonymous" />
You can then modify this styling by creating a secondary CSS file locally alongside your site's HTML file, calling it my-styles.css for example. You can then also include that on your webpage by using another link tag within your head tag, after the link for bulma:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" integrity="sha256-vK3UTo/8wHbaUn+dTQD0X6dzidqc5l7gczvH+Bnowwk=" crossorigin="anonymous" />
<link rel="stylesheet" href="my-styles.css" />
Hope that helps with what you are trying to achieve!
- Matt.
Community Manager # cdnjs.com
Although I didn't achieve what I was trying to do, I guess the only solution is either copying the exact design provided via Bulma link or ending up writing the whole css code all by own which I don't really prefer until essentially needed. So, I'd rather stick to the pre-defined design provided by Bulma.
I'm pretty much new to all of this and for the past days I've been working on my first Website using bootstrap. Locally, this works fine, but right now, when trying to get it up online, it looks like this:
http://wearemanjaro.de
Just ugly html, no css nor any images are loading.
I made the link above link to the html which is in the /manjarowebsitebootrap/robots/index.html path. The CSS (bootstrap and custom) is in the following directory: /manjarowebsitebootstrap/css/...
The link to CSS in my html looks like the following:
<link rel="stylesheet" type="text/css" href="../css/custom.css">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
Same problem with the images in my ../img folder. It all works fine locally. I'd really love some help or advice :)
First thing you need to do is use an absolute instead of a relative path.
if your directory structure is:
-root
--docs
---doc1.php
--includes
---header.php
---footer.php
---css.css
--index.php
In your header, you link to my CSS file like so:
<link href="includes/styling.css" type="text/css" rel="stylesheet" />
you need to do like this :
<link rel="stylesheet" type="text/css" href="/root/includes/css.css" />
You also need to use developer tools on chrome that will help you to debug these things.
I saw there that the images are not uploaded so once you able to upload them you will start getting them on the Website if the path is correct.
and best of luck for the new world of web development.:)
Your file structure has changed from local to online/live. I inspected your page, placed in the CDN for Bootstrap and pow, the styling came alive.
Use the following CDN to replace your current src='' path for bootstarp in your html head to see what I mean.
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
The next steps you should take: make note of where all your files are living on your server, you must place all associated files on the server, as specified by your code, i.e shows that you have a CSS folder.
Also is this HTML file located at the same level as the CSS folder or does this HTML file live in a folder of its own. If not your paths do not need to include the ../ portion and you should use just css/yourFileName.css
So I'm completely new to the world of coding, and I'm trying to make my website with Wordpress. So far I have a theme and all I want to do is tweak a few things here and there, learning how to manage the code. Something which I cannot seem to understand, even though I have looked for answers everywhere, is how to code CSS with wordpress on a specific page. I discovered the CSS code for the entire theme, but I would never find my way round that. All I want to do is link an external CSS stylesheet to the HTML code. I already know about
"link rel="stylesheet" href="style.css"
but this will not create a stylesheet out of thin air.
So my question is, this stylesheet, where will it appear if I have the right code? Will an extra sheet appear next to these ones?:
enter image description here
And if that's not possible, do I need to link to an external stylesheet in a program such as Notepad++? If that's the case, how do I do that?
I hope you understand my question and you will be able to help me. Thanks
you are better off using this to declare your css
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>"/>
and your file will go into your theme directory/ folder no need for additional folders just inside your theme create a style.css file
your css will be in a simmilar adress to the following
wordpress > wp-content > themes > theme-name > style.css
What you need to do is create a Child Theme first. You can do that by downloading Child Theme Wizard plugin. Then after you activate your new theme hover over Appearance tab which is going to open sub-menu with options. Click on editor, and then there will be Stylesheet style.css file to the right. Click on it and put your new styles there.
I have created a very small personal website with three different pages and one CSS file. I know to embed a CSS file into an html page is the following:
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
but form some reason the CSS file only work in one page. Any advice please
Did you checked your folders structure? You may have other html file in different folders.
I suggest to use an absolute path for your stylesheet. something like:
<link rel="stylesheet" type="text/css" href="/css/mystyle.css"/>
first / in href parameter is what I mean.
Edit: You may use a windows machine and upload your files into a Linux machine. Windows do not care about lowercase or uppercase, but it is important on Linux. rename all your filenames to lowercase every where and use it exactly the same in your code (check your link tags again). this may fix your problem
Sharing the link of the site would be helpful. Make sure that the line of CSS aboves goes on each page. For example, if you have 3 pages with 3 different files: index.htm, bio.htm and contact.htm (I'm having to guess since I have not gotten this info from you). Then make sure the link to the CSS above appears on each of those pages.
I'm new to dev in general so I'll do my best to ask the question the right way!
I built my first web app this month using RoR and Bootstrap for some styling.
Now, I want to use Bootstrap again in a new project that I'm building out purely on the front end (HTML, CSS, js).. I'm using espresso as my code editor.
How do I pull in all the bootstrap functionality into my new project? Do I need to move the files over to my new code folder? I tried the #import bootstrap in espresso and it didn't work :)
Thanks in advance!
Just add a link tag in the head of your html page(s).
<link rel="stylesheet" href="your/path/to/bootstrap.min.css">
You need to add a link to your HTML page in the head section , linking the bootstrap library if you have downloaded it like this :
<link rel="stylesheet" type="text/css" href="yourpath/bootsrap.css">
You could also use a CDN if you do not want to download the files , like this one and just add the link to your head.
http://www.bootstrapcdn.com/
Similarly you can link other custom css files you have made .