Coding

WordPress Custom Theme and Website – #7 – Adding and styling Post Meta Information

  • 00:00:01 welcome back everyone how are you doing
  • 00:00:03 last time we left when we just finished
  • 00:00:06 our overall styling here and our post
  • 00:00:10 index list when we got our extra pages
  • 00:00:13 for our about and sample page here with
  • 00:00:15 our nice box here and today we're gonna
  • 00:00:18 focus on our posts a little bit more
  • 00:00:21 first thing first is I want to display
  • 00:00:26 the offer and the categories of a post
  • 00:00:28 just below the title in our like a
  • 00:00:32 little bit more tiny grayish font and
  • 00:00:37 then when we click on a post actually I
  • 00:00:41 want this post title to be here instead
  • 00:00:45 of the our posts because we're no longer
  • 00:00:46 in the list of our posts but we're in a
  • 00:00:49 single post so let's do this now let's
  • 00:00:53 start by displaying the offer and the
  • 00:00:55 categories of a post now we want to
  • 00:00:59 display the offer and the categories as
  • 00:01:03 in the index as well as in a single blog
  • 00:01:07 post so the right place to put it is our
  • 00:01:10 content of PHP right below the title but
  • 00:01:15 above our content or excerpt split here
  • 00:01:19 where we check if we're in a single post
  • 00:01:21 or not because it's well it for both
  • 00:01:24 posts so let's just enter it right below
  • 00:01:26 the title and I want to use a heading 5
  • 00:01:31 h5 tag here which I want and style to my
  • 00:01:35 needs that we got this subtitle ish look
  • 00:01:39 well basically want to see the offer and
  • 00:01:41 that's the categories and obviously
  • 00:01:44 these words are only placeholders but I
  • 00:01:49 want to see everything just like that
  • 00:01:55 now let's do the styling first in our
  • 00:02:00 style of CSS at the top where we style
  • 00:02:03 our h2 let's let's style our age 5 as
  • 00:02:06 well and what do I want
  • 00:02:08 M it shouldn't be bold it should be
  • 00:02:10 in a normal phone wait and should have a
  • 00:02:15 font size of let's say let's try out 14
  • 00:02:20 pixels and I want a color of dark gray
  • 00:02:26 maybe how does it look
  • 00:02:31 excellent that's exactly how I want it
  • 00:02:34 so let's start by implementing our offer
  • 00:02:37 no all we need is a PHP function within
  • 00:02:41 PHP tags obviously the offer and if we
  • 00:02:46 now reload our post page we'll see max
  • 00:02:51 our offer so we can change the name
  • 00:02:54 which is play here back in our back-end
  • 00:02:56 under users your profile if we enter it
  • 00:03:01 Mike has my full in Maximilian and then
  • 00:03:03 select from the drop-down update the
  • 00:03:05 profile and then reload here we now
  • 00:03:11 changed our name which will appear next
  • 00:03:14 your posts now let's print out all
  • 00:03:17 categories this post belongs to next and
  • 00:03:20 first I will go back to our posts and
  • 00:03:23 make sure that we actually have
  • 00:03:25 categorized added right because
  • 00:03:28 currently we don't so we only get one
  • 00:03:33 category eyes now and now I want to add
  • 00:03:36 a category let's call it sports and also
  • 00:03:44 add a slack which will be basically what
  • 00:03:49 will be displayed in the URL if you
  • 00:03:51 filter for a category added now let's
  • 00:03:57 also add a health category and you can
  • 00:04:02 leave the slack felt empty as well it
  • 00:04:06 will automatically just use the
  • 00:04:08 uppercase name or the name and put it
  • 00:04:11 all to lower cases here the third
  • 00:04:15 category which might be
  • 00:04:17 Tech and last one which I will call
  • 00:04:25 gossip okay so we get these four
  • 00:04:29 categories now back to our posts let's
  • 00:04:34 take this post here edit it
  • 00:04:38 no more here we can assign categories so
  • 00:04:41 this one should be lets say gossip and
  • 00:04:43 tack updated and the other post I will
  • 00:04:54 move over to health
  • 00:05:02 okay so we got the offer now let's work
  • 00:05:05 on the category lists next and here
  • 00:05:09 WordPress as in so many cases also has a
  • 00:05:14 neat little function ready for us to use
  • 00:05:16 which we just use by typing echo because
  • 00:05:20 this function returns as a string which
  • 00:05:22 we have to echo out the category then we
  • 00:05:28 specify with which separator we want you
  • 00:05:31 yet separate our category items which
  • 00:05:35 will be a comma in the space in our case
  • 00:05:38 here and then just close the function
  • 00:05:41 with a semicolon
  • 00:05:42 if we now refresh now get our list of
  • 00:05:46 categories here as links which will
  • 00:05:49 directly lead to our category archives
  • 00:05:56 and we will go into detail to these
  • 00:05:59 archives later but as of now we got
  • 00:06:02 these nice links here and all I want to
  • 00:06:05 do now is just make sure they also have
  • 00:06:09 our subtitle styling therefore I'm going
  • 00:06:13 to replace this h5m for spam tag give it
  • 00:06:19 a class of post info and another style
  • 00:06:25 later just take this to organize it I
  • 00:06:33 will you below our blog post classes
  • 00:06:38 here and give the entered a class here
  • 00:06:41 post info now if we refresh here still
  • 00:06:50 see the offer is the same now to make
  • 00:06:52 sure the link styling is used post info
  • 00:06:56 a will also have the color of dark grey
  • 00:07:01 and text decoration of none so we remove
  • 00:07:08 the underlining below our links okay
  • 00:07:13 and our last thing I wanted to have is
  • 00:07:17 to add effect if we exposed info a:hover
  • 00:07:23 when we have our links over if they are
  • 00:07:27 active
  • 00:07:28 I want text-decoration:underline now
  • 00:07:42 refresh here and now what we get
  • 00:07:46 underlining spec when we hover over a
  • 00:07:48 link nice see that's it for our post
  • 00:07:53 info and now the next last thing for
  • 00:07:57 this video is that we want to create
  • 00:08:02 earn and never few another template for
  • 00:08:04 a single toast here therefore here in my
  • 00:08:09 theme folder I'm gonna create a new file
  • 00:08:11 which is called single the PHP this file
  • 00:08:16 will automatically be used when we have
  • 00:08:17 a single post file own and so very fresh
  • 00:08:20 now we see that everything disappears
  • 00:08:23 because this file obviously is empty now
  • 00:08:27 I'm just gonna copy the template slack
  • 00:08:33 here of our home dot PHP file which is
  • 00:08:37 for our post index copy it here now I
  • 00:08:42 want to display the post settle here so
  • 00:08:44 I'm gonna enter into PHP echo mode and
  • 00:08:50 fYI if you type question mark PHP you're
  • 00:08:56 entering in terms of the PHP mode you're
  • 00:08:59 entering with PHP tags and now you can
  • 00:09:01 write PHP code but if you want to print
  • 00:09:04 something to the screen you will have to
  • 00:09:05 write echo anything like we did before
  • 00:09:09 of the categories and if you were no the
  • 00:09:11 only thing we're gonna do is echo out
  • 00:09:13 something you can always use the
  • 00:09:14 shortcut by writing question mark equal
  • 00:09:17 which will directly print anything
  • 00:09:20 followed after the equal sign out of the
  • 00:09:24 screen so you only may use
  • 00:09:26 one winner here you can't write if
  • 00:09:28 complicated if statements or anything
  • 00:09:29 like this because this expects something
  • 00:09:34 after the equal sign which can be
  • 00:09:36 printed out to the stream so we print
  • 00:09:40 out the title oops
  • 00:09:43 title that now if we refresh we have it
  • 00:09:52 here but we still have it here so what
  • 00:09:56 we will have to do is go back to our
  • 00:09:57 content dot PHP and basically just
  • 00:10:05 structure this a little bit differently
  • 00:10:07 so we only want the title to be printed
  • 00:10:09 out like this when we are in the index
  • 00:10:14 and otherwise if we were in the single
  • 00:10:17 mode we will only print out the content
  • 00:10:19 because we'll take care about the title
  • 00:10:22 in our single template now as we want
  • 00:10:25 our post info to be shown in both
  • 00:10:29 templates I will just copy it into each
  • 00:10:32 of these if conditions here right if we
  • 00:10:37 were fresh we got it like that that's
  • 00:10:42 exactly the result order to achieve this
  • 00:10:44 with you so in the next video we will
  • 00:10:48 create a little search form over here
  • 00:10:51 and I will show you how you can run the
  • 00:10:54 tree search and display the results in a
  • 00:10:58 list like this like this just for the
  • 00:11:06 results the fit search so you see you
  • 00:11:08 there
  • 00:11:09 have a nice day and goodbye